Skip to content
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion docs/english/_sidebar.json
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,11 @@
{
"type": "category",
"label": "Deployments",
"items": ["tools/bolt-js/deployments/aws-lambda", "tools/bolt-js/deployments/heroku"]
"items": [
"tools/bolt-js/deployments/aws-lambda",
"tools/bolt-js/deployments/heroku",
"tools/bolt-js/deployments/vercel/vercel"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"tools/bolt-js/deployments/vercel/vercel"
"tools/bolt-js/deployments/vercel"

🪬 question: Can we shorten this path?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that's a question for @lukegalbraithrussell I feel like we need it for some reason but I don't remember why

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tools/bolt-js/deployments/vercel is a folder path right now. you need this to specify that you want the vercel file within the vercel folder.

this looks redundant here, but as long as you name the file either 1. the same name as the folder (like you did) or 2. index, the actual URL will just be "/tools/bolt-js/deployments/vercel"

]
},
{
"type": "category",
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/english/deployments/vercel/new_project.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
66 changes: 66 additions & 0 deletions docs/english/deployments/vercel/vercel.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
# Deploying to Vercel

This guide walks you through preparing and deploying a Slack app using Bolt for JavaScript, [Workflow DevKit's](https://useworkflow.dev/) `DurableAgent`, [AI SDK](https://ai-sdk.dev/) tools, the [Nitro](https://nitro.build/) server framework, and [Vercel](https://vercel.com/home).

When you’re finished, you’ll have this ⚡️[Slack agent template](https://github.com/vercel-partner-solutions/slack-agent-template) to run, modify, and make your own.

---

## Prerequisites

First things first, take a few moments to set up the following:

* Make sure you have a development environment where you have permission to install apps. You can get a free sandbox with the [Slack developer program](https://api.slack.com/developer-program).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* Make sure you have a development environment where you have permission to install apps. You can get a free sandbox with the [Slack developer program](https://api.slack.com/developer-program).
* Make sure you have a development environment where you have permission to install apps. You can get a free sandbox with the [Slack Developer Program](https://api.slack.com/developer-program).

* Ensure you have an account with a Git provider (GitHub, GitLab, or Bitbucket).

## Create a new Vercel project

Create a new Vercel project based on a Bolt for JavaScript template by clicking the button below.

<Button label="Deploy with Vercel" link="https://vercel.com/new/clone?demo-description=This+is+a+Slack+Agent+template+built+with+Bolt+for+JavaScript+%28TypeScript%29+and+the+Nitro+server+framework.&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2FSs9t7RkKlPtProrbDhZFM%2F0d11b9095ecf84c87a68fbdef6f12ad1%2FFrame__1_.png&demo-title=Slack+Agent+Template&demo-url=https%3A%2F%2Fgithub.com%2Fvercel-partner-solutions%2Fslack-agent-template&env=SLACK_SIGNING_SECRET%2CSLACK_BOT_TOKEN&envDescription=These+environment+variables+are+required+to+deploy+your+Slack+app+to+Vercel&envLink=https%3A%2F%2Fapi.slack.com%2Fapps&from=templates&project-name=Slack+Agent+Template&project-names=Comma+separated+list+of+project+names%2Cto+match+the+root-directories&repository-name=slack-agent-template&repository-url=https%3A%2F%2Fgithub.com%2Fvercel-partner-solutions%2Fslack-agent-template&root-directories=List+of+directory+paths+for+the+directories+to+clone+into+projects&skippable-integrations=1&teamSlug=vercel-partner-demo" />

You will then be prompted to select a Git provider. Select your preferred provider and log in.

![New project](new_project.png)

Select your provider as the Git Scope and rename the repo if you'd like. Next, click **Create**.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Select your provider as the Git Scope and rename the repo if you'd like. Next, click **Create**.
Select your provider as the Git Scope and rename the repo if you'd like. Click **Create**.


Keep this browser tab open; we'll be back to it soon. Next, we'll need to add a couple of variables for our app. To obtain these, direct your attention to the Slack app settings page.

## Create a Slack app

Create a new Slack app through [this link](https://api.slack.com/apps?new_app=1), then select **from a manifest**. Next, choose a workspace you have permission to install apps in. Click **Next**, then copy and paste the project manifest code here, replacing the placeholder text in the JSON tab.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Create a new Slack app through [this link](https://api.slack.com/apps?new_app=1), then select **from a manifest**. Next, choose a workspace you have permission to install apps in. Click **Next**, then copy and paste the project manifest code here, replacing the placeholder text in the JSON tab.
Create a new Slack app through [this link](https://api.slack.com/apps?new_app=1), then select **from a manifest**. Next, choose a workspace you have permission to install apps in. Click **Next**, then copy and paste the project manifest code here, replacing the placeholder text in the **JSON** tab.


```js reference
https://github.com/vercel-partner-solutions/slack-agent-template/blob/main/manifest.json
```

Click **Next** and then **Create**.

## Install app

Still in the app settings, navigate to the **Install App** section and click the button to install your app to the workspace. After installing the app, a bot token will be available. Copy this token and paste it in the Vercel setup where it says `SLACK_BOT_TOKEN`.

Back in the Slack app settings, navigate to the **Basic Information** section and find the **Signing Secret**. Copy this token and paste it in the Vercel setup where it says `SLACK_SIGNING_SECRET`, then click **Deploy**.

![Environment variables](env_variables.png)

Now it’ll work through the deployment process and give you updates on what it is doing. Be patient. Deployment is hard work! Once it's finished, you'll see a confirmation screen with a button to **Continue to Dashboard**. Click that button. Here you can see that your app has been deployed! Use this dashboard to keep tabs on build logs, deployment checks and more.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Now it’ll work through the deployment process and give you updates on what it is doing. Be patient. Deployment is hard work! Once it's finished, you'll see a confirmation screen with a button to **Continue to Dashboard**. Click that button. Here you can see that your app has been deployed! Use this dashboard to keep tabs on build logs, deployment checks and more.
The deployment process will kick off, and you'll receive progress updates. Be patient. Deployment is hard work! Once it's finished, you'll see a confirmation screen with a button to **Continue to Dashboard**. Click that button. Here you can see that your app has been deployed! Use this dashboard to keep tabs on build logs, deployment checks, and more.


## Update URLs

Once the deployment has completed, navigate back to the Slack [app settings](https://api.slack.com/apps) and open the **App Manifest** from the sidebar.

Update the manifest so that all of the `reference_url` and `url` fields use your domain. Click **Save** and verify the URL.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👁️‍🗨️ suggestion(non-blocking): Examples might be nice since paths are never obvious for me and these are different from Bolt defaults:


## Run the app

Open your Slack workspace and add your new app to a channel. Your app should respond whenever it is tagged in a message or sent a DM!

Your app is now set up to build and deploy whenever you commit to your repo.

## Next steps

✨ Explore Vercel documentation [here](https://vercel.com/docs/git).

✨ Learn all about [developing apps with AI features](/ai/developing-ai-apps).