How to deploy and host a single-page web app (REACT) with Firebase.
Host your React single-page app for free using Firebase. The only thing you have to remember is to exceed those Hosting Parameters (the free one). An excellent option for demos and beginners. “ Start for free, then pay as you go”. When your website becomes popular and you need more resources, you can just simply switch to any paid plan.
All you need to do is simply following the steps:
Create a new project in the Firebase Console -> Add project. Give your project a name. + Continue.
You can set Google Analytics for your Firebase project (it’s free!). + Continue.
Add app nickname, also SET UP FIREBASE HOSTING FOR THIS APP!
Click REGISTER APP.
If you are using NODE modules you don’t need to worry about firebase SDK. Click NEXT.
↓ Follow the instructions to install Firebase CLI
- npm install -g firebase-tools
Jum to the Navbar on the left and click HOSTING.
Just NEXT on “ Install Firebase CLI” (we already did that),
Just NEXT on “ Initialize your project” (we gonna do that later),
Just NEXT on “ Deploy to Firebase Hosting” (we gonna do that later).
Now it’s time to build your REACT application.
After we built a full-fledged application in React, the final step is deployment, the tipping point of getting your ideas out into the world, from consuming tutorials to producing applications. We will use Firebase Hosting for the deployment.
↓ To deploy now, open a terminal window then navigate to or create a root directory for your web app. Sign in to Google:
- firebase login
↓ Initiate your project. Run this command from your root directory:
- firebase init
Choose the option: ‘’HOSTING: configure and deploy Firebase Hosting sites’’. +ENTER.
Use an existing project. +ENTER.
Make sure you find the right project. +ENTER.
Type build !!!! <- SUPER IMPORTANT!
Config as a single-page app -> Y.
↓ For now, our build folder is empty (or one file), so at this point you want to run:
- npm run build
It’s building a production build of your react bundle. The react app is stripping out the developer stuff like hot reloading, all the expensive sort of stuff that takes up a lot of space, and stuff that we don’t need in the actual production build. When it goes online we just need to be as lightweight as possible.
We set up a firebase to deploy from the build folder.
When you are ready to deploy your web app, put your static files (e.g., HTML, CSS, JS) in your app’s deploy directory
↓ Then, run this command from your app’s root directory:
- firebase deploy
Learn to become a highly skilled & valuable developer