Sharing Localhost From VS Code - Port Forwarding

Showing off what you built locally has never been easy. Sending localhost:3000 as a URL is like declaring a war.

Hey, I built a website!

            Great, send me the link

Sure, have a look
http://localhost:3000

            Awesome, looks identical to mine

Thanks!

Jokes apart, you first need to deploy it somewhere and then share the URL to a remote person. Or, use a third party service to generate a temporary URL.

Using ngrok or a cloudflare tunnel might be a choice, but now, the feature of port forwarding is directly built into VS Code.

Port forwarding with VS Code

You can now go to the Ports view in VS Code, sign in to GitHub and forward any ports on which your local services are running. For example, you can spin up a node server on port 5000, listen for requests on that server and forward port 5000 to an accessible URL.

The visibility of the URL is private by default, which means you need to sign in with the same github account you used to forward the port. You can set the visibility of the URL as public to remove the sign in barrier.

You can also change the protocol from HTTP to HTTPS if you are forwarding any sensitive information. However, it's not recommended to forward any confidential or sensitive information over the tunnel.

If you are concerned about the security aspect of it, the official documentation says it all.

Personal Take

Does this mean all other services which provide port forwarding or remote tunneling will be obsolete? No. Port forwarding in VS Code still doesn't support remote tunneling and many other features which other services may provide. For now, it's just a basic feature built into VS Code, but the possibilities are endless.

Anyways, I am pretty excited to try this out and see what it brings to the table. At the very least, now we don't have to have another extension just to forward ports.