Edvins Antonovs

How to deploy Create-React-App to Firebase Hosting

In this step-by-step tutorial, you will learn how to deploy React application to the Firebase Hosting.

Firebase Hosting provides fast and secure hosting for your web app, static and dynamic content, and microservices.

Initial setup

We are going to need an application which we are going to deploy. For the demonstration purposes, I'm going to scaffold a new create-react-app application and name it as deploy-cra-to-firebase.

1$ npx create-react-app deploy-cra-to-firebase
2
3$ cd deploy-cra-to-firebase

Install Firebase CLI

Next step is to install the Firebase CLI (actually its called firebase-tools, but I still reference it as firebase-cli for some reason) which provides a variety of tools for managing, viewing, and deploying to Firebase projects.

1$ npm install -g firebase-tools

Firebase login

In order to use a Firebase Hosting, you need to have an account for it. So you will need either create a new one or use the existing one. When it's sorted, just run next command and proceed with the sign-in flow until its complete.

1$ firebase login

Firebase project and hosting setup

Now it's the time to initialise Firebase. You will be asked a variety of questions related to the project and hosting setup. Don't worry if you made a mistake while completing this step. You can amend those settings except unique project id.

I've used deploy-my-cra-to-firebase for both Project ID and Project Name.

1$ firebase init

Keep in mind for these important questions in Firebase Hosting section:

What do you want to use as your public directory? build
Configure as a single-page app (rewrite all urls to /index.html) Yes

1$ firebase init
2
3     ######## #### ########  ######## ########     ###     ######  ########
4     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
5     ######    ##  ########  ######   ########  #########  ######  ######
6     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
7     ##       #### ##     ## ######## ########  ##     ##  ######  ########
8
9You're about to initialize a Firebase project in this directory:
10
11  /Users/edvinsantonovs/Documents/repos/deploy-cra-to-firebase
12
13? Which Firebase CLI features do you want to set up for this folder? Press
14Space to select features, then Enter to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites
15
16=== Project Setup
17
18First, let's associate this project directory with a Firebase project.
19You can create multiple project aliases by running firebase use --add,
20but for now we'll just set up a default project.
21
22? Please select an option: Create a new project
23i  If you want to create a project in a Google Cloud organization or folder, please use "firebase projects:create" instead, and return to this command when you've created the project.
24? Please specify a unique project id (warning: cannot be modified afterward
25) [6-30 characters]:
26 deploy-my-cra-to-firebase
27? What would you like to call your project? (defaults to your project ID)
28✔ Creating Google Cloud Platform project
29✔ Adding Firebase resources to Google Cloud Platform project
30
31🎉🎉🎉 Your Firebase project is ready! 🎉🎉🎉
32
33Project information:
34   - Project ID: deploy-my-cra-to-firebase
35   - Project Name: deploy-my-cra-to-firebase
36
37Firebase console is available at
38https://console.firebase.google.com/project/deploy-my-cra-to-firebase/overview
39i  Using project deploy-my-cra-to-firebase (deploy-my-cra-to-firebase)
40
41=== Hosting Setup
42
43Your public directory is the folder (relative to your project directory) that
44will contain Hosting assets to be uploaded with firebase deploy. If you
45have a build process for your assets, use your build's output directory.
46
47? What do you want to use as your public directory? build
48? Configure as a single-page app (rewrite all urls to /index.html)? Yes
49? File build/index.html already exists. Overwrite? Yes
50✔  Wrote build/index.html
51
52i  Writing configuration info to firebase.json...
53i  Writing project information to .firebaserc...
54
55✔  Firebase initialization complete!

When setup is complete, you should see auto-generated firebase.json and .firebaserc files which look like this.

firebase.json

1{
2  "hosting": {
3    "public": "build",
4    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
5    "rewrites": [
6      {
7        "source": "**",
8        "destination": "/index.html"
9      }
10    ]
11  }
12}

.firebaserc

1{
2  "projects": {
3    "default": "deploy-my-cra-to-firebase"
4  }
5}

Build

Now it's the time to build our React app and make it ready to be deployed. In order to do so, make sure you are located in the correct folder - deploy-cra-to-firebase. Then all you need to do is to run the next command.

$ yarn build

You should see the build process in the console. When it's done, we can proceed to our final step.

1yarn run v1.22.4
2$ react-scripts build
3Creating an optimized production build...
4Compiled successfully.
5
6File sizes after gzip:
7
8  39.4 KB  build/static/js/2.107361f6.chunk.js
9  784 B    build/static/js/runtime-main.722af0ec.js
10  655 B    build/static/js/main.c1df01c6.chunk.js
11  547 B    build/static/css/main.5f361e03.chunk.css
12
13The project was built assuming it is hosted at /.
14You can control this with the homepage field in your package.json.
15
16The build folder is ready to be deployed.
17You may serve it with a static server:
18
19  yarn global add serve
20  serve -s build
21
22Find out more about deployment here:
23
24  bit.ly/CRA-deploy
25
26✨  Done in 11.83s.

Firebase deploy

This is the final step we need to do, but before doing it, make sure you have /build folder is created by yarn build. Then run the next command.

$ firebase deploy

Once again, you can see the deployment process in the console.

1=== Deploying to 'deploy-my-cra-to-firebase'...
2
3i  deploying hosting
4i  hosting[deploy-my-cra-to-firebase]: beginning deploy...
5i  hosting[deploy-my-cra-to-firebase]: found 19 files in build
6✔  hosting[deploy-my-cra-to-firebase]: file upload complete
7i  hosting[deploy-my-cra-to-firebase]: finalizing version...
8✔  hosting[deploy-my-cra-to-firebase]: version finalized
9i  hosting[deploy-my-cra-to-firebase]: releasing new version...
10✔  hosting[deploy-my-cra-to-firebase]: release complete
11
12✔  Deploy complete!
13
14...

When it's done, you will be able to access your fresh deployment React application:

https://deploy-my-cra-to-firebase.firebaseapp.com/

✨ Congrats, you've made it!