Using ngrok to test local websites and APIs

Published | 2 min read

Often when I am creating a new website, I want to see how it is going to look on an actual device like my phone or tablet. You can use Chrome Web Tools for mimicking a device but it isn’t the same as an actual phone.

Chances are however that if you try and access the service using your IP Address on another device it will likely be blocked by your operating systems firewall. If you want to share the website or API with someone not on your network then you need to jump through lots of hoops such as forwarding the port on your router.

This is where ngrok comes in. It allows you to expose your local service or website over a secure tunnel.

Installing Ngrok

Ngrok couldn’t be simpler to install.

  1. Head over to ngrok.com and sign up for an account (it’s free).
  2. Download ngrok for your operating system. They support Windows, Mac (Intel and Arm), Linux (Intel and Arm) and FreeBSD.
  3. Unzip the downloaded zip file
  4. Connect ngrok to your account ./ngrok authtoken <auth token here>

Using Ngrok

Once Ngrok is installed it is simple to use.

  1. First start up your application so that it is running on your local machine. If I run this Gatsby website locally it runs on port 8000.
  2. Start a tunnel to your local port (8000 in this case) ./ngrok http 8000. You should see an output like this:

NGrok Window

Ngrok gives you the http and https address that you can connect to and you will see the incoming HTTP requests on the console.

From their you can access the service running locally on your phone, tablet or even give it to someone else to try out.

ngrok-on-iphone

You can also access a Dashboard locally on port 4040 if you want to get a detailed look of the requests and responses going to your service.

ngrok dashboard

Ngrok is free for single use quick demos, if you need something more such as custom domains then you will need the paid account which starts at $5 per month.

Final Thoughts

Ngrok is one of those services that every developer should have in their toolbox. The dashboard is especially useful if you want to monitor the requests going to your service without another tool like fiddler. The free plan is good enough for most use cases, if you need more than the paid options are reasonabl


Was this post useful?
If you found this post useful and would like to support me, you can do so by buying me a coffee. Donations help keep this blog ad free.

ALSO ON ALEXHYETT.COM

Taking a Creative Sabbatical as a Software Engineer

Taking a Creative Sabbatical as a Software Engineer

  • 28 September 2022
The last couple of years have been tough for many people. A mix of lockdowns and general anxiety has left many feeling burnt out and exhausted. For software developers, the move to working 100% remotely wasn’t as much of an upheaval as it has been fo...
Adding Inline Javascript to a React App

Adding Inline Javascript to a React App

  • 11 February 2022
Let me start this with a disclaimer, I am not a React expert and I am sure there are probably other ways to do this. If you know of a better way then please let me know in the comments! I have recently added Giscus to my blog which is a great way to ...
Privacy Focused Blog Services

Privacy Focused Blog Services

  • 28 January 2022
Towards the end of 2021, I started getting into web3 a lot more. Not only did I join the Developer DAO but I also launched my own NFT collection and wrote a few blog posts on the topic. One of the key components of web3 is the ownership of data. In w...
What is DeFi? Understanding Decentralized Finance

What is DeFi? Understanding Decentralized Finance

  • 19 November 2021
If you are new to the crypto space the concepts of decentralised finance can seem a bit overwhelming. There are so many new terms to try and understand, it can be challenging to see how everything fits together. I have been working in the traditional...
Using Hashnode as a Source for Gatsby

Using Hashnode as a Source for Gatsby

  • 05 November 2021
I have done quite a few website migrations over the years. My blog like many first started out on WordPress. After several attempts at optimisation, I ended up generating a static version of my WordPress website. On my static site generation journey...
What is Web3? The Decentralised Internet Explained

What is Web3? The Decentralised Internet Explained

  • 15 October 2021
If you have stumbled upon this article you have probably seen the term web3 being mentioned around the internet. Especially on Twitter at the moment it seems to be the latest buzzword. With all the hype around NFTs and crypto at the moment, a lot of ...
Ditch the Ads: The Future of Website Monetization

Ditch the Ads: The Future of Website Monetization

  • 08 October 2021
Do you remember that scene in Ready Player One, when IOI are showing what the future of the Oasis will look like once they take over? “We have determined that we’ll be able to fill 80% of the user’s display with advertising before inducing seizures”...
Dealing with Imposter Syndrome as a Software Developer

Dealing with Imposter Syndrome as a Software Developer

  • 28 May 2021
I have been a professional software developer for over a decade and I have been writing code for over 25 years. However, sometimes I still feel like a fraud. It turns out, I am not the only one that feels this way and they have a name for it, it is c...