Webhook backends are a popular use case for Serverless functions. FaaS (Functions-as-a-service) offerings make it relatively easy to provide an HTTP endpoint which hosts the Webhook logic which can be as simple as sending an email to something as entertaining as responding with funny GIFs!
In this tutorial, we will explore funcy — a Serverless webhook backend which is a trimmed down version of the awesome Giphy for Slack. The (original) Giphy Slack app returns a bunch of GIFs for a search term, and the user can pick one of them. Funcy tweaks it a bit by simply returning a (single) random image for a search keyword using the Giphy Random API.
This blog post provides a step-by-step guide to getting the application deployed to Azure Functions and hooking it up with your Slack workspace. The code is available on GitHub for you to grok.
funcy is built as a Slash Command within Slack. As a user, you can invoke it from your Slack workspace using
/funcy <your search term>. This, in turn, invokes our Webhook deployed to Azure Functions — which is nothing but a bunch of Java code. It calls the Giphy Random API and returns the result back to the user.
For example, invoking it from your Slack workspace using
/funcy serverless will return a random GIF.
The upcoming sections will guide you through the following:
- Slack setup and configuration
- Deploying to Azure Functions
Before you proceed, ensure that you have the following ready – it shouldn’t take too long
Please note down your GIPHY API key as you will be using it later
Please note that the instructions in this section have been adapted from the Slack documentation.
Once you’re done creating the app, head to your app’s settings page, and then click the Slash Commands feature in the navigation menu.
You’ll be presented with a button marked Create New Command, and when you click on it, you’ll see a screen where you’ll be asked to define your new Slash Command with the required information.
Enter the required information. Please note that the Request URL field is the one where you will enter the HTTP endpoint of function which will be available after you deploy it. You can use a dummy URL as a placeholder just for the time being e.g.
Once you’re done, hit Save to finish.
Once you’re done creating the Slash Command, head to your app’s settings page, click the Basic Information feature in the navigation menu, choose Install your app to your workspace and click Install App to Workspace. This will install the app to your Slack workspace to test your app and generate the tokens you need to interact with the Slack API.
As soon as you finish installing the app, the App Credentials will show up on the same page. You need to grab your Slack Signing Secret from there
Make a note of your app Signing Secret as you’ll be using it later
Start by cloning the GitHub repository and change into the application directory
pom.xml file contains the following attributes used by the Azure Functions Maven plugin – application name (
functionAppName), region (
functionAppRegion) and resource group (
functionResourceGroup). It has default values for the above parameters, so you can choose to continue using them if you like.
Please note that the app name must be unique across Azure.
If you wish to wish to change the values, please take a look at this snippet from
pom.xml which highlights the
<properties> which need to be updated
The name of the function is not the same as application name (configured via
pom.xml) and is specified using the
@FunctionNameannotation in the Java code for the function – in this case, the name is
You can now build the function and deploy it to Azure
The results from a successful deployment will look something like this
Use the Azure CLI to list your Functions App
You should see a JSON output
You should be able to see the function (under
Function Appmenu) in Azure Portal
Once the deployment is successful, the function should be ready to serve requests and can be accessed over HTTP(s) at the following endpoint –
For an application named
funcyapp with a function called
funcy, the endpoint would be
You’re almost there!
Now that the Azure Functions app is up and running, you need to update it to seed the
Giphy API Key and
Slack Signing Secret as environment variables.
Please refer to the documentation on How to manage a function app in the Azure portal for details.
Head to your app’s settings page, and then click the Slash Commands feature in the navigation menu. Edit the command and replace the value for the Request URL field with your function HTTP(s) endpoint
From your workspace, invoke the command
/funcy <search term>
Since you can’t go wrong with cats, try
Don’t worry if you see a
Timeout error from Slack after the first invocation. This is due to the ‘cold start’ problem where the function takes a few seconds to bootstrap but Slack expects a response in 3 seconds. Just retry (a couple of times), and things should be fine.
The below mentioned resources were leveraged specifically for developing the demo app presented in this blog post, so you’re likely to find them useful as well!
I really hope you enjoyed and learned something from this article!