How to deploy and host a single-page web app (REACT) with Firebase.

For FREE!

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.
Click

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

Click NEXT.
Jum to the Navbar on the left and click HOSTING.
GET STARTED.
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

Resources:

SOFTWARE ENGINEER — WEB DEVELOPER WITH HEART FOR FRONT-END, MINIMALISM AND RASMENTALISM.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store