--- title: Integrating VSCode and ngrok | daily.dev description: A walkthrough of setting up Phil Nash's ngrok VS Code extension to launch and manage ngrok tunnels directly from the command palette. Covers installing the... canonical: https://daily.dev/posts/integrating-vscode-and-ngrok-vdkaggucz twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Integrating VSCode and ngrok | daily.dev og:description: A walkthrough of setting up Phil Nash's ngrok VS Code extension to launch and manage ngrok tunnels directly from the command palette. Covers installing the... og:url: https://daily.dev/posts/integrating-vscode-and-ngrok-vdkaggucz og:image: https://api.daily.dev/og/posts/vdKAGGUCz.png og:image:alt: Integrating VSCode and ngrok og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Integrating VSCode and ngrok **[ngrok Blog](https://daily.dev/sources/ngrok)** · 4 min read · 0 upvotes · 0 comments ## Summary A walkthrough of setting up Phil Nash's ngrok VS Code extension to launch and manage ngrok tunnels directly from the command palette. Covers installing the extension, optionally creating a sample Express.js app, launching a tunnel, configuring an authtoken, and extra tips like predefined config settings and QR codes for mobile testing. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I launch an ngrok tunnel directly from VS Code? Install Phil Nash's ngrok extension from the VS Code marketplace, then open the command palette with Cmd+Shift+P or Ctrl+Shift+P and type 'ngrok start'. Enter the local port your app runs on, and the extension launches ngrok and returns a public URL you can copy directly from the editor. _daily.dev surfaces workflow guides like this for developers wiring local tunnels into their editor._ ### How do I set my ngrok authtoken from within VS Code? Open the command palette and run 'ngrok edit settings', then add a line with authtoken: followed by your token copied from the ngrok dashboard's Your Authtoken page, and save the file. Stop existing tunnels with 'ngrok stop' and select All before restarting with 'ngrok start' to apply the token. _developers configuring local dev tools track setup steps like this on daily.dev._ ## Similar posts on daily.dev - [VS Code has a tunnel feature buried in the account menu, and it turned my desktop into a machine I can code on from any browser](https://daily.dev/posts/vs-code-has-a-tunnel-feature-buried-in-the-account-menu-and-it-turned-my-desktop-into-a-machine-i-c-b86q4cas4) · XDA Developers · 0 upvotes · 0 comments - [I turned my desktop into a remote coding server using VS Code's hidden tunnel feature](https://daily.dev/posts/i-turned-my-desktop-into-a-remote-coding-server-using-vs-code-s-hidden-tunnel-feature-z4cxlhy7b) · XDA Developers · 3 upvotes · 0 comments - [Stop Coding Through Remote Desktop. Use VS Code Remote Tunnels Instead](https://daily.dev/posts/stop-coding-through-remote-desktop-use-vs-code-remote-tunnels-instead-5gc5vlwh0) · We Are .NET · 1 upvotes · 0 comments - [Cloudflare Tunnels with Docker Compose: Free ngrok Alternative](https://daily.dev/posts/cloudflare-tunnels-with-docker-compose-free-ngrok-alternative-chygejkfv) · SitePoint · 1 upvotes · 0 comments --- Tags: [#devtools](https://daily.dev/tags/devtools), [#nodejs](https://daily.dev/tags/nodejs), [#vscode](https://daily.dev/tags/vscode) [View this post on daily.dev](https://daily.dev/posts/integrating-vscode-and-ngrok-vdkaggucz) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Integrating VSCode and ngrok","url":"https://daily.dev/posts/integrating-vscode-and-ngrok-vdkaggucz","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/integrating-vscode-and-ngrok-vdkaggucz"},"datePublished":"2026-08-23T07:21:38.325Z","dateModified":"2026-08-23T07:29:32.543Z","description":"A walkthrough of setting up Phil Nash's ngrok VS Code extension to launch and manage ngrok tunnels directly from the command palette. Covers installing the...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/52dba9f751b6bd0f1377f4da85b1cdb5?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/52dba9f751b6bd0f1377f4da85b1cdb5?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"ngrok Blog","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"ngrok Blog","logo":"https://media.daily.dev/image/upload/s--718XXxvE--/f_auto,q_auto/v1787469610/logos/ngrok?_a=BAMAMicg0","url":"https://daily.dev/sources/ngrok"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/integrating-vscode-and-ngrok-vdkaggucz","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"devtools,nodejs,vscode","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"ngrok Blog","item":"https://daily.dev/sources/ngrok"},{"@type":"ListItem","position":3,"name":"Integrating VSCode and ngrok"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/integrating-vscode-and-ngrok-vdkaggucz#faq","mainEntity":[{"@type":"Question","name":"How do I launch an ngrok tunnel directly from VS Code?","acceptedAnswer":{"@type":"Answer","text":"Install Phil Nash's ngrok extension from the VS Code marketplace, then open the command palette with Cmd+Shift+P or Ctrl+Shift+P and type 'ngrok start'. Enter the local port your app runs on, and the extension launches ngrok and returns a public URL you can copy directly from the editor. daily.dev surfaces workflow guides like this for developers wiring local tunnels into their editor."}},{"@type":"Question","name":"How do I set my ngrok authtoken from within VS Code?","acceptedAnswer":{"@type":"Answer","text":"Open the command palette and run 'ngrok edit settings', then add a line with authtoken: followed by your token copied from the ngrok dashboard's Your Authtoken page, and save the file. Stop existing tunnels with 'ngrok stop' and select All before restarting with 'ngrok start' to apply the token. developers configuring local dev tools track setup steps like this on daily.dev."}}]} ```