Start tracking your progress
Trailhead Home
Trailhead Home

Set Up Your Environment

Learning Objectives

In this project, you will:

  • Set up a development environment using various tools.
  • Use ngrok, the Slack APIs, and Node SDKs to build and test your bot.
  • Build collaboration and interactivity into the bot.

This project was produced in collaboration with Slack, which owns, supports, and maintains the products, services, and features described here. 

First Things First

Ideally, you’re coming to this project with knowledge of what Slack Apps are and what each component of a Slack App can do for you. This is reviewed in the previous module. You can find it by clicking here.

In this project, you use the Slack APIs to build a bot that sends users a Welcome Message and Terms of Service to accept.

But before going on this quest, you set up your environment, including development tools, testing tools, a dedicated Slack workspace, and various resources found on api.slack.com.

Create a Folder for Your Slack App

To develop a Slack App, it is necessary to have a dedicated folder for all files relating to your project.

First, create a folder on your desktop and name it first-slack-app. You’re going to be doing all of your work in here.

Install a Text Editor

In case you don’t already have one, download a good text editor—one geared toward writing code. There are a lot of options out there, including Visual Studio Code, Sublime Text, and Atom. These are all available for any platform, so choose one that works for you and install.

Once you’ve installed your text editor, find the folder you’ve created and use your text editor to open the folder. In most text editors, you can click File, Open, and select the folder you’re working in.

Note

Note

Keep your text editor open on this folder, as you’re going to be using it for the rest of the module.

Install Node.js and Slack-Related Libraries

If you go to  https://api.slack.com/tools, you can see there’s a wide variety of Slack-built tools to make it easier for you to use the Slack APIs.

For the purposes of this module, we use the Node.js tools. 

If you don’t have Node.js on your machine, head over to https://nodejs.org/en/download/. It’s generally easiest to select an installer option for the operating system you’re using, as it automatically installs Node.js and npm on your machine.

Once you have node and npm, open Terminal (MAC) or Command Line (Windows) and go to the folder you’ve created.

  • In Terminal, type cd ~/Desktop/first-slack-app then press enter.
  • In Command Line, type cd c:\Users\[myUserName]\Desktop\first-slack-app  with [myUserName] replaced by the user name you have set for your machine. Then press enter.

When you're in the folder, type npm init to create a package.json file in your folder. 

This gives you a setup dialog that ends with the line package name: (first-slack-app). For the purposes of this module, don’t worry about any of this stuff—just keep pressing the enter key until you reach a line that says Is this ok? (yes).

From there, press enter one more time; package.json has been created!

Pressing enter multiple times skips creating complementary metadata like version and description.

Next, install five libraries:

  1. Type npm install --save @slack/events-api then press enter.
  2. Type npm install --save @slack/client then press enter.
  3. Type npm install --save express then press enter.
  4. Type npm install --save body-parser then press enter.
  5. Type npm install dotenv --save then press enter.

This is what each library does for you.

  • Installing @slack/events-api gives you the Node client for the Events API.
  • Installing @slack/client gives you the Node client for the Web API.
  • express is a widely used minimal web framework for Node.js to build a lightweight server.
  • body-parser is a necessary helper library you won’t touch much that basically helps your server to read incoming requests.
  • dotenv makes sure the the environment you set up in future steps interacts appropriately with your code.

If you want to see how your packages were installed, go back to your text editor and open the newly created package.json in your first-slack-app folder.

You should see a section called dependencies (starting at line 11) in this file where all the packages you installed show up by name.

package.json displays @slack/client, @slack/events-api, body-parser, dotenv, and express are installed.

Install ngrok

Before you start building, you first need a place for Slack to send traffic. Typically, a business would use a dedicated web server for this. But for this module, we do this locally using ngrok.

  1. Download ngrok from this website:  https://ngrok.com/download.
  2. Unzip the folder that you downloaded, revealing the executable ngrok file. On Mac and Linux, this is simply ngrok, and on Windows, it’s ngrok.exe.
  3. Drag this executable ngrok file into your first-slack-app folder on your desktop.
Note

Note

While it took only a few steps to set up ngrok, what you did was really important. The Slack Events API requires you send events to a specified URL. In practice, this would send to a dedicated web server. ngrok is a tool that creates a public-facing URL that connects to your local Slack App so you can use the API without needing an actual hosted web application.

Create a New Workspace

It’s best to test your Slack App in a Slack workspace set aside for development before deploying into the business workspace where all your Slack users live. That way you can keep the space used for business clean and production data safe.

It’s easy to create a new workspace if you don’t have one dedicated to development already. And it’s free! Just go to Slack’s website, and find the Get Started button on the top right of the screen.

The Slack homepage has a Get Started both at the top right of the screen and in the body.

Press the button, follow the steps to create a new workspace, and you’re done.

Now we can get into the real adventure—to api.slack.com! 

We won't check any of your setup. Click Verify Step to go to the next step in the project.

retargeting