Build and deploy react app on Firebase in 2021
In today’s article, we will learn how to deploy a basic react app on Firebase. If you have not read my previous article (link), feel free to do so as I have shown how you can host your very own react app on Netlify.
What is Firebase?
Developed and maintained by Google, Firebase is a platform created for developers to create mobile and web applications. Similar to Netlify, this is a place where user can harness the latest serverless technology to develop and deploy your own application. For more details you can check out their website.
Build and deploy in 7 easy steps
That’s right! With just a few easy steps you can deploy your own app on Firebase.
Step 1: NPM install and create react-app
For today’s example we are using react as our framework, I would assume your have installed npm and react library. Feel free to check out my last article for more information if you are stuck.
Here’s a quick recap if you have forgotten how to create react app.
npx create-react-app my-pwa-app --template cra-template-pwaLet’s make some simple changes to the source file.
Run to test the app is working as expected.
Step 2: Install Firebase CLI
Once you have created your own react project, proceed to install Firebase CLI with the following command:
npm install -g firebase-toolsStep 3: Login to firebase
Now that we have a working app, it is time to upload and host it on Firebase. Before that, make sure you have created an account on Firebase.
firebase loginThis is to login and grant authority access to your Firebase account so that you can access your account information from firebase CLI. Once you have fired the command it will open up a new window and prompt to select for your email address, select the one that you used to create a firebase account if you have multiple Gmail accounts.
Create a project once you have created your free-tier account, once you have created your project you will be directed to your project homepage:
Step 4: Initialize Firebase
Navigate to Hosting: Configure and deploy Firebase Hosting sites, select by using space key.
Since we have created a project beforehand we can select it from the CLI, you may also create a new project from here. I find it easier to create from the console as compared to CLI create project, but this is just a personal preference, again, feel free to pick any methods to create your project.
Next up, hosting setup
Fill in the following as shown in the image above,
What do you want to use as your public directory? build
Configure as a single-page-app (rewrite all ruls to /index.html)? Yes
Set up automatic builds and deploys with Github? (y/N) N
Let’s break down all the question so we can understand what we are doing. As we are using react, your public directory should be pointed to build/ once we trigger npm run build command. Second question is pretty self-explanatory as react app is a single page app and we always want it to be direct to index.html. As for the last question, if you have already set up a Github repository then feel free to set up automatic deploy hooks, but for now we will set it to N.
Once initialization step is complete, firebase will generate two files into your project folder
Where .firebasesrc contains basic information on your project, and firebase.json contains configuration options that we have answered previously. firebase.json is similar to netlify.toml on Netlify. For now it only contains basic redirect rules and ignore rules, we will further discuss this topic next time.
Step 5: Create build
Next, we will then execute the following command:
npm run build
Step 6: Deploy!
When your build is ready, execute the final command.
Your react application will be hosted at https://<your project id>.web.app
Step 7: Enjoy!
Surely enough, the site is currently up and running on Firebase now!
Closing thoughts
Now that we have looked into how to build and deploy our very own react app on both Netlify and Firebase. For me personally, Netlify wins in its simplicity as you can perform everything from the Netlify console page, create a repository and link up to Netlifyto run a build and you are done! But overall they are pretty similar in nature, and with that it is easier then ever to run your prototype online or even a small scale production build.
But both of the platform is not just a platform to host your site, it is far from that. They all provide authentication, large media support , cloud functions, and NoSql database. You can even mix and match their service to your likings, for example in one of my previous project, I used Netlify as my hosting platform and cloud function usage and combined with firebase authentication along with firestore database. It is just that flexible, as long as you have done your research.
There is still a lot of great platform service out there, such as Heroku, vercel, moovweb etc… Be sure to make proper research before you decide on the one.