Exposing Localhost Server over Internet Using ngrok and VS Code

07 Aug, 2020
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).
1. Go to ngrok.com
2. SignUP & Download ngrok software from the Setup and Installation section of the website.
Dashboard image after signing in
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
Install “Live Server” extension from Extensions: Marketplace in the editor itself
Go Live for running the project on localhost server
7. After clicking on Go Live, project will be hosted on the local host server.
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.
After giving line 1, next line is generated automatically
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
Here:
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.
Linux-Unix
TechTips
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
ZIP command in Linux with examples
tar command in Linux with examples
SORT command in Linux/Unix with examples
curl command in Linux with Examples
TCP Server-Client implementation in C
How to Find the Wi-Fi Password Using CMD in Windows?
Docker - COPY Instruction
Setting up the environment in Java
How to Run a Python Script using Docker?
Running Python script on GPU.