Using ngrok

Developer Relations
5 min read

Ngrok is an easy to use tool that lets you create a secure tunnel on your local machine along with a public URL you can use for testing your local project, or for sharing your work for review with a client or teammate. You can set up HTTP or HTTPS, and due to the popularity of this tool, if something breaks, there are a ton of articles describing different ways to solve your issue. This article covers a couple of easy ways to install ngrok, and what to do if you can't get your web application to talk to ngrok.

ngrok

Our friends at ngrok have written a great article dedicated to supporting Frame.io webhooks via ngrok. Check it out here.

Install ngrok

You can use ngrok in a couple of different ways

Install via the ngrok installer

  1. Go to the ngrok website and follow the instructions there: https://ngrok.com/download
  2. If you want the features offered by connecting an account, then you should follow these instructions to get an account and token.

You don't have to get an account or add the token, but definitely check out the download page to see if it's something you want or need.

Note:

If you use this method, ngrok runs from the spot you store it in unless you make it available across your system.

Install with Homebrew

This is my favorite method for installing ngrok. If you've got Homebrew installed, all you have to do is type homebrew cask install ngrok . ngrok is installed for you and you can use it from anywhere! Best of all, you don't have to type ./ngrok in the terminal at the start of each command you can just type ngrok. You can read more about this option here.

Use ngrok

After you've set up ngrok, choose a port like 3000 and get it running from a terminal command line with the command ngrok http 3000. You don't have to use port 3000, but this is a commonly used port to choose in setup.

If you set up ngrok so it runs from a specific folder, then you must be in the folder where you placed ngrok and use the command ./ngrok http 3000.

Start your server for your project to listen on the same port and you will be able to access your work using the public address provided by ngrok.

Troubleshooting ngrok with Your Web App - Trailing Slash

An issue you may run into with ngrok is not being able to connect to your server when you set up an ngrok URL for use with your web app. What's frustrating about this issue, is ngrok will not register that you sent anything to it. You can open localhost:4040 to see what's going on, and it will show you nothing. (localhost:4040 is provided by ngrok so you can monitor any incoming requests to your server.) Ngrok appears to match addresses to /(.) rather than (/.), so if you don't include a trailing slash at the end of your address and you don't see anything in the ngrok monitoring tools, it's because ngrok isn't finding a match for the address you list.

Here's an example of adding a trailing slash: http://something.ngrok.io/

You can also write your sample applications to resolve to an endpoint that includes a slash. Just remember that for the Frame.io app to reach your server, if your sample app uses the endpoint /actions you need to add the /actions endpoint on to the end of your ngrok address. For example if the ngrok address is http://something.ngrok.io, you would need to provide it in your Custom Action set up as http://something.ngrok.io/actions. This may be different for other web applications, so play around with the end of the ngrok address if you can't get things working immediately.

Can I use something besides ngrok? Try Glitch!

Glitch is a pretty cool alternative to ngrok and is faster to set up. Glitch allows you to create an account and then build your own apps using their servers with a publicly accessible URL. You can collaborate with others, make your code public or private, and choose from a wide variety of languages and platforms. Check out https://glitch.com/create to see what's available.

When you set up your project on Glitch, for some web applications, the trailing slash issue applies. In the case of Frame.io, when you set up a Custom Action in developer.frame.io you need to include the trailing slash at the end of the URL provided by Glitch. You do not need to add anything else, even for the /actions endpoint.

Is there something set up I could try now?

Yes. If you don’t want to use ngrok or make your own Glitch project, we’ve set up a sample application for you to try out here: https://frameio-custom-action.glitch.me. Remember to include a trailing slash when you add this address in the Custom Actions area of https://developer.frame.io.

Resources

This section lists the resources listed throughout the article: