SaaS integration example using ExpressJS API endpoints and Firebase

In this example let us build a micro-SaaS that calls an API we create on a standalone ExpressJS server. The user dashboard web page posts and fetches data from the API with authenticated requests via JWT.

Getting Started

Prerequisites

You need:

• A Github account (sign up) to store code repos.

• A Render account (sign up). Render is a cloud hosting service. It is the easiest way to deploy a standalone API server.

• A Firebase account (sign up). Firebase is by far the easiest way to configure a production ready database, whose entries you can view/edit online.

All of the above services have useful free tiers, and picked as the easiest ways to get started.

Frontend

Fork https://github.com/saasbox-templates/expressjs-api-frontend repository.

Follow our deploy setup guide to set up frontend deploys. Deploy as needed by making changes in the source files through the github web editor.

API Server

Fork https://github.com/saasbox-templates/expressjs-api-backend repository into your github account.

Set up Firebase

1. Create a new project at console.firebase.google.com

2. In the left pane choose "All Products". In the listed options, find "Cloud Firestore" and click on it. In the next page, click on "Create a Database".

3. 

   Select project overview, and gear icon in the top left. Then select "Project Settings"

4. 

   Select "Service Accounts" tab

5. 

   Click on "Generate new private key" and download the key file.

Make sure you see the "Firestore Database" listed on the left pane and click on it to view it. Your database should now be visible, and entries editable through this web interface.

Deploy the API server on Render

1. Create the web service:

   

   Create a render "web service" and connect render to your github account and the repository you just forked. This connection will auto-deploy the repository to render.

2. Set up the web service Settings as follows:

   1. Build command: npm install

   2. Start command: node ./bin/www

   3. Repository field should show the url for the github repository you just forked (copied).

3. Set up Render Environment Variables

   

   Select "Environment" in the left pane and add the two following variables:

   NODE_ENV production

   saasbox_jwt_secret <Your JWT secret in SaaSBox Dashboard>

   The JWT secret value can be obtained from the JWT menu item in the SaaSBox admin dashboard:

   

4. Set up secret files

   Similarly under the secrets section, define a new secret named "firestore-keys.json". Copy & paste the contents of the credentials file downloaded in the Firebase setup steps.

You are done setting up Render. You can now check the "Logs" pane to see that your service is deployed and running correctly:

For troubleshooting get in touch: [e-mail]

Next Steps

At this point you should have:

• the expressjs-api-server deployed.

• The expressjs-api-frontend project also deployed on your SaaSBox application instance.

Browse to our example https://expressjs-api-example.saasbox.net/app/start (login: [e-mail] password: testuser2000) to view the user dashboard area that posts the user JWT and displays the user data received from the API endpoint.