Never miss an article about web development, JavaScript and self-growth.

Take Part

How to deploy a React application to Firebase

I am writing The Road to React with Firebase book which I intend to release end of this year. If you are interested in grabbing a copy of the book, you can receive updates for it. Feel encouraged to leave me any feedback for improving the content. You can even contribute to it by editing this article on GitHub. I want to create a high quality book about Firebase in React similar to The Road to learn React

After we built a full-fledged Firebase 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. Since you have already used Firebase extensively for your application, why not choosing Firebase Hosting for the deployment?

In this section, I want to guide you through deploying your React application to Firebase. It works for create-react-app too. Also it should work for any other library and framework such as Angular or Vue. First, install the Firebase CLI globally to your node modules:

npminstall-gfirebase-tools

Using a global installation of the Firebase CLI, you can deploy any application without worrying about the dependency in your project. For any global installed node package, remember to update it occasionally to a newer version with the identical command:

npminstall-gfirebase-tools

Next associate the Firebase CLI with a Firebase account (Google account):

firebaselogin

There should be a URL in your command line that opens in a browser. If this doesn’t happen, Firebase CLI may open up the URL automatically. Choose your Google account you used earlier to create a Firebase project, and give Google the necessary permissions. You should see a confirmation for a successful setup. Return to the command line to verify a successful login.

Next, move to the project’s folder and execute the following command, which initializes a Firebase project that can be used for the Firebase hosting features:

firebaseinit

Then, choose the Hosting option. If you are interested in using another tool to host your Firebase application, choose another option:

Since Google knows about Firebase projects associated with your account after logged in, you are able to select your Firebase project from a list of projects from the Firebase platform:

First,let's associate this project directory with a Firebase project.You can create multiple project aliases by running firebase use --add,but for now we'lljustsetupadefaultproject.?SelectadefaultFirebaseprojectforthisdirectory:->react-firebase-authentic-d12f8(react-firebase-authentication)iUsingprojectreact-firebase-authentic-d12f8(react-firebase-authentication)

There are a few other configuration steps to define. Instead of using the default public/ folder, we want to use the build/ folder for create-react-app. If you set up the bundling with a tool like Webpack, you can choose the appropriate name for the build folder:

The create-react-app application creates a build/ folder after you perform the npm run build for the first time. There you will find all the merged content from the public/ folder and the src/ folder. Since it is a single page application, we want to redirect the user always to the index.html file. From there React Router takes over for the client-side routing.

Now your Firebase initialization is complete. This step created a few configuration files for Firebase Hosting in your project’s folder. You can read more about them in Firebase’s documentation for configuring redirects, a 404 page, or headers. Finally, deploy your React application with Firebase on the command line:

firebasedeploy

After a successful deployment, you should see a similar output with your project’s identifier:

Visit both pages to observe the results. The former link navigates to your Firebase project’s dashboard. There, you should have a new panel for the Firebase Hosting. The latter link navigates to your deployed React application.

If you only see a blank page for your deployed React application, see if the public key/value pair in the firebase.json is set to build. That’s the case if your build folder has the name build. If it has another name, set the value to this. Second, check if you have ran the build script of your React app with npm run build. After you have done both steps, try another deployment with firebase deploy. That should get your recent React build up and running for Firebase Hosting.