Hosting SUSI.AI Web Chat on Firebase

“I often wonder if my smartphone or laptop could become a bit smarter… And, I could talk to it the way I talk to my best friend… Wouldn’t that be cool if I could customise my phone’s assistant and enhance its ‘personality’ whenever I want? Or maybe ‘teach it a little more than others to make its intelligence outshine other students in its class?’ Well, that’s what we aim to achieve in the name of SUSI.AI”

Currently, SUSI.AI is in its growing stage and a number of dedicated developers have been working hard to achieve an open source alternative to existing personal assistants like Google Assistant, Alexa and so on. Each one of them has been focussing on improving existing features or introducing new ones.

This blog focuses on hosting the SUSI Webchat using Firebase Hosting. It presents the proper sequence of steps that need to be followed to deploy the web chat on Firebase Hosting.

What is Firebase Hosting?

Firebase Hosting provides fast and secure static hosting for web app. It is a  production-grade web content hosting for developers. With Hosting, one can quickly and easily deploy web apps and static content to a global content-delivery network (CDN) with a single command.

Hosting gives a project a subdomain on the ‘firebaseapp.com’ domain. Using the Firebase CLI, the files can be deployed from local directories on a computer to the Hosting server. Files are served over an SSL connection from the closest edge server on the global CDN.

Steps :

  • Install the Firebase CLI

    The Firebase CLI (Command Line Interface) requires Node.js and npm, which can both be installed by following the instructions on https://nodejs.org/. Installing Node.js also installs npm.

    Note : The Firebase CLI requires Node.js version 5.10.0 or greater.

Once Node.js and npm have been installed, install the Firebase CLI via npm:

$ npm install -g firebase-tools


This installs the globally available
firebase command. To update to the latest version, simply re-run the same command.

Now login to the Firebase console using

$ firebase login

 

  • Initialize the app

Choose the Firebase app that you would like to deploy and then cd into the project directory and run the command:

$ firebase init


Once this command runs, you would be prompted to choose from the following options :

Database: Deploy Firebase Realtime Database Rules
Firestore: Deploy rules and create indexes for Firestore
Functions: Configure and deploy Cloud Functions
Hosting: Configure and deploy Firebase Hosting sites
Storage: Deploy Cloud Storage security rules

Choose Hosting (use the cursor keys to move the pointer to ‘Hosting’ and then select it by pressing Spacebar key followed by the Enter key).

Now, you would be prompted to select a project from the Firebase console that you would like to associate with the web chat. You can create a new project by logging into the Firebase console from a web browser and then follow the steps below :

1) If you don’t have an existing Firebase project, click ‘Add Project’ and enter either an existing Google Cloud Platform project name or a new project name.

2) If you already have apps in your project, click ‘Add Another App’ from the project overview page.

Running the $ firebase init command creates a firebase.json settings file in the root of your project directory.

  • Add a file

    When you initialise the app, you will be prompted for a directory to use as the public root (default is “public”). You can choose to give it some other name as well, say “build”. This is the directory in which the static content would be hosted. If you don’t already have a valid index.html file in your public root directory, one is created for you.

Note : When a new index.html file is created, it contains the default content. You need to run the following commands to customise it according to your requirements and to display the content that you want to.

$ npm install
$ npm run build


If you skip running these commands, on deploying you will see a dialog box, by default, that would direct you to the Firebase Hosting Documentation.

Test on Local Server

Now you can run the $ firebase serve command to test your web app on a local server. Once, everything looks fine, you can proceed to the next step.

  • Deploy the web app on Firebase

    To deploy the web app, simply run:
$ firebase deploy

 

Your app will be deployed to the domain
<OUR-FIREBASE-APP>.firebaseapp.com

Manage and Rollback Deploys

From the Hosting panel in the Firebase Console you can see a full history of your deploys. To rollback to a previous deploy, hover over its entry in the list, click the overflow menu icon, then click “Rollback”.
Now your app is ready to share with the world! 😀

Check out a video created by me, showing the above mentioned steps : Click here

References