Ngrok your Angular Apps

Host. Local Host……..!

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.

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.

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.

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.

After 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!!!!

Related posts:

Books are a great source of Information. No matter in which field you are in books provide you with some unique information. As a Beginner in UX Design I recently started to read the book “ Design of…

Despite deployment delays related to local supply chain changes — now compounded by the COVID-19 outbreak, we have opted to immediately incorporate changes to the CADD Protocol and reporting…

So much from the past is long gone — corded phones, the food pyramid, writing checks at the grocery store. But on the flip side, there are things from years gone by that have come back — mom jeans…