Deploy React.js app on Firebase

QUICK GUIDE: React.js + Firebase 🔥

Acquired by Google in 2014, Firebase is helping developers to build high-quality apps more easily. In this article, you will learn how to quickly deploy a React.js application on Firebase in 8 steps.

Let’s start!

Prerequisites

You need to have create-react-app and firebase-tools installed globally.

npm install -g create-react-app

&&

npm install -g firebase-tools

Step-1

First, you need to create your React.js app call firebase-deploy using the create-react-app tool

create-react-app firebase-deploy

Step-2

Once the installation is done, you need to get your app ready to deploy. To do so, Open your project folder and build your app for production.

cd firebase-deploy

yarn build

Step-3

After, you need to install the Firebase command line tool. Because it’s a good practice to frequently update the CLI to the latest version, I suggest you run this command even if you have already installed the CLI.

yarn global add firebase-tools

Step-4

It’s now the time to connect your local computer to your Firebase account. You can login to Firebase using the following command. You will be redirected to a Google authentification web page.

firebase login

Step-5

Next, it’s time to initialize your website using the command line. Run the following command:

firebase init

  1. Choose Hosting: Configure and deploy Firebase Hosting sites
  2. Choose [create a new project]
  3. Answer the following questions like below:

What do you want to use as your public directory? (public) build

Configure as a single-page app (rewrite all urls to /index.html)? Yes

File build/index.html already exists. Overwrite? No

Step-6

Now, you will need to create a new project. To do so, go inside your Firebase console (https://console.firebase.google.com/), click on the add project button, give it a name and create your new project.

Step-7

After your app is initialized, add your newly created project using the following command and create an alias for the project (here I choose firebase-react-deploy).

firebase use --add

Step-8

The last step is to actually deploy the app and let the magic happen!

firebase deploy

Your web application is now running on the server 🚀. You can visit your website using the provided Hosting URL.

You made it 🙌

Congratulation, you are now able to deploy your next awesome apps using Firebase 🔥!

Thanks for reading and if you liked this article and want more reading on React and Machine Learning, follow me on Medium!

Full Stack developer | Toptal | External Contractor at RBI | https://julien-rioux.web.app/

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