Setting Up ngrok on WSL2. Linux & Windows

I decided I wanted to try out 2 new things. The 1st was trying my hand at Sinatra. I enjoy coding and learning Ruby. Rails has been a lot of fun, and I wanted to see what else the Ruby ecosystem had to offer.

The 2nd thing was trying out ngrok a simple way to serve web apps. If you ever naively told someone to visit the 1st app you made by going to localhost:XXX to find out that the local part means it's only on your machine, aka local, then this is for you. You can open up that port in a relatively safe way on a temporary domain to share with others while you're running your server locally. https://createeverydaysapp.ngrok.io as an example.

Were are just going to focus on setting up ngrok today. My machine is Windows 11 and I am running WSL2 with Ubuntu.

1. Download

   https://ngrok.com/download

   Be sure to choose the Linux version.

2. CD into the directory for your downloads or whatever folder you downloaded the .tar file. Be sure to do this from you WSL side. For me I used the Windows file explorer (Windows side), clicked on the Ubunutu "side" and clicked around to remember the path to the download file. I then replicated this path in the terminal.

3. Run this command:
   sudo tar xvzf ~/Downloads/ngrok-v3-stable-linux-amd64.tgz -C /usr/local/bin

4. You will need a token from ngrok.

   1. Be sure to sign up for the free account and confirm your email. You will see a button to generate a auth token.

   2. Add token. In your terminal
      ngrok config add-authtoken <insert token here without the brackets>

5. Start your local server for your app. For the Sintra app this was puma. It created a web app available at localhost:9292 in the web browser.

6. Start a tunnel. You will likely need to do this in another terminal window.

   1. ngrok http #

      where the # represents your port number. Using my Sinatra app it would look like this:

   2. ngrok http 9292

7. Visit your app on the web. It looks the same to you as before but now that link is live for anyone else who has it. They can visit your app and use it for as long as the server is running on your site and they have a free ngrok account.

   You can add other flags to the ngrok http # SSO, OAuth, and more. There is even an option where you only share it so Google accounts that you whitelisted. Check out the docs.

Overall, minus a teeny speedbump here and there it was a really simple process.

If you have any questions or feedback on any of the steps please reach out.

Image credit: Daniel Jerez Unsplash