How to Deploy a React App with Firebase Hosting
Deploy your app in 5 minutes or less — a step by step tutorial.
In this tutorial, I will be demonstrating how you can deploy your React app using Firebase Hosting. I will assume that you already have a Firebase project set up. If you do not, you can create one using the Firebase Console.
You will also need to ensure have a React app created. For this, I will use Create React App. You can create a new React app by running the following:
npx create-react-app firebase-hosting-demo
Install Firebase Tools
Next, you will need to install the firebase tools that will allow you to deploy your app. You can install the tools by running the following:
npm install firebase-tools -g
Login to Firebase
You will now need to login to Firebase in your terminal. You will be prompted to enter your email and password if you’re not already logged in. Also, make sure that you are inside of the root directory of your React app. For me, it’s
~/firebase-hosting-demo. Run the following:
Initialize Firebase in Your React App
Now that you’re logged in, you will need to initialize Firebase in your React app. Run the following:
You will then be prompted with a series of questions and configuration options that I will walk through with you.
Select Hosting: Configure and deploy Firebase Hosting sites.
Select Use an existing project
Select your Firebase Project (e.g. jake-firebase-hosting-demo)
You will now need to specify the folder where Firebase will look for assets to deploy. By default, Create React App will generate a
build folder that will contain the production assets. Unless you changed the default configuration, you’ll want to enter
build for this option.
You will also be asked whether or not Firebase should configure as a single-page app. You’ll want to enter
y (Yes) for this option.
The last option is whether or not Firebase should overwrite your existing
build/index.html. If you haven’t created a build for your app yet, then you won’t see this option. You’ll want to enter
N (No) for this option, though.
Auto-Generated Configuration Files
After you have completed the initialization, you should see 2 new files
firebase.json. These files are automatically generated and you will want to save these files, and commit them in your git repo, as they house your firebase hosting config. You can ignore the
.firebase directory for now.
.firebaserc should look similar to the following:
firebase.json file should look exactly like the following:
Deploying Your App
Now that everything is set up, you can go ahead and deploy your app! All you need to do now is run:
Firebase will then give you a unique URL where your deployed app is located. For example, it might look similar to:
That’s all there is to it! You might have noticed that your app is hosted securely over https. That is another one of the huge benefits of firebase hosting, besides the super quick and easy deployments. If you have any questions please leave a response or message me. Thanks for reading!