Host your create-react-app on Firebase (2021)

So you’ve finished your web app, and now you want users to be able to visit it. In order to do this, you need a server to host your website. Today, you will learn how to host your own website on Firebase using their Hosting service.

Pre-requisites:

• Node.js is installed
• Firebase account is created
• Project is a create-react-app (Not a Gatsby or Next.js app)

To begin, you need to create a new Firebase project, so navigate to your Firebase console and select Add project and follow the instructions (do not enable Google Analytics if you don’t need to).

After your project is created, go to your project terminal, and type:

npm install -g firebase-tools

This will globally install the firebase tools, which allows you to use and configure your project from the command line.

Next, you need to login to Firebase on the command line, so type:

firebase login

This will open a window and prompt you to authorize Firebase in your project. After logging in, type:

firebase init

which will prompt you through a series of questions.

Type Y and Enter to proceed

Select Hosting

Use an existing project

Select your project you just created, for me, it’s called test-app.

Now, you will be asked the directory for which you want your site to be hosted. By default it’s public/ but we want our create-react-app to be hosted on the build/ directory.

Type build as our public directory

Next, it will ask you if you want to Configure as a single page app. Since a React app is a single page app, we want to select Yes for this option.

Then lastly, it will ask if you want to Set up automatic builds and deploys with GitHub. Select No.

And voila! Your site is now ready to be deployed to Firebase. To deploy, type:

firebase deploy

(If you haven’t built your site yet, build it by typing npm run build which will create the build/ directory that you configured Firebase to deploy from earlier.)