Ngrok your Angular Apps
Host. Local Host……..!
Introduction:
Recently i was working on a project whose phase one is almost near completion and required to be sent to the QA for initial testing. Now at the time, there wasn’t any server available to deploy the Application for testing and hence we had to take a new route and decided to run the project from localhost in our internal network. By running the Application on the internal network, we are sort of hosting our localhost Application to that particular network.
Given the signal, our DevOps team stepped in and worked on making the application accessible on our private LAN. While waiting for this to work my team decided to find any service that can help us in this situation. Upon doing some R&D, I came along face to face with what is known as NgRok.
What is Ngrok
ngrok is a reverse proxy that creates a secure tunnel from a public endpoint to a locally running web service. ngrok captures and analyzes all traffic over the tunnel for later inspection and replay.
So when you download and run ngrok, It simply makes a request to ngrok cloud services that accepts traffic on a public address and relays that traffic through to the ngrok process running on your local machine and then on to the local address you specified.
How does it work
Firstly, download the ngrok zip file from here. Next, unzip and retrieve the exe file and run it.
From here you can see where you would like to go. By typing the command
ngrok http 8080
Here you will insert the port of your Angular application or any other application you wish to host. This will create a new tunnel completely isolated and secure for use on the web. Below you can see it shows the expiry time of the session, the region in which it is active, and the web UI interface, where you will be able to observe all the requests made. Finally, the URLs used for forwarding your localhost data. This terminal provides complete details of the tunnel connection made.
Upload loading the web interface, the screen will open up to this page
This Real time UI interface gives you all the details about the incoming/outgoing traffic from your URL. You can inspect all the requests received and from which IP the requests were made and whether they were successful or not. It even allows you to replay the requests which are really helpful for webhooks.
Next, if you click on the status tab. You will come up to a page which displays matrics, how many requests have been made and how many seconds it took, duration of connection and a lot more details.
Working on a free plan will give you a headache as it will be generating random URLs every time. To get a stable URL, you will need to upgrade to paid plans.
Auth Tokens
For advanced security, you must sign up to get access to your auth tokens. The auth tokens can then be set with the following command.
ngrok authtoken <YOUR_AUTHTOKEN>Secure URLs
When using a free plan, the URL tunnel generated will be accessible by anyone who has it. To get an extra security layer to your local server and protect it from unauthorized personal, add username and password to your URLs. To do this simply use - -auth switch which sets HTTP basic auth to all the URL requests made with arguments username and password.
ngrok http -auth="username:password" 8080After setting a username and password, you can now go and try accessing the URL where you will be prompted to insert username and password in order to proceed to the URL. Maximum Security! checked!!!!
Problems Identified
- When I first used it, I started the tunnel and then went on to make changes to my app which in turn didn't show up in the URL. This actually helped me in figuring out that when a tunnel is created it is completely isolated and hence the changes made after starting the tunnel will not be reflected as it will be on a separate instance of the app. so for the changes to be reflected again, you have to close and start another instance of the tunnel.
- There is a case where you will see console throwing invalid host headers error and disconnecting. These errors are handled via webpack by adding this piece of code:
devServer: {
historyApiFallback: true, disableHostCheck: true,
}
Take Aways
- For those who wish to give a quick demo of your app to the client.
- For making your app quickly accessible for testing.
- If you wish to demo an app on a hackathon without deploying.
- Debugging and understanding any web service by inspecting the HTTP traffic.
Conclusion
In a nutshell, ngRok is a good tool to have in your list for quick and secure access to your local server and most importantly waiting for the DevOps team to do this stuff for you. If you did, follow me on Medium and Twitter to get notification for more articles on Software Development, and don't forget to hit the clap button. Finally! Thanks for reading and Happy coding!!!!!!
