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.
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:
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:
If you are coming from a point where you donât have a Firebase project yet, sign up for a Firebase account and create a new project there.
Next associate the Firebase CLI with a Firebase account (Google account):
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 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:
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:
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:
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 . And third, if there is still a problem, check out the official troubleshoot area for deploying create-react-app applications to Firebase . Afterward, try another deployment with firebase deploy . That should get your recent React build up and running for Firebase Hosting.