Deploying to Heroku

Because a chatbot built with Botfuel Dialog is a simple webserver, deploying to Heroku is dead simple!

In this tutorial, you'll learn how to deploy to Heroku a chatbot that uses Botfuel Webchat. If you’re not familiar with Heroku, it‘s a Platform as a Service (PaaS) that automates the configuration, deployment and ongoing management of applications in the cloud.

Make sure you completed the Get API credentials part of the Getting Started tutorial and that you have your app’s credentials (App Token, App Id and App Key) on hand. You’ll also need a Heroku and a GitHub accounts.

We’ll proceed in three steps:

  • Add Heroku and Botfuel Webchat configurations to your chatbot
  • Deploy it to Heroku
  • Try it in the Botfuel Webchat Playground

Configuration

In your bot root directory, create a file named botfuel-config.js with the following content:

module.exports = {
  adapter: {
    name: 'botfuel',
  },
};

This will simply tell your bot to use the Botfuel Webchat adapter.

You'll also need Procfile file with this content:

web: npm run start botfuel-config

A Procfile is a simple text file that tells Heroku what command to run to launch your app. Here we just run npm run start with the config file botfuel-config.

Make sure you have a start script in your package.json file:

"scripts": {
  "start": "botfuel-run",
},

Once your bot is configured as shown above, push your code to a repository on GitHub. We’ll now connect your repository to Heroku.

Deployment

Once logged into Heroku, create a new app:


Create a new Heroku app

Give it the name you want, choose a region, then click on "Create app":


Create a new Heroku app 2

In the Deploy tab, click on GitHub for the Deployment method. You can now search for your GitHub repository and connect it by clicking on the "Connect" button:


Connect Heroku app to GitHub

Finally, we need to fill in the environment variables. Click on the Settings tab and then on the "Reveal Config Vars" button:


Set environment variables

Add the App Token, App Id and App Key of your app:


Set Botfuel environment variables

Done! Your bot should be up and running on https://heroku-tutorial-bot.herokuapp.com (replace heroku-tutorial-bot with the name of your app).

See it in action

Now, to see it in action in the Botfuel Webchat, go to the Botfuel Developer Portal and login.

Click on the "Webchat" button of your app:


Webchat button

Then on the "Configuration" tab:


Webchat configuration

Here you’ll need to set your bot endpoint. This is the URL to which Botfuel Webchat will send the user messages. In our case it is https://heroku-tutorial-bot.herokuapp.com/webhook (replace heroku-tutorial-bot with the name of your app).


Webchat endpoint

Click on the "Playground" tab and try sending messages to your chatbot:

Webchat playground test

Your chatbot will answer right in the Webchat! Congratulations, you deployed your bot!