Building ‘Ready to Fly’ Custom Salesforce & Slack Integration app using Slack APIs and Heroku/ngrok

‘Ready to Fly’ is a sample app that shows how to integrate Salesforce & Slack

App Credits: ‘Ready to Fly’ : Salesforce / Trailhead-apps / Slack API

💁 In this article, we’re going to learn how to build custom integrations between Salesforce and Slack using Slack APIs, Heroku, ngrok, and custom Salesforce implementation to build the ‘Ready to Fly’ sample app. This app is available on GitHub which is built on top of the Salesforce Slack Starter kit. Expectations at the end of this article are that we have an up-and-running Slack custom app that integrates with Salesforce and we can see the integration working in real time on both systems.

⏮ ️Pre-requisites

This article guides you through the steps using a free developer edition org.

To be able to run this project you will need the followings:

• A new Trailhead Playground, or sign up for a free Developer Edition org. Optional: If you want to use scratch orgs follow the instructions to enable Dev Hub in your Salesforce Developer Org.
• A new Slack workspace. You will need to create this workspace through a personal Slack account. (instructions here)
• Heroku account (signup for free)

Starting November 28th, 2022, free Heroku Dynos, free Heroku Postgres, and free Heroku Data for Redis® will no longer be available.

• git >= 1.22 (download here)
• node >= 14 (download here)
• sfdx CLI >= sfdx-cli/7.142.0 (download here)
• heroku CLI (download here)

💁 You’re advised not to continue with next steps until the pre-requisites are complete.

Gear up to set up for a new Slack custom app ⚙️

• Once you’ve logged in to your Slack workspace, launch https://api.slack.com/apps/new to create a new custom App.👶
• Existing apps can be found at https://api.slack.com/apps/
• There are two possible ways to create an app: From Scratch or from an app manifest. Select option two with the manifest app.

Create a new app using the manifest option

Select your Slack workspace and continue

• Copy the manifest.YAML content (link) & paste it to the YAML tab.
  Go through each line for a better understanding of this file.

Copy and paste.YAML content and click Next

• Review and confirm the app and click Create. App name, scopes, features, and all settings can be verified before creating the app.

Click Create to create the Slack app from the selected YAML configuration

• Your brand new app ‘Ready to fly’ gets created in Slack.

The new app ‘Ready to fly’ gets created in Slack.

• Under ‘Basic information from the top left, scroll down to the Display Information section and upload this image to the App Icon & Preview.

Upload app logo

• From the left sidebar, go to the ‘Install app’ section.
• Click the ‘Install to Workspace’ button.
• I see ‘ Reinstall to Workspace’ because the app is already installed in my workspace and this option is needed if you want to reinstall with the latest scope and YAML configurations.

Install or Reinstall to workspace, as applicable

• With this, your app is ready to further install and deploy to Salesforce org.

Deploying the newly created Slack app in a Salesforce org and Heroku 🛫

In this article, we’ll guide deploying to Salesforce non-scratch org only.

• First of all, clone the GitHub repo for a ready-to-fly app

git clone https://github.com/trailheadapps/ready-to-fly

ready-to-fly cloned to local VS Code

• Authenticate your Salesforce org and set it as default with the name of your choice.

sfdx auth:web:login — setdefaultusername -a slackIntegrationUsingAPIsHerokungrok

Set default org : slackIntegrationUsingAPIsHerokungrok

• Login to your Heroku account

heroku login

• Possibly you could get errors like ‘unable to get local issuer certificate, make sure you’ve proper certificates in your machine installed or optionally run ‘Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force’ (Not advisable option though). Make sure you’ve successfully logged in to Heroku for app installation.
• Finally, run the deployment scripts cloned from the GitHub repo:

cd ready-to-fly/scripts
npm install
cd ..
node scripts/deploy.js

• Select: Non-Scratch Org and hit Enter

Select: Non-Scratch Org and hit Enter

• Then Select the default value for the Heroku app name and hit Enter

Select the default value for the Heroku app name and hit Enter

• Next, for the Slack bot Token value [SLACK_BOT_TOKEN], go to your Slack app under OAuth & Permissions > copy the value of Bot User OAuth token using copy button and paste it into VS Code terminal, and hit Enter

SLACK_BOT_TOKEN value

• Finally, it prompts for SLACK_SIGNING_SECRET.

Enter SLACK_SIGNING_SECRET value

• Get SLACK_SIGNING_SECRET value from Slack app > Basic Information > under App Credentials section, click Show for Signing Secret token, copy and paste into VS Code terminal. Hit Enter at the end.

Get SLACK_SIGNING_SECRET value

• It should then be able to create an app in Heroku and also deploy the full package in your Salesforce org slackIntegrationUsingAPIsHerokungrok

Final step

• Heroku app gets created (Note): App name should match the same as shown in the above screenshot. In my case, I have already created the app with the name shown below and hence using the existing app for further steps.
• The app name would differ for each user trying to follow these steps.

App created in Heroku

Configuring Slack app for setting Heroku instance

This is the final step and we need to enter Heroku instance URL in the Slack app.

• Go to your Slack app https://api.slack.com/apps/ & select Ready to Fly.
• From the Left sidebar, click App Manifest and Edit the YAML file to edit the request_url value with Heroku app URL to https://<heroku-domain>.herokuapp.com/slack/events
• in our case, the URL would be https://heroku-app-divine-glade-84.herokuapp.com/slack/events. Save the App manifest and re-install the app in your Slack workspace as it prompts.

Edit request_url with Heroku app URL

Click ‘Verify’ to verify the events endpoint {it would show your Heroku app url}

Finally, let’s build and deploy the code 👨‍💻

Building Salesforce App 👨‍💻

• First, From VS Code Terminal, run the below CLI command to build the app, for Salesforce metadata sync in your dev org:

sfdx force:source:retrieve -p force-app/main/default

and then run

sfdx force:source:deploy -p force-app/main/default

to deploy metadata from orgs to the local project folder force-app

Building & deploying Node.js App 🥎

• For the Bolt Node.js app, use the steps below: cd into apps/ready-to-fly folder

cd apps/ready-to-fly

• add git remote to app repo using (heroku-app-divine-glade-84)

heroku git:remote -a <your heroku app name goes here>

• run git push heroku main to push code to Heroku

Local Development and Testing using ‘ngrok’

Sign-up to ngrok here before you proceed with the next steps.
Ngrok is a cross-platform application that exposes local server ports to the Internet.

• Install ngrok with the npm command (optionally download executable)

npm install ngrok -g

• Get ngrok Auth token from the ‘Setup & Installation’ page

Get ngrok authtoken

• Run command, replace <my_auth_token> with token value copied from the above step.

ngrok authtoken <my_auth_token>

Authenticate ngrok

• Finally, run the ngrok tunnel with the below command

ngrok http 3000

ngrok tunnel running

Copy the ngrok tunnel URL to the following places:
Important : Everytime you run the ngrok http 3000 it generates a fresh tunnel URL. If you run this command again, you have to copy the new tunnel URL and paste on below location each time.

• Your manifest file request URLs

Copy the ngrok tunnel URL to app manifest

• The HEROKU_URL environment variable in your .env file

• The Callback URL for the connected app that’s used for authorization in Salesforce — simply add the ngrok URL in a new line as shown below

Add the ngrok tunnel URL to the Callback URL for the connected app

• Finally, Modify the “boltApp” — ‘named credential’ to contain the ngrok URL, as it’s the one that we use to callout from Salesforce to Slack

Modify the boltApp ‘named credential’ to contain the ngrok URL

With this, you’re ready to fly ✈️

Time to test the ‘ready to fly’ ✈️ app — locally

• First thing first, ngrok tunnel must be running in order to test the app.

• Open, one more terminal different from the one where the ngrok tunnel is running.
• Execute the below command from the project folder

node app.js

Sometimes, you might gets errors launching the app saying express.js is missing.

For me it worked when installed express locally with — save option as follows:

$ npm install express --save

and it’s time to fly ✈️

Congratulations! ✈️👏🎉

Your app is now running locally and you can go to the Slack workspace

• For the first time, you would need to Connect and authenticate your app with Salesforce org credentials.
• Once connected, you’re good to go.
• Now, head over to Salesforce, launch the Ready to Fly app and create a new record.

launch the Ready to Fly app

• Create a New Travel request record.

Create a New Travel request record.

• And boom! ✈️👏🎉💥
• Instantly, your Slack workspace is notified on the new Ready to fly travel request record. You can view details, Approve or Reject
• Additional configuration might be needed in order to function all the buttons available.

Notification in Slack for new travel requests from Salesforce

New Ready to Fly travel request arrives in Slack

Create more records as needed.

More Travel Requests available in Slack

Possibilities are limitless when you fly with this app 🏃.

Try to congifure the logic in Apex classes, config etc under /force/main/default/ in your app from Salesforce side and you can build your own functions to make this app more interactive, either way.

Credits : Ready-to-fly is available as Trailhead-app on Github, go & give it a try. 👍

Developer details:

• Twitter: @sombirsheoran
• LinkedIn : https://www.linkedin.com/in/sombirsheoran

Please reach out to me for any suggestions or feedback. Would love to hear them❤ If you loved this post, please applaud at the end of this post with a 👏