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.

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.

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.

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.