Deploy an ES6 Express API on Firebase Hosting: Step-by-Step Guide

When it comes to hosting React apps, APIs, and databases, Firebase is an excellent choice often overlooked by developers and tech professionals. Firebase is owned by Google and is part of the Google Cloud Platform, which offers a fast and stable platform that can easily build and scale web and mobile projects of any size. Plus, it’s user-friendly and easy to work with, making it a great alternative to other cloud platforms like AWS. In this article, I’ll show you how to deploy an Express API on Firebase hosting step by step.

This is an ES6 updated version of my mentor Todd Albert’s article: Deploy an Express API on Firebase hosting if you are curious about how to do this in ES5!

The core blueprint is essentially leveraging Firebase’s cloud functions and hosting services. Specifically, we’ll create a single cloud function called “api” to run our Express API. Then, we will set up Firebase hosting to redirect all requests to this function, allowing our Express API to handle any incoming requests. Let’s get started!

Step 1: Create a Firebase project and set up billing

To get started, create a new Firebase project from the Firebase console. Please choose a unique name for your project, and make sure it consists only of lowercase letters, numbers, and dashes.

Once your project is created, click the Spark Plan pill button next to your project name and select Blaze plan. Follow the prompts to set up a billing account and set a budget alert. You will only need to pay if you have a high volume of traffic.

Step 2: Install Firebase CLI tools

You’ll need to install the Firebase CLI tools to use Firebase cloud functions and deploy your API to Firebase hosting. Open your command line and run the following command:

$npm i -g firebase-tools

Once installed, run firebase login to authenticate with your Google account and grant permissions to your command line to control your Firebase projects.

Step 3: Set up Firebase hosting and functions

Create a new folder for your API and initialize Firebase hosting and functions by running the following command in your command line:

$mkdir my-express-api && cd my-express-api 

$firebase init hosting

Choose Use an existing project and select your Firebase project from the list. Then, hit Enter a few times to accept the defaults.

Next, run the following command to initialize Firebase functions:

$firebase init functions

Again, hit Enter a few times to accept the defaults.

Step 4: Install Express and CORS

We have set up a public folder to host files publicly and a functions folder to hold the API code. The functions folder contains the package.json, node_modules, and index.jsfiles, which will be used to create the Express API. To install Express and CORS, navigate to the functions folder and run the following commands and then return to the main project folder:

$cd functions && npm install express cors && cd ..

Step 5: Create your Express app and sample route

Open your project in your favorite IDE (e.g., VS Code) and edit your functions/index.js. Import Express and CORS, create your Express app, use CORS, and create a sample route:

import functions from "firebase-functions";
import express from "express";
import cors from "cors";

const app = express();
app.use(cors());


app.get('/test', (req, res) => { 
  res.send('You did it! 🥳'); 
});

Finally, export your cloud function (which we’ll call “api”) and use firebase-functions to point HTTPS requests to your Express app:

export const api = functions.https.onRequest(app);

Step 7: Enable ECMAScript modules

To use ES6, we need to add "type": "module" in your package.json

Step 6: Redirect all requests to your app function

In firebase.json, update the rewrites section to redirect all requests to your app function: "rewrites": [{"source": "**", "function": "api"}]

Step 7: Test and deploy your API

You can test your API locally by running firebase emulators:start in your terminal.

This will start the Firebase emulator suite and allow you to test your API endpoints. Once you’re ready to deploy your API to Firebase hosting, run the following: firebase deploy

This will upload your API code and configuration to Firebase and deploy your API to your hosting URL.

The result should look something like this. Congratulations! You have deployed your API!