Exposing Localhost Server over Internet Using ngrok and VS Code
We setup and build many projects but before moving them to the production server, we always test the project, and we share the project among our team to share the progress, we share our project code on GitHub as it supports version control system and, but what if we do not want to share the code, but we only need to share the outcome to the client, preferably we consider localhost to show the outcome of the project to the client, for big or ongoing projects there will be more than a client if clients are at different locations we use the screen share option in a video call to show the working.
But the drawback of screen share is, the client only sees the working demo, not the actual hands-on experience. To overcome this issue we have a tool called ‘ngrok’ to globally share the projects which are available on localhost.
Using ngrok tool we get a unique URL to share our project globally for free of cost(with some limitations).
Installation and Working of ngrok Tool
1. Go to ngrok.com
2. SignUP & Download ngrok software from the Setup and Installation section of the website.
3. Download the software package as per your Operating System. ngrok software will be downloaded in a zip format, after downloading ngrok software extract the files to the desired location and name the extracted folder as ngrok.
4. Open Visual Studio Code application.
5. Create or Open your project
6. Now, install live server extension on VS Code editor and click on “Go Live” button on the bottom bar
7. After clicking on Go Live, project will be hosted on the local host server.
Deploying the Project over the Internet
1. Now open a new terminal on VS Code or use the shortcut key ctrl+shift+` .
2. Enter the following commands :
cd <location_to_ngrok_folder> ngrok authtoken <your_auth_token>
3. Replace <location_to_ngrok_folder> with the address of your ngrok extracted folder and <your_auth_token> with the authentication token which is present on the ngrok dashboard or from here.
Executing the above commands will return the following output.
4. Enter the following command to expose localhost over Internet
ngrok.exe http 5500
Note: 5500 is the port number, give your port number accordingly
The above command will display the output similar to the following
- Web Interface link is to get the statistics of the shared URL
- Forwarding url’s with ngrok domain name are the actual links to share the localhost project
5. To stop the url from surfing online press ctrl+c key combination on the terminal .
Note: To set password to url, we must login to ngrok and connect our ngrok account using auth key.
Type this command in the terminal of the code editor:
ngrok http -auth="<username>:<password>" 5500
Replace <username> with your respective username and <password> with your respective password and 5500 with the respective port.