⚠️ This sample has been archived and is no longer maintained.

---

Send To Slack Sample App

This is an example of how to include a Send to Slack integration on your website. It includes basic client side code in React Server side code to manage user authentication and installation of Slack app is built on top of the Slack node SDK. User management is simplified using Auth0

Getting started on Slack development

Before getting started, make sure you have a development workspace where you have permissions to install apps. If you don’t have one setup, go ahead and create one.

Installation

Create a Slack App

1. Open https://api.slack.com/apps/new and choose "From an app manifest"
2. Choose the workspace you want to install the application to
3. Copy the contents of manifest.json into the text box that says *Paste your manifest code here* (within the JSON tab) and click Next
4. Review the configuration and click Create

Environment Variables

Before you can run the app, you'll need to store some environment variables.

1. Copy .env.sample to .env
2. Paste your Slack and Auth0 configurations(if needed)

Install Dependencies

npm install

Run Bolt Server

npm start

Project Structure

manifest.json

manifest.json is a configuration for Slack apps. With a manifest, you can create an app with a pre-defined configuration, or adjust the configuration of an existing app.

app.js

app.js is the entry point for the application and is the file you'll run to start the server. It includes all oAuth redirect URLs as well as endpoints to fetch user data and send messages on behalf of the authenticated user

You'll need to run npm run-script build in order to serve the React client code from your server and allow it to interact with the authenticated endpoints without running into CORS issues

App Distribution / OAuth

When using OAuth, Slack requires a public URL where it can send requests. In this template app, we've used ngrok. Checkout this guide for setting it up.

Start ngrok to access the app on an external network and create a redirect URL for OAuth.

ngrok http 3000

This output should include a forwarding address for http and https (we'll use https). It should look something like the following:

Forwarding   https://3cb89939.ngrok.io -> http://localhost:3000

Navigate to OAuth & Permissions in your app configuration and click Add a Redirect URL. The redirect URL should be set to your ngrok forwarding address with the slack/oauth_redirect path appended. For example:

https://3cb89939.ngrok.io/slack/oauth_redirect