VS Code: Run Local Projects in Cloud with Port Forwarding

In this step-by-step guide, you’re going to learn how to run a small local project or service in the cloud using VS Code’s local port forwarding feature.

What does this mean exactly?

VS Code forwards your local service (i.e. MySQL, MailTrap, etc) or server (i.e. NodeJS) port to the Azure cloud system using Microsoft Dev Tunnels and create an URL that can be either private or publicly accessible.

Why would I want to expose my local project or service to the public?

By running your local development project or service in the cloud, you can:

• share your work in progress with colleagues or clients
• Test a web application on other devices, like mobile phones or tablets
• Test an app with external services, like a payment system

One quick mention before we jump right in, you need to have a GitHub account because it’s required by the Dev Tunnels and Azure APIs.

Let’s get started!

Start up a local server or service

To be able to forward the port and run the project in the cloud, you must start up a local server first.

For the purpose of this guide, I’m going to use this Super Simple Stopwatch project as a reference. But, of course, you can use whatever project or service you’re comfortable with.

You can clone the project on your machine by running the following command in a terminal:

git clone https://github.com/Tynael/super-simple-stopwatch.git

To spin up a server, run the following command inside the project:

npx serve

This will create a NodeJS server without installing any packages.

You can then go to http://localhost:3000 to play around with the project on your local machine.

🎥 Should you prefer a video guide instead, I got you covered:

Forward the Port and reach the Clouds

Next up, you have to forward the port of the local project.

To go to the Ports tab in VS Code, you can click this button

or press down CTRL + `and then go to the Ports tab.

Then click the Forward a Port button.

If you’re not logged in into your GitHub account, you’ll be prompted to sign in.

Then you have to specify the port on which your server or service is running.

In this case, it’s the default 3000.

Once the deployment finishes, you can notice the URL that has been created for you.

The structure of the domain is https://{hash}-{port}.{region}.devtunnels.ms/

Click the globe icon to open the link.

The project is now up and running in the clouds!

It’s nice to point out that any change you make in your code base will be reflected in the cloud in real time. 😎

URL’s Visibility

The URL’s visibility is private by default.

When you access the URL, you’ll be asked to authenticate with your GitHub account.

To make it publicly available on the internet, right click anywhere inside the Ports tab entry, then go to Port Visibility and check the Public option.

To delete the port forwarding entry, mouse over it and click the X icon or from the same menu shown in the above picture, click on Stop Forwarding Port.

Happy coding 😊

Comments