My first Slack app with AWS Lambda &TypeScript 🐳

Published in

MJ Studio

6 min readApr 23, 2020

First of all, I am a mobile application developer. I developed with Android, iOS native, and React Native recently. Also, I feel attractive to web development & React (I am a newbie 😅). This means that I am not good at server development also Amazone Web Service(AWS) infrastructure construction at all. But recently, I had a chance to make my first Slack App for customizing Slack slash commands and flexible usage in my team workspace. It is a very first step in now. But, I think it has so many features to enhance our work process and some fun things!

What is Slack App?

Have you ever used Slack? In many workspaces, Slack is the most popular tool for communications with team members. I like Slack too. It has simple, robust UIs and so many features to enhance your communications in team workspace.

Then, have you ever used Slack App? If your team used Google Drive, then you maybe have seen this icon in your Slack team space.

These are all Slack apps. The Slack app is a thrid-party workspace helper implemented by each platform maintainers(Slack teams didn’t develop Google Drive Slack App or Dropbox). This indicates that everyone can make the Slack app freely!

The Slack app can integrate a number of settings and features. For example, you can request POSTcall to a specific URL in your backend server. Then your backend server what can do? They can send a message to any conversations(channels, messages…) in your workspace. I don’t describe whole features and API in Slack App. I just want to show you how can we create our first simple Slack app! If you want to lean more basic stuffs, then visit this link!

Get Started

Create Slack App & Slash Command

First, on this page, you can create your Slack app.

You can see your first Slack App in app list now.

We are going to make a simple command using our backend server. If you create slash-command, you can create your customized command in your workspace that installed your Slack app.

I can use my custom slash command in my workspace.

In the [Create New Command], the two fields are very important to make our slash command.

The Command field is just a command name. You can call this name in your slack workspace installed Slack App. The Request URL field is more important. The specified URL Request URL is requested with POST method with Content-type as application/x-www-form-urlencoded . Ok, the backend server just needs to receive this request from the slack server 🥅.

Wait, then what bodies are posted with a request to our backend server? The answer is here.

token=gIkuvaNzQIHg97ATvDxqgjtO &team_id=T0001 &team_domain=example &enterprise_id=E0001 &enterprise_name=Globular%20Construct%20Inc &channel_id=C2147483705 &channel_name=test &user_id=U2147483697 &user_name=Steve &command=/weather &text=94070 &response_url=https://hooks.slack.com/commands/1234/5678 &trigger_id=13345224609.738474920.8088930838d88f008e0

You can parse these url-encoded data for use. Each key-value has important usage in any situation depend on your purpose. It’s time to create our server for Requested URL

Serverless + AWS Lambda

I implemented my Slack app backend server with AWS Lambda + Node.js. I didn’t know about AWS at all. At this point, I am very thank you to my teammate Black. He is a Python Django backend developer and notices me about Serverless service.

Serverless is a service to help deploy our AWS Lambda function to AWS easily. I created my backend with node + typescript. Serverless CLI is a cli tool for configuring Serverless project. If you set AWS lambda and API gateway(Serverless will create two types of instance automatically), you have to configure the mapping template in integration request of AWS API gateway.

You need to make your API get POST request because Slack only request with POST

In the above configuration, I added Mapping Templates in application/x-www-form-urlencoded Content-Type. This template converts form-encoded string to a simple JSON body. Mentioned before, I am AWS newbie 😓 I don’t know any other way…

Cool 🐳 the remained is javascript part now. If you are a javascript-front-end developer like me, you can anything at this point. Good job!

Node + TypeScript

In AWS Lambda, we need to specify a handler will be invoked. In my case, I just create only one Lambda function and a separate request. How can I do that? Do you remember command key from Slack slash command request body? We can separate our process depends on command string.

I typed codes with TypeScript and transpile to javascript with tsc command. In my project, my file system structure is like following.

handler.ts

The Lambda handler in JS is just a async function. I processed the raw url-encoded string body to JavaScript object. And separate process depends on command value. You can set handler name in AWS Lambda setting like this.

I set handler to handler.core module in dist directory. It is because I transpiled typescript code in src directory to dist

The important thing is what you return in handler. In Slack documentation, you can learn what can you returned from handler. But I recommended use Block Kit! Block Kit is message representation syntax in blocks key of the response.

I created npm script for deploying my lambda code to AWS using Serverless.

"deploy": "yarn lint && yarn tsc && serverless deploy"

This is the result!

We learned simply what is Slack App and create the first simple our Slack App.

I will add more features to my MJ Studio Core Slack App for robust communication in the workspace! Thank you for reading 😃

Github
Website
Medium Blog, Dev Blog, Naver Blog
Contact: mym0404@gmail.com