Remote Development: A Step-by-Step Guide to Port Forwarding with Visual Studio Code (VSCode)
Visual Studio Code adds port forwarding, a built-in port forwarding system that allows developers to share locally running services over the internet with other users.
Introduction:
The latest version of Microsoft’s popular code editor, Visual Studio 1.82, now includes a feature called port forwarding. With this new port forwarding system, developers can easily let other people and devices access the services they’re running on their own computers over the internet.
Port forwarding with Visual Studio Code (VSCode) is a game-changer for remote development and collaboration. This step-by-step guide will show you how to set up port forwarding, making your local development environment accessible over the Internet.
Prerequisites:
Before you start, ensure you have the latest version of VSCode, or you can download it directly from their website.
How to use local port forwarding
To begin, you’ll need a service that you want to make accessible through port forwarding. If you don’t have one yet, but have Node.js installed, you can initiate a server on port 3000 by running this command:
npx serveor you can download the repo from GitHub:
https://github.com/kumaranil3921/node-redis-cache-hogwarts-api-tutorial
Then, navigate to the Ports view in the Panel region (Ports: Focus on Ports View), and select Forward a Port.
If you haven’t used GitHub for login previously, you’ll need to sign in when prompted. Then, you can specify the port you want to make accessible over the internet; the default port using the above command is port 3000. Once you do, the port forwarding system starts and the Ports view updates to show the port you forwarded and its Forwarded Address.
When you hover over the Forwarded Address, you’ll find options to copy the address, open it in your web browser, or launch an in-editor preview.
By default, the forwarded port is Private. When you navigate to the URL, you’ll be required to sign in with the same GitHub account you used to start the port forwarding process in VS Code. You can change the visibility by right-clicking on the port and selecting Port Visibility > Public. Public ports don’t require sign-in.
Conclusion
In this guide, we’ve discovered how to make our locally running services accessible over the internet through the use of VSCode. Thanks to this innovative port forwarding system, developers can effortlessly grant internet access to the services they’re running on their personal computers for others to use.
I hope this article has been helpful and enjoyable for you. If you have any questions or comments, please don’t hesitate to contact me. I would also appreciate 👏 if you like the post, so others can find this too.
If you enjoy reading this post, got help, knowledge, inspiration, and motivation through it, and you want to support me — you can “Buy me A Coffee.” Your support really makes a difference.
Thanks, and see you next time!
