How to Forward Ports with VS Code: A Step-by-Step Guide to Connect Your Local Development to the World!

3 min readOct 15, 2023

Hello Guys, Today I found something very cool which will be very helpful for you. I will provide a guide to forward ports without using any 3rd party software like Ngrok.

What is Port Forwarding?

In Simple words, port forwarding is directing traffic to your device. Yeah, that’s it…

How it works?

Well, I made a simple diagram to understand it clearly

I hope You got it. So let’s continue this…

Steps to Setup this Magical Power ✨

Installing VS Code

I know you already have VS Code installed on your system but if you don’t just go to the VS Code site and install it.

Setting up the Settings 🤟

Now Open Your VS Code and Run Any Web Application you want. So for example I have a simple Python-based API built using FastAPI.

Here’s the Code that I'm using:

from fastapi import FastAPI
app = FastAPI()

@app.get("/")
def read_root():
    return {"Response": "Port Forwarding with VS Code."}

To Run FastAPI app I'm using uvicorn .

uvicorn main:app --reload

It is Locally Accessible right now so let’s make it Publicly visible and accessible by Internet.

You can these Ports Options Click on it:

Now Click on Forward a Port

Note: It will ask for GitHub Sign In and after signing in you need to authorize the VS Code. this is only for first-time setup.

Enter the Port which you want to forward so in my case it’s 8000. I will input 8000 and Hit Enter.

Now you can see it’s saying starting port forwarding system… and after few seconds it will show this.

We got the forwarded address and we can access it by simply copying and pasting the URL in any browser but only you can access it right now because its visibility is private so let’s make it public. Just Right click on the mouse🖱️