Build and Deploy Your Bolt App

Get to Know Listener Functions

You created your project. Now, get it to listen to messages and respond. Slack apps typically receive and respond to 1:n (one to many) requests from Slack. For each type of incoming request from Slack, there is a corresponding listener function to handle and respond. 

Here is a subset of the listeners Bolt apps can pass a function to.

The full list can be found in the Bolt for JavaScript reference documentation. It’s time to configure your app to listen and respond to events, interactions, and interactivities!

Add an Events Listener

Event subscriptions use the event() listener, which you can find examples of in the Bolt documentation. For now, you use the message() listener to listen and respond to messages.

1. In the say-hello folder on your computer, open the app.js file in your preferred text editor.
   
2. Replace all the code starting from the line that begins with //Listens to incoming messages that contain “hello” with the following. To quickly copy the code to your clipboard, you can click Copy at the top right of the code block. Make sure you save your work after.
   

// Listens to incoming messages that contain “hello”
app.message(/hello/i, async ({ message, say }) => {
  //say() sends a message to the channel where the event was triggered.
  await say(`Hey there <@${message.user}>`);
});


(async () => {
  // Global middleware to log all incoming requests once the app starts
  app.use(async ({ body, next }) => {
    console.log("⚡️ Received request:", body); //Log app status and the incoming request
    await next(); //Pass to next middleware or listener
  });


  // Start your app
  await app.start(process.env.PORT || 3000);


  app.logger.info("⚡️ Bolt app is running!");
})();

Take a look at what you did. You entered a message() listener that’s looking for the word Hello (1). This is formatted as /hello/i so the user can enter the word in various ways—“Hello”, “hello”, or even “HeLlO”—and the app will respond. The say() parameter exposes the event’s response URL (2) which, unlike calling chat.postMessage(), doesn’t require additional scopes to reply to message events.

You also strengthened your logs with a middleware that lets you know a request was received (the listener heard Hello) (3). It then passes the message on to your final log letting you know that the app is functioning properly (4). This helps you monitor your app and troubleshoot any issues that may occur as you’re building and testing.

Deploy Say Hello to Slack

Time to deploy your app via the Slack CLI. You already authenticated the Slack CLI to your Trailhead Slack playground. So it knows exactly where to send the app.

1. Open Terminal via your applications folder or using command + space.
   
2. Move into your project. Enter cd say-hello.
   
3. Start hosting. Enter slack run.
   
4. The Slack CLI walks you through the process of creating the new Slack app, confirming the team and workspace to which it’s deployed. Confirm each option.
   
   • Select an app, Create a new app: press return.
     
   • Choose a team, (your team and workspace): press return.
     
   • Choose a workspace to grant access, make sure All of them is selected: press return.
     

The Slack CLI confirms your app has been deployed and it’s up and running. You just need to approve it in Slack and add it to the right channel.

Add the App to the Right Channel and Test

Now that the app is active in your Slack playground, add it to the onboarding channel.

1. Head back to your Trailhead Slack playground.
   
2. Click on #welcome-new-team-members.
   
3. @mention say-hello (local) and press return. Slackbot will notify you that you mentioned the app, but it hasn’t been added to the channel yet. It will give you the option to add the app.
   
4. Click Add Them.
   

5. Send hello from the message field to test the app. The app responds with “Hey there @USER”.
   

You built and deployed your app using the Slack CLI! It’s a good start. Try something a little more interactive by sending a button element rather than plain text in the next step.