Share your localhost URL with VSCode help 🌐

Sometimes we need to show the results of our code before it's deployed. But that's difficult when we're still working locally. Today I'm showing you a little trick with VSCode to share your localhost with a simple link (very useful for testing with a designer or product owner). Let's go !

Prerequisite

A GitHub account is needed but no plugin required. You also need to install VSCode on your machine

Set up

1. Open VSCode

2. Go to the menu bar and select Terminal then New Terminal.

3. Launch your project in local environment (with npm run dev or yarn dev for example). You should have a local URL to test your project.
   
   For this tutorial, we will say it's http://localshot:3000

4. This will open a new terminal. Click on PORTS

Installation

Here we go!

Click on the blue button Forward a Port and fill in the desired port. Remember, in our example, this is port 3000.

Press enter and a popup will ask you to connect to github to continue. You'll just need to accept, or even log in to github if necessary.

Before sharing your Forwarded Address, you have to set visibility to public. Just right-click on Private and in the Port Visibility menu , change Private to Public.

Enjoy!

That's it.

Now you can copy/paste and share the Forwarded Address to your contact!

💡 If you enjoyed this article, you'll love our weekly frontend newsletter.
Every Monday, we share curated articles, insights, tools, podcasts, videos and more.