Setup

This page walks through setting up your webhook and hosting, creating your Actions console project, and modifying your Dialogflow agent to use the webhook.

Firebase

With Firebase, you can host both your webhook function and web app with one tool: the Firebase CLI. This page walks through the process of installing and setting up Firebase for your development.

Install the Firebase CLI

The Firebase CLI requires Node.js and npm (the Node Package Manager).

  1. Install Node.js using one of the following options. Installing Node.js automatically installs npm.

    • For Mac/Linux, use nvm (the Node Version Manager).
    • For Windows, use nvm-windows.
  2. Install the Firebase CLI using npm by running:

    npm install -g firebase-tools

    This command installs the globally available firebase command. To update to the latest version of the Firebase CLI, re-run the same npm install command.

  3. Sign into Firebase using your Google account by running:

    firebase login

    This command connects your local machine to Firebase and grants you access to your Firebase projects.

  4. To test that authentication worked (and to list all of your Firebase projects), run the following command:

    firebase list

    The displayed list should be the same as the Firebase projects listed in the Firebase console.

Update to the latest CLI version

Make sure that you're using the most up-to-date Firebase CLI version by re-running the CLI installation command:

npm install -g firebase-tools

Initialize Hosting

  1. Run firebase init.

  2. Select to set up Hosting.

  3. Select a Firebase project to connect to your local project directory.

    The selected Firebase project is your "default" Firebase project for your local project directory.

  4. Specify a directory to use as your public root directory.

    This directory contains all your publicly served static files, including your index.html file and any other assets that you want to deploy to Firebase Hosting.

    • The default for the public root directory is called public.

      • You can specify your public root directory now or you can specify it later in yourfirebase.json configuration file.

      • If you select the default and don't already have a directory called public, Firebase creates it for you.

    • If you don't already have a valid index.html file or 404.html file in your public root directory, Firebase creates them for you.

  5. Choose a configuration for your site.

    If you select to make a one-page app, then Firebase automatically adds rewrite configurations for you.

At the end of initialization, Firebase automatically creates and adds two files to the root of your local app directory:

Initialize Functions

To initialize Cloud Functions for Firebase for your project:

  1. Run firebase login to log in via the browser and authenticate the firebase tool.
  2. Go to your Firebase project directory.
  3. Run firebase init functions. The tool gives you an option to install dependencies with npm. It is safe to decline if you want to manage dependencies in another way.
  4. The tool gives you two options for language support. Select JavaScript.

Actions console

Next, you create an Actions console project and modify Dialogflow's Default Welcome Intent to use fulfillment.

Create a project

  1. Go to the Actions console.
  2. Click Add/import project.
  3. Enter a name for your project and click CREATE PROJECT.
  4. Click the Games & fun card.
  5. Click the Conversational card.

  6. Under Deploy in the left menu, click Directory information.

  7. At the bottom of the page, check the option under Immersive Canvas.

  8. Under Build in the left menu, click Actions.

  9. Click Build your Action then Add Action(s).

  10. Click ADD YOUR FIRST ACTION.

  11. Under Built-in intents, select Play game and click GET STARTED IN DIALOGFLOW.

Configure the Dialogflow Agent

  1. On the agent creation page, confirm the default language, time zone, and name for the agent and click CREATE.

  2. On the Intents page, click on Default Welcome Intent.

  3. At the bottom of the page, click Fulfillment to expand the section.

  4. Click Enable webhook call for this intent.

  5. Click SAVE.