Firebase Hosting

Firebase Hosting is a Google solution for hosting static websites.

This solution for single and multi-tenant strategies only. It does not support subdomains.

This tutorial will use the production environment, but the steps for the staging environment are the same.

Configure the frontend environment

Go to the frontend environment configuration:

• frontend/src/config/production.tsx (For React and Vue)

• frontend/src/environments/environment.production.ts (For Angular)

Replace the backendUrl variable for the corresponding backend server URL.

Don't forget the/api suffix.

// Place the URL here with the /api suffix.
// Ex.:`https://domain.com/api`;
const backendUrl = `https://your_production_backend_url/api`;

Create a Firebase account

Go to https://console.firebase.google.com and create a Firebase account.

Install Firebase Tools

npm install firebase-tools -g

Sign in to Google

firebase login

Init Firebase

Go to the frontend folder, and run:

firebase init

Mark only the Hosting option.

Select Use an existing project.

Select the production project.

When asked:

What do you want to use as your public directory?

• build (for React)

• dist (for Vue)

• dist/frontend (for Angular)

Configure as a single-page app (rewrite all urls to /index.html)?

Answer Y.

Firebase Config Files

The firebase.json file will look like this:

{
  "hosting": {
    "public": "build" OR "dist" OR "dist/frontend",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Change the .firebaserc to manage both staging and production environments.

{
  "projects": {
    "staging": "",
    "production": "name-of-the-production-project"
  }
}

On the frontend/package.json, add those two new scripts:

{
  ...
  "scripts": {
    ...
    "deploy:staging": "npm run build:staging && firebase use staging && firebase deploy",
    "deploy:production": "npm run build:production && firebase use production && firebase deploy",
  },
  ...
}  

• npm run build:<environment> build the environment using the proper config file. That's needed to build the app with the correct backendUrl.

• firebase use <environment> makes sure the files will be deployed to the correct environment.

• firebase deploy deploys the files.

Deploy

npm run deploy:production

You will now receive the frontend URL.

Go to the configuration file and replace those values:

const frontendUrl = {
 host: '<firebase_production_project_id>.web.app',
 protocol: 'https',
};

Redeploy the application.

Custom Domain

To add a custom domain, follow those steps:

https://firebase.google.com/docs/hosting/custom-domain