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.
- Creating custom domain name instead of localhost in Ubuntu
- Setup Web Server Over Docker Container in Linux
- Connecting to the Internet Using Command Line in Linux
- How to Test Internet on Linux Using speedtest-cli?
- The Internet and the Web
- UDP Client Server using connect | C implementation
- TCP Server-Client implementation in C
- AWS EC2 Instance Setup with Apache Server
- UDP Server-Client implementation in C
- What to do when load on a Linux based web server goes high?
- Windows Server 2012 R2 Stuck at "Updating Your System”
- How to Secure a Live Server?
- Different Python IDEs and Code Editors
- Hackathon - Think, Code, Create
- Characteristics of a Clean Code
- Getting System and Process Information Using C Programming and Shell in Linux
- Operations on Audio/Video files using ffmpeg, avconv, and youtube-dl
- Using fork() to produce 1 parent and its 3 child processes
- Chat application between two processes using signals and shared memory
- Python | System hardening and compliance reports using Lynis
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.