Rails | Webhooks | Local Development

TL;DR

3 min readMar 29, 2018

Create a POST route in your rails app
Download and install ngrok
If your development server is running on port 3000, run this command in terminal: ./ngrok http 3000
URL gets created and printed to your terminal screen, looks something like this: https://foobarchoovak.ngrok.io
Now if you had a link in your app that looked like this: localhost:3000/facebook_messenger, for the ‘outside world’ to see it, it would look like this: https://foobarchoovak.ngrok.io/facebook_messenger

Hi there! Recently, I entered a “Hack-a-thon” with some friends. We didn’t win but that’s ok, we learned a lot and it was for a great cause in the Tampa area, a non-profit called Metropolitan Ministries.

A little context for you: The problem we had to solve was that their marketing team was getting inundated with Facebook messages from people looking for assistance.

We thought it would be cool to build an app that brought in the Facebook messages and allowed our users to respond to them from within our app too. This kept volunteers out of Metropolitan Ministries’s facebook accounts but also freed up marketing folks to focus on well, marketing.

I was the backend developer for this project so while my teammates explored what assets Metropolitan Ministries(MetMin) had that we might be able to leverage and different frontend frameworks, I researched the Facebook developer documentation.

Webhooks

I had seen the word ‘webhook’ but had not dedicated anytime to find out what they actually were. After reading about them, I found they were exactly what we needed.

What are webhooks?

In my use case, I was interested in Facebook messages. I wanted to get a message from Facebook anytime one was sent to my Facebook page. The Facebook Messages webhook would POST the messages from their webhook when a new message or reply was made. So, I had to create an endpoint in our app to listen for the POST. Think of webhooks like maybe a radio or tv station. Radio stations are always broadcasting but we only get the radio’s broadcasted information when we ‘tune-in’ to that radio station’s channel. So, our endpoint was ‘tuned-in’ to the Facebook messages webhook. Perhaps this is an example of a Publisher-Subscribe model.

How do we get webhooks to work with our app?

As I’m sure you’re aware, in rails we have routes. We can open up paths and define the HTTP method for these routes. Webhooks need a url to POST to, an important detail. So, I made a controller called FacebookMessengerController and made a create action which by default, using resources uses the POST method.

In Facebook, they needed to know what the link to my app was and this was an interesting issue because I am developing locally and Facebook would have no access to my local development environment.

So to be clear we have 2 basic options:

Spend time getting an app up on AWS or Heroku and get the Heroku/AWS url for that app into Facebook configs. Then hope we got everything in the code right but if not, we make make changes, deploy, and test. Very time consuming and tedious.
Figure out how to get a public link connected to my local dev environment, blast code.

Developing with webhooks locally

One… word for you: ngrok, it’s so cool. You can expose your local dev environment to the outside world. It is so easy to set up. So easy in fact that I’m not going to dignify the process with a how-to, just get it installed and setup using the ngrok docs, it’ll take you 3 minutes.

Once I had ngrok setup, I ran this command: ./ngrok http 3000 the 3000 is the port your local dev is using so if your locald dev environment is using localhost:3000, you would use the above example. ngrok then spits out 2 urls that look something like this:

Forwarding                    http://foobarchoovak.ngrok.io -> localhost:3000Forwarding                    https://foobarchoovak.ngrok.io -> localhost:3000

Notice an http and an https option… nice. In my use case, Facebook needed the https link. So I tested my endpoint (http://foobarchoovak.ngrok.io/facebook_messenger) in Postman and it worked so I added it to the facebook messenger settings in Facebook and sent a message in the messenger, worked like a charm.

Thanks for readin’!