Skip to content

VS Code: Run Local Projects in Cloud with Port Forwarding

VS Code Run Local Project or Services in the Cloud using 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

 

⚠️ Warning

This approach must be used only for development and testing, not for Production!

 

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.

Start up a NodeJS server easily

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

VS Code Port Forwarding button

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

Then click the Forward a Port button.

VS Code 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/

VS Code local project running in the cloud with Port Forwarding

 

Click the globe icon to open the link.

The project is now up and running in the clouds!

VS Code Port Fowarded Proect in the Cloud

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.

VS Code Port Forward Visibility setting

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 😊


Let me know what you think about this article in the comments section below.

If you find this article helpful, please share it with others and subscribe to the blog to support me, and receive a bi-monthly-ish e-mail notification on my latest articles.   
  

Comments