There are many times in development when a localhost server just wont cut it. Thats when we can use a nifty tool called ngrok. Ngrok creates tunnels. These tunnels connect your local codebase with a public site, without having to do any annoying configuration. The main use case for vonage developers is when using an api that relies on webhooks to send automated information. You can read more about that in testing with ngrok in our developer portal tools.
The use case were interested in this article is using ngrok with ruby on rails when building a project and allowing other users to access it from their browser. This allows for the most realistic simulation. Also, its pretty sweet to share something with friends, even if you never deploy it publicly.
Disclaimer: ngrok is free for non-commercial use, but requires a paid account if your product is commercial. An alternative to ngrok is localtunnel which is open source and covered by the mit license. The vonage developer relations tooling team uses localtunnel for work with the vonage client sdks. Use what is best for your needs.
# Installing ngrok
straight from the ngrok documentation, the full installation of ngrok is 3 steps: installing the ngrok agent, creating an account, and then connecting to your agent to your account. And for rails we have one additional step, adding ngrok to your development environment.
# Installing the agent
for macos, use homebrew:
$ brew install ngrok/ngrok/ngrokfor linux, use apt:
sudo tee /etc/apt/trusted. Gpg. D/ngrok. Asc >/dev/null && \
echo "deb https: //ngrok-agent. S3. Amazonaws. Com buster main" | \
sudo tee /etc/apt/sources. List. D/ngrok. List && \
sudo apt update && sudo apt install ngrok\
for windows, use chocolatey:# Creating an account
if you dont have an account sign up for one at the ngrok dashboard. If you have an account then login. Either way with your free account you will need to retrieve your authtoken for the net step. Just go here.
# Connecting your agent to your account:
here we will need that authtoken from the last step. The authotoken is what the agent uses to login to your account when creating a tunnel.
Run the following line in the command line. Dont forget to replace token with your actual authtoken.
$ ngrok config add-authtoken token# Running ngrok
the best part of ngrok is that it has the easiest command ever. Just a single line to tell it which port to listen for and serve up. In a rails application, we know that puma loves port 3000!
$ ngrok http 3000# Adding ngrok to your rails development environment
in your application, you'll have a file config/environments/development.rb. This file tells rails how to configure the development environment.
Here we'll need to add one line:
config.hosts << "\[ngrok url]"
for example, in the above instance of running ngrok i would add:
config.hosts << "b994-77-73-159-12.ngrok.io"it is important that this line is added within the rails. Application. Configure do block.
Now we can run our rails server: rails s
and now our app is up and running and you can invite friends to join try it out by sending them the ngrok url.
# Common mistakes
these are some common mistakes i make, no matter how many times they always seem to persist.
- Leaving https in the
config.hosts - leaving a space in the
config.hosts - forgetting to restart the rails server after adding or updating the config. Hosts in development
- adding the config. Hosts outside of rails. Application. Configure do.
# References
https://developer.vonage.com/en/blog/using-ngrok-in-rails-in-2022