In this article , I’ll take you through all the steps involved in deploying a your React app on firebase. Getting Started Before deploying your app on firebase, you need to have Firebase project and a React project (create-react-app) Build Your App for Production Open your project folder and build your app for production . The JavaScript and CSS files will be inside the directory. cd your-project npm run build / yarn build build/static Install Firebase Tools Once you built your app then you can install firebase tools that will allow you to deploy your React app. You can install the tools by running npm install firebase-tools -g or yarn global add firebase-tools Login to Firebase Make sure you’re in the root directory of your React app and run the following command to login to firebase in your terminal firebase login *If you’re not logged in, you’ll be asked to enter the credentials for your google account. Initialize Firebase Now that you’re logged in, you will need to initialize Firebase in your React app. You can do it by running the following command firebase init You will then be prompted with a series of questions and configuration options. Choose Choose Select the firebase project that you created What do you want to use as your public directory? (public) Configure as a single-page app (rewrite all urls to /index.html)? File build/index.html already exists. Overwrite? Hosting: Configure and deploy Firebase Hosting sites Use an existing project build No No Now it is time to our app deploy Deploy to Firebase Run the following command to deploy your app: firebase deploy *Firebase will then give you a unique URL where your deployed app is located (e.g. ). react-app.web.app That’s all there is to it!

Google

3 Awesome Themes for Visual Studio Code

2021 - HackerNoon Contributor of the Year - WEBSITE

2021 - HackerNoon Contributor of the Year - FIREBASE

Nominated for 2022 - HackerNoon Contributor of the Year - Git

Nominated for 2022 - HackerNoon Contributor of the Year - Github

Nominated for 2022 - HackerNoon Contributor of the Year - Internet

Nominated for 2022 - HackerNoon Contributor of the Year - Solidity

Too Long; Didn't Read

How to Deploy React JS Applications for Free on Firebase

How to Deploy React JS Applications for Free on Firebase

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

3 Awesome Themes for Visual Studio Code

3 Key Questions You Need To Answer Before You Push That Code

4 Essential Steps To Convert a Kubernetes Fullstack App to Heroku

4 Ways to Introduce New Technology to Work

5 Effective Deployment Strategies for Machine Learning Models

5 Ways that Microservices can be Deployed Effectively

3 Awesome Themes for Visual Studio Code

3 Key Questions You Need To Answer Before You Push That Code

4 Essential Steps To Convert a Kubernetes Fullstack App to Heroku

4 Ways to Introduce New Technology to Work

5 Effective Deployment Strategies for Machine Learning Models

5 Ways that Microservices can be Deployed Effectively

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps