Frontend Deployment using Firebase Hosting

About Firebase Hosting

Firebase Hosting is an easy to set up, production-grade hosting service included in the Firebase suite of tools. It is best suited for hosting client-side apps. Blueprint projects hosted on Firebase include:

  • SVP (arbitrium)
  • The Pregnancy Centre
  • Kidsability
  • UW Blueprint website

The free-tier is usually sufficient for our uses and provides the following features:

  • 10 GB of asset storage
  • 360 MB/day of data transfers (download & upload)
  • SSL and ability to use a custom domain
  • Multiple sites per project (allows different environments for staging, prod, etc.)
  • Production emulators
  • Deployment previews (with GitHub Actions integration). Unlike alternatives offered by Netlify and Vercel, there does not appear to be a monthly build-minute quota!

For more information on Firebase Hosting, please see https://firebase.google.com/docs/hosting.

Setting up

  1. Install the Firebase CLI 
    $ npm install -g firebase-tools
# or
$ yarn global add firebase-tools
  2. Login via the Firebase CLI, use an email associated with your Firebase project 
    firebase login

  3. In frontend/.firebaserc, change uw-blueprint-starter-code to your project’s Firebase ID

  4. cd into the frontend folder, then initialize the Firebase project for hosting 
    $ cd frontend
$ firebase init hosting
  • If you see "You are initializing within an existing Firebase project directory", this is expected. Press “Y” to continue.
  • When prompted "What do you want to use as your public directory?", enter build.
  • When prompted "Configure as a single-page app (rewrite all urls to /index.html)?", press “Y”.
  • When prompted "Set up automatic builds and deploys with GitHub?", press “Y” and follow the steps in the CLI.

If the set up process alters any of the files in .github/workflows, please revert by copying in the files from the starter-code-v2 repo: https://github.com/uwblueprint/starter-code-v2/tree/main/.github/workflows. One of the GitHub Actions is used to automatically create deployment previews on every creation of a frontend PR, the other Action is used to deploy to the live channel when merging frontend changes to the main branch.

Lastly, in the Settings > Secrets page of your GitHub repo, add these repository secrets. You must be a repository admin to access this page.

REACT_APP_BACKEND_URL_PREVIEW=<url-of-backend-used-by-preview-deploys>
REACT_APP_BACKEND_URL_PROD=<url-of-backend-used-by-prod-deploys>

You will likely need to have multiple backend deployments to satisfy cookie settings. For authentication, the starter-code-v2 backend sets refresh token cookies with SameSite="strict", which requires clients to request from the same site (i.e. the backend and frontend must share the same top-level and second-level domains). For this to work, you’ll likely want to purchase a custom domain (or use one provided by your NPO partner) and use it for both your frontend and backend. However, you won’t have control over the preview URL generated by Firebase (only hosted at web.app and firebaseapp.com), so a separate backend deployment that does not use SameSite="strict" cookies is required. A suggestion is to feature flag SameSite="strict" using an environment variable. If you don’t currently want to create a backend deployment, you can use a tool like ngrok to expose your local backend for testing. Note that in this case you’ll need to disable SameSite="strict" cookies as well.

Manual Deploy

  1. Ensure that .env values required by the frontend are in a .env file in the frontend folder (e.g. REACT_APP_BACKEND_URL).

  2. In the frontend directory, build the React app 
    $ cd frontend
$ yarn install
$ yarn build
  3. Deploy 
    firebase deploy --only hosting