Creating a Slack App with Slapp & Firebase
Slapp is an open-source library for creating Slack Apps. We created Slapp to work seamlessly with Beep Boop, like bread and butter in fact, you really should try it. 😀🍞
Note: Everything described in this article is handled for you automatically when you use Beep Boop.
However, it is really important to us that Slapp stand on it’s own and can run anywhere. 🌍 We believe that by making sure Slapp is useful outside of Beep Boop it will lead to a more inclusive and healthier open source project. If you would like to learn how to write a Slapp based Slack App and host it somewhere other than Beep Boop (but why would you want to go and do that? 😢) then this article is for you! 🎉😉
You can host a Slapp project anywhere. There are a two required integration points that we’ve tried to keep very flexible. One is storing and retrieving the results of your “Add to Slack” OAuth flow. The other is storing and retrieving conversational state. We created an example project to demonstrate how easy this is, using Firebase as our database. Firebase is a Google Cloud Platform service that offers quite a few features, one of which is a database service that we’ll take advantage of in this article. All of the examples in this post are pulled from this repository.
You can run this app anywhere that is addressable over the internet and has a valid ssl cert so that you can receive requests from the Slack API (check out ngrok and localtunnel for running locally). The README has some instructions on how to setup your Slack App and Firebase project.
Firebase
The two main entities that you need to save when using Slapp are teams and conversations. Teams are created when someone adds our Slack App to their team, and conversation state is stored temporarily to keep the processing of incoming messages stateless (peak web scale!💥). The first thing I did was create a small database module that is a wrapper around Firebase, exposing a few functions for saving/retrieving teams and conversation state. One thing worth calling out is how Firebase credentials are passed in. Firebase lets you generate a private key, which is a json file. The contents of this file should be base64 encoded and then that string should be set as the FIREBASE_SERVICE_ACCOUNT_BASE64 environment variable (phew 😅).
FIREBASE_SERVICE_ACCOUNT_BASE64=`base64 service-account.json`Teams
Bam! With our database module ready, we can add a way to create new team records. This happens during the “Add to Slack” OAuth flow, which you can initiate by visiting your apps root url ( / ) in your browser. Ultimately we’re storing the response from an oauth.access call as a Slack team at the end of the flow. Details of that can be found in the lib/oauth.js file, but I won’t bore you with the details of OAuth.
When Slapp receives an http request from Slack, it needs a way to lookup that team information (remember that boring stuff you just saved at the end of the OAuth flow? 🤔) and enrich the incoming request with that data. The tokens from our OAuth flow are necessary to make Slack API calls as part of handling the message. The main Slapp() function takes a context property, which is an http middleware function that should lookup the team information. Here we’re using our previously created db object to get the team information and enriching the req.slapp.meta object with it.
Conversations
The remaining integration point we need to account for is saving and retrieving conversation state. Conversation state includes meta-data about where the next step of the conversation goes, along with optional meta-data you can add during the conversation. The main Slapp() function takes a convo_store property that should be an object with a few required functions. In an act of pure serendipity, our Firebase db object has some functions that make it pretty simple to create a conversation store we can use. 🤘
With those two functions, we can now setup our Slapp instance to use Firebase as it’s persistence layer and add a basic message handler for when the phrase “fix it” is heard (seriously, go watch this if you haven’t already📺). We’ll also attach our express() http server to it so it can receive requests.
Firebase is just one example of a database layer you can use with Slapp. Hopefully this example demonstrates a simple approach you can take to hooking up whatever database you’re using. If not, at least there were a few good gifs. We’d ❤️ to hear your feedback on Slapp and welcome all contributions.
Our mission at Beep Boop is to provide the best tools for you to create great Slack Apps. Beep Boop is a product by Robots & Pencils. Need help creating a great Slack integration? Let us know how we can be your hero. 🙋
