2.3.4: Firebase Hosting

Learning Objectives

1. Firebase Hosting allows us to deploy web applications easily and efficiently with configuration to support React Router's BrowserRouter

2. How to deploy our apps to Firebase Hosting

Introduction

Firebase Hosting is a simple web-hosting tool that supports custom configuration. Source: Firebase

Firebase Hosting is a simple and robust web-hosting tool that allows us to deploy our static apps (like React apps) with custom configuration to support features such as React Router's BrowserRouter. It otherwise performs generally the same functionality as GitHub Pages that we used previously.

Read more on what Firebase Hosting can do for us here.

Get started

1. We may want to read this in tandem with Create React App's deploy instructions for Firebase.

   1. We can skip the warning about service-worker.js because we do not use that file in our repos at Rocket. Rocket deleted this file from Create React App starter code because service workers are for progressive web apps ("PWAs", web apps that run like native mobile apps on mobile devices) and we are not building PWAs.

Configure hosting behaviour: Set up rewrites to show the same content for multiple URLs

We will need this step to deploy our React apps with React Router BrowserRouter functionality.

1. Create React App's deploy instructions for Firebase should take care of this for us automatically if we reply "Yes" to the option to "Configure as a single-page app (rewrite all urls to /index.html)?".

Basic Security Rules

Basic Security Rules  |  Firebase Security RulesFirebase

If you are unable to access the Firebase Realtime Database or Firebase Storage following deployment online, please checkout the document above. You may need to update your security rules for each Firebase application that is associated to the application. You can find this in the Rules section of each app.

Sample Deployment Legacy (CRA)

Firebase Hosting