Deploying React App on Firebase

Recently I took a course to enhance my React skills. React for beginners by Wes Bos is an excellent course which I highly recommend to everyone. In the course, Wes shows how to deploy the app on, GitHub pages and Apache server. But since Wes in the course uses Firebase for the database, so I think it would have been great if he used Firebase for deployment as well. Anyways, deploying an app on Firebase is very easy. In this tutorial, I will show you how to deploy your react app on Firebase.

Install the Firebase CLI

The very first thing we need to do is to install Firebase CLI (Command Line Interface) globally so that we can access firebase from any directory. Make sure you have node.js and npm installed. Open terminal or command prompt and run the following command.

npm install -g firebase-tools

Initialize your app

Make sure you are in the root folder of your project. Now run the below command:

firebase init

Running the above command will walk you through the setup process. First of all, it will ask you to select Firebase CLI features.

Firebase Init

There are two of them:
1. Database: Deploy Firebase real-time database rules.
2. Hosting: Configure and deploy Firebase Hosting sites.

You can deselect an option by pressing Space key on your keyboard or press Enter to use both features. I need both, so I am going to press Enter.

Next, Firebase will ask you to select a project from among the one’s you have already created or just create a new one. I already have my project on Firebase, so I will just select that one.

Firebase project setup

Then, Firebase will ask you to name the database rules file. Just press Enter and Firebase will create a “database.rules.json” file in the project root directory. If you have already specified database rules in Firebase, then those will be copied to “database.rules.json” file.

Firebase database rules file

Lastly, Firebase will ask to specify a folder which will contain all the files to be deployed to Firebase Hosting. By default directory name will be “public” but you can type in a different name. In my case, React for Beginners, Wes provides a simple command¬†npm run build to create a compressed version of the app into the build folder. So, I will go ahead and type in “build” for the Firebase public folder. Press Enter and Firebase setup should complete successfully.

Firebase public directory and initialization complete

You should now see three files in your project root created by Firebase. The files are as follows:

  1. .firebaserc” – Consists of the project information that you selected.
  2. database.rules.json” – Consists of the database rules for Firebase.
  3. firebase.json” – The min configuration file.

Firebase also creates a public folder if it doesn’t already exist.

Firebase created files

Deploy app on Firebase

To deploy your app, type the below command in terminal and press Enter.

firebase deploy

If everything goes well, you should see “deploy complete, ” and you should get hosting URL (live app URL). Firebase also provides an option to use custom URL which I won’t be covering in this tutorial, though.

Firebase Deploy

In the end, I will just say that Firebase makes it super easy to manage an app. On top of that Firebase includes a free plan which is very helpful. There is also a feature to rollback an app to any of the previous deploys which I feel is excellent.

About the author

Leave a Reply

May be Subscribe?