Contents

Extension 101 tutorial series

Build Your Backend

We will now move on to integrating a backend for your Extension. Having a backend is important if you want to a) process business logic that shouldn’t be exposed to the front end or b) establish connections and integrations into other services such as a database. Extension backends can be in any language, use any hosting, and utilize any database.

In this tutorial, we will be building a backend to save the questions the viewers submitted and display them to the broadcaster via the live configuration page on the dashboard.

Software used in this tutorial includes:

Note: You can use any database service that you are familiar with.

Step 1: Set up Your System

  1. Install Node.js. Please refer to tutorial 4 for directions on how to install it.
  2. Install MongoDB locally. A quick way to install MongoDB is to use homebrew.
  3. We also need to install libraries we will need (Express, Mongoose, Body-Parser, and JSONWebToken) via the Node Package Manager (NPM). Open your terminal and navigate to the local project directory.
    Enter the following commands:

    npm init -yes
    npm install express mongoose body-parser jsonwebtoken --save
    

Note: Even though we are installing the jsonwebtoken library here, we won’t be using it until the next section.

Step 2: Understanding the Backend.js starter code

We provided some of the basic code needed to set up Express and Mongoose in backend.js. Let’s take a second to understand what we are doing in this provided starter code.

Importing Libraries

On lines 2-4, we have imported the necessary libraries that we will use: express, Mongoose, body-parser, and jsonwebtoken.

Express

Mongoose

Note: We recommend looking at additional resources such as the Mongoose and Express Getting Started tutorials for a deeper understanding of how we are building this backend.

Step 3: Submitting questions to the database

Now that we’ve set up our basic Mongoose and Express backend, we will use this framework to save the questions the users submit.

When a user clicks the submit button in the panel view, we need to send an AJAX request to the backend. Add the following function to viewer.js:

Through this function, a POST request is sent to the given URL with the specified data. Going back to the Mongoose vocabulary we defined earlier: whenever a user submits a question, we want to enter a document into the defined Question collection. Let’s see how the backend takes care of this.

The AJAX request is sent to the provided URL which points to the Express app.post() routing method. In this routing method, we have handler function /question that is called when the POST request is received. Add this method to the backend.js file.

In this method, we use the body of the request, which contains the user’s options to create the myData document, an instance of the Question model. We can easily view and parse the user’s options from the body of the request because of the body-parser package we imported. We then use the save function to save the newly created document to the database as a JSON object.

Step 4: Displaying submitted questions on Live Config Page

Now that we’ve saved the user’s submitted questions, we want the broadcaster to be able to view these questions in the live configuration page. Right now, the live config page displays a button. Once the broadcaster clicks this button, they should be able to see all the submitted questions from different viewers. Add the following function to live_config.js.

Through this function, a GET request is sent to the given URL. We want to retrieve all the documents in the defined Question collection. Once this request is handled successfully, we want to change the UI from displaying a button to displaying the submitted questions. Lines 7-13 handle this.

The AJAX request is sent to the provided URL which points to the Express app.get() routing method. In this routing method, we have handler function /questions that is called when the GET request is received. Add this method to the backend.js file.

In this method, we use the find function to find all documents in the collection, and send them back in the response.

Check: Code until this point is available on Step 2 Branch.

Before we test it, we have to explore a very important topic of how we can keep this communication between the frontend and the backend secure!