Deploying a React App with Firebase Hosting

Ever felt like deploying lightweight React applications for personal projects was a frustrating task for beginners or even a nuisance for seasoned developers who just want to showcase something simple? Well, worry no more! Firebase Hosting has made hosting applications faster, cheaper, and easier than ever. In this lighthearted guide, I’ll show you how to get a React application live on the internet in less than 10 minutes.

Before diving in, make sure you have a React application to deploy. If you don’t, simply create one. Need guidance on creating a React app? Check out my guide here on creating a default React application. In this tutorial, I’ll be using Vite to build the React app, but feel free to use your preferred tool.

Step 1. Log into the Firebase console and create a new project. You can technically do this from the command line, but trust me, the Google interface makes it faster and easier. Give your project an easy-to-remember name, as we’ll need it later.

Step 2. Open your terminal and install the Firebase tools with this command:

npm install -g firebase-tools

The -g flag ensures it’s installed globally, so you won’t need to reinstall it each time you want to deploy an app to Firebase Hosting.

Step 3. Log in to Firebase from the terminal with the following command:

firebase login

After you choose “Yes,” you’ll be redirected to the Google sign-in page. Sign in with the same Google account you used to create the project in the Firebase console.

Step 4. Build the React app to prepare it for deployment by creating a single file that Firebase can reference. In the working directory for the React app, type:

npm run build

This command creates a folder with the production build of the React app. If you’re using Vite, this folder is called “dist,” but it’s called “build” for other React building tools like Create React App.

Step 5. Initialize Firebase in the React app with this command:

firebase init

Answer a series of questions to let Firebase know your intentions and how to deploy the app. I’ll go into detail about the answers relevant to this guide, but feel free to explore and experiment later. For now, follow these steps:

5.1) You are currently outside of your home directory. Do you wish to proceed?

A: Yes

5.2) Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices

A: Scroll down to “Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys,” press the Space bar to select it, and then press Enter. Don’t worry about the “GitHub deploys” part, it’s beyond the scope of this guide.

5.3) 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’ll just set up a default project. Please select an option:

A: Choose “use an existing project,” then select the project you created earlier from the list.

5.4) What do you want to use as your public directory?

A: If you’re using Vite, enter “dist”. If you’re using Create React App, enter “build.”

5.5) Configure as a single-page app (rewrite all urls to /index.html)?

A: Yes

5.6) Set up automatic builds and deploys with GitHub?

A: No

5.7) File dist/index.html already exists. Overwrite?

A: No (It is very important to answer NO to this question! Answering yes will rewrite and overwrite your build file and you will lose it!)

Now, Firebase is connected to your React app and ready for deployment. You should see .firebaserc and firebase.json files in your project’s root directory.

Step 6. With the hard stuff out of the way, it’s time to deploy your React app to Firebase Hosting. In the terminal, type the following command:

firebase deploy

Once the deployment is complete, Firebase will provide you with a unique hosting URL where your deployed app is located.

Congratulations! You now have a fully functioning React app live on the internet! If you make any changes to the app and want to update it online, just make the changes, save, and enter firebase deploy in the command line while in the project’s directory. This will redeploy the app.

Want to add a custom domain? Head over to the Firebase console in your browser, select the project, and click the “Build” dropdown on the left. Then, choose “Hosting” and click the “Add custom domain” button. Provide your domain, and Firebase will give you an A record with some information to add to your domain registrar. That’s it! Firebase will even provision the SSL certificate for you in due time! You app is online!

Thanks for following this quick guide, and have fun coding!

Original article can be found on medium.com

If you found this helpful or you just want to say hi and connect then come visit me on linkedin