Building an app with Bolt for JavaScript

Bolt is a foundational framework that makes it easier to build Slack apps with the platform's latest features. This guide walks you through building your first app with Bolt for JavaScript.

Along the way, you'll create a Slack app, set up a development environment, and build an app that listens and responds to events from your Slack workspace.

---

Getting started

The first section of this guide covers creating a basic Slack app tailored to work with Bolt. While we glance over some configuration here, our more general app setup guide goes into greater detail.

Creating a Slack app

To get started, you'll need to create a Slack app:

Create a Slack app

Click From scratch, enter your App Name, and select the workspace where you'll play around and build your app. Don't fuss too much over either field—no matter what workspace you select, you'll still be able to distribute your app to other workspaces if you choose. Click Create app.

Requesting scopes

Scopes give your app permission to perform actions, such as posting messages in your workspace. You can select the scopes to add to your app by navigating to the OAuth & Permissions sidebar or selecting your app below:

Scroll down to the Bot Token Scopes section and click Add an OAuth Scope.

For now, we'll only use one scope. Add the chat:write scope to grant your app the permission to post messages in channels it's a member of.

Installing your app

Install your own app by selecting Install to Workspace at the top of the OAuth & Permissions page, or from the sidebar. Click Allow.

After installation, you'll land back in the OAuth & Permissions page and find a Bot User OAuth Token.

Access tokens represent the permissions delegated to your app by the installing user. Keep it secret. Keep it safe. At a minimum, avoid checking them into public version control. Instead, access them via an environment variable.

Enabling your app's Home tab

This guide uses Home tabs, a feature which offers a persistent space for your app to display dynamic interfaces for users.

To enable your app's Home tab, click the App Home sidebar on the App Management page, or select your app from the dropdown below:

Toggle Home Tab to ON.

Setting up your Bolt app

With the app configured and installed, it’s time to set up a new Bolt for JavaScript project with your app's credentials.

Remix the Bolt for JavaScript app template

This guide uses Glitch , a tool that helps build basic apps. While Glitch is great for development, your server will not stay running when your app is idle. When your app is production-ready, you'll want to host it on the platform of your choice.

To get started, remix (or clone) our Bolt for JavaScript app template:

Remix the app template

In the app.js file, you'll see the import of the Bolt package (@slack/bolt), the instantation of your app, and start-up of the app's server which listens to incoming events from Slack.

We'll add more code later, but first we want to add your app's crendentials to begin listening to Slack events.

Adding your app credentials

To start the app, you'll need to copy over the credentials for your app. Copy the Bot User OAuth Token under the OAuth & Permissions sidebar.

In your Glitch project, navigate to the .env file located on the left-hand sidebar. Paste your Bot User OAuth Token directly after SLACK_BOT_TOKEN=.

You'll notice underneath the access token, there's space for a signing secret. Your app's signing secret verifies that incoming requests are coming from Slack. Navigate to the Basic Information page from your app management page. Under App Credentials, copy the value for Signing Secret.

In your Glitch project, navigate back to the .env file. Paste your signing secret directly after SLACK_SIGNING_SECRET=.

If you click the Tools button at the bottom of the file navigator, then Logs, you should see that your Bolt app is running!

Subscribing to events

Your app can listen to all sorts of events happening around your workspace — messages being posted, reactjis being emoted, users joining the team, and more. To listen for events, your app uses the Events API.

Let's subscribe to the app_home_opened event. Select the Event Subscriptions sidebar. You'll be presented with an input box to enter a Request URL, which is where Slack sends the events your app is subscribed to. We'll use the URL of your Glitch app from above. To retrieve the URL of your app click Share > Live App within your project, and the URL will have your project's name prepended to the Glitch URL.

For example: https://bolt-app-template.glitch.me

By default Bolt for JavaScript listens for all incoming requests at the /slack/events route, so for the Request URL you can enter your project's URL appended with /slack/events.

For example: https://bolt-app-template.glitch.me/slack/events

After you've saved your Request URL, click on Subscribe to bot events, then Add Bot User Event and search for app_home_opened. Then Save Changes using the the green button on the bottom right, and your app will start receiving app_home_opened events as users navigate to your app from the Slack sidebar or search bar.

Responding to events

To respond to events with Bolt for JavaScript, you can write a listener. Listeners have access to the event body, the entire request payload, and an additional context object that holds helpful information like the bot token you used to instantiate your app.

Let's set up a basic listener using the app_home_opened event that publishes a view to your Home tab, which is a persistent space where your app can display a dynamic interface for users.

Paste this listener code into your existing Bolt app:

app.event('app_home_opened', async ({ event, client, context }) => {
  try {
    /* view.publish is the method that your app uses to push a view to the Home tab */
    const result = await client.views.publish({

      /* the user that opened your app's app home */
      user_id: event.user,

      /* the view object that appears in the app home*/
      view: {
        type: 'home',
        callback_id: 'home_view',

        /* body of the view */
        blocks: [
          {
            "type": "section",
            "text": {
              "type": "mrkdwn",
              "text": "*Welcome to your _App's Home tab_* :tada:"
            }
          },
          {
            "type": "divider"
          },
          {
            "type": "section",
            "text": {
              "type": "mrkdwn",
              "text": "This button won't do much for now but you can set up a listener for it using the `actions()` method and passing its unique `action_id`. See an example in the `examples` folder within your Bolt app."
            }
          },
          {
            "type": "actions",
            "elements": [
              {
                "type": "button",
                "text": {
                  "type": "plain_text",
                  "text": "Click me!"
                }
              }
            ]
          }
        ]
      }
    });
  }
  catch (error) {
    console.error(error);
  }
});

View this example

Try it out! Navigate to your app's Home tab by clicking your app from the sidebar in your workspace. When you open the Home tab, you should see your view appear. Congrats on building your first Bolt for JavaScript app! 🙌

Next steps

With the basics under your belt, you can start exploring the rest of Bolt and the entire Slack platform. Here's a few paths you may consider wandering down:

• Check out the examples folder within your Glitch project. There are a few files with examples of apps that show you different features of the platform.
• Improve your app's design with Block Kit Builder. This is a prototyping tool that allows you to design Slack apps quickly, then paste the code into your Bolt app (we also have public Figma files if you'd rather use them to design your app).
• Read the Bolt for JavaScript documentation to learn about advanced functionality and to find example code snippets that show you what else is possible.
• Explore other surfaces where your app can exist, such as messages and pop-up modals.
• When you're ready to take your app from development to deployed, you'll want to host it on the platform of your choice.

Need help or have questions?

Email our developer support team