Making API Requests to your Application

Step 2: Make the API request to your Backend API in the SaaSBox dashboard:

In your github repository, view the users.pug file by first invoking the web editor with the "." key pressed (this is described in the github frontend setup guide)

Hint: Regular users are by default served the user.pug file under /app/start. Admin users are by default served the admin.pug file. If neither of the files are found, main.pug file is served.

Let us take a look at the user.pug file:

html
  include common/app-head.pug
  +head("Welcome to ExpressJS API Example")  
  body
    .min-h-full
      include common/app-navbar.pug
      +app-navbar()
      div
        header
        main
          //- JWT that identifies this user:
          div(hidden, id="token", data-token=token)
          .max-w-full.mx-auto
            //  Replace with your content 
    include ./common/app-footer.pug
    +footer()
    script(src=asset('javascripts/fetchUserData.js'))
    script.
      // Fetch the current user or create it if it doesn't exist.
      $(document).ready (async function(){
        await createGetUser();
      });

The dashboard frontend file is as simple as above. Some notable details:

• At line 12, there is a token element embedded in a hidden div. This is the JWT token that identifies the current user. This token can be decoded at the server side using the JWT secret we added in the environment variables for this application.

• At line 21, there is a call to createGetUser(). This function sends the JWT to the server and returns the user data. For example you may be saving additional application data related to this user on the server side.

Let us take a look at the fetchUserData.js file that is defined at line 17:

const createGetUser = async function() {
  let jwt = $("#token").attr("data-token");
  let server_url = "https://expressjs-api-backend.onrender.com";
  return new Promise((resolve, reject) => {
    $.ajax({
        url: server_url + "/create-get-user",
        headers: { Authorization: "Bearer " + jwt },
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: JSON.stringify({}),
        type: 'POST',
        success: ((res) => {
            let user_data = res.user_data;
            console.log("User data received:", user_data);
            resolve(user_data);
        }),
        error: ((err) => {
            console.log(err.responseJSON.error);
            reject({ error: err.responseJSON.error });
        })
    });
  });
}

• This function retrieves the JWT token embedded in the hidden div, and makes a POST request to the create-get-user API endpoint defined at the API server, set by the server_url parameter.

• The success case returns the user data along with any application specific data tied to this user.

• Using the data returned by this initial call upon the page load, one can populate the current page with application specific data.

This is a simple method for loading dynamic data on each dashboard page, without using any complex frontend frameworks such as React or others. It works well for applications that use APIs that accomplish valuable work for the user, but need simple frontend logic.