Deploy a React Application With Firebase Hosting

Key points

#N1
Development team

Deploy a React Application With Firebase Hosting

How to Deploy a React Application With Firebase Hosting

Deployment is now easy because of Firebase Hosting.

Many platforms offer free hosting services for React and other JavaScript frameworks. These frameworks can be used for building single-page applications, which is handy when you need to launch a minimum viable product or a quick proof of concept.

Firebase is a development platform developed by Google that provides file storage, hosting, database, authentication, and analytics. Firebase is free, provides an SSL certificate by default, and offers impressive speed across multiple regions. Your fellow developers are taking advantage of these tools, and you can too.

I am going to discuss how we can deploy react applications within a few minutes by using some simple steps. So for that, we need two technologies: first is React to create one sample app and second is Firebase technology for the deployment purpose.

Before starting the deployment process first let’s talk about Firebase Hosting in short.

What is Firebase Hosting?

Production-grade web content hosting for developers is provided by Firebase Hosting. Firebase Hosting is a fast, secure, and reliable way to host your apps. By using one command, you can quickly deploy web apps and serve both static and dynamic content to a global CDN (content delivery network).

we're going to cover the following points:

  • Create a simple React application with create-react-app
  • Log into the Firebase Console and create a new project
  • Deploy React app by using Firebase Hosting

1. Create a simple React Application:

For this blog, we are creating a basic react application by using the create-react-app command. create-react-app is a tool that provides you a boilerplate for react applications so we can easily headstart the react apps. It saves you from time-consuming setup and configuration.

To use this command first you need to install it by using the following command:

npm install -g create-react-app

The -g flag in the command above installs the NPM package globally on the machine. Once this installation is done then we can create a basic react application. Just enter the following command

create-react-app my-app

So once you run the above command it will create the mydemo directory in your local machine. If you check inside the mydemo directory, you can see all the files that you required for your project (i.e. boilerplate). Now just enter the following command and on localhost:3000 you will get your simple react application.

cd my-app
npm start

I hope that it was easy and fast to create a react application. Now we will move to the next step that is Firebase setup.

2. Log in to the Firebase Console and create a new project:

Now we are going to set up the Firebase. First, login into the Firebase Console by using this link https://firebase.google.com/.You can log in by using your Google account and click on create a new project button mentioned in the name of your project and follow some steps and your project is ready.

In the Firebase console I have created my-app project

Once the project is created, you have the ability to add Firebase to any Android or iOS mobile app and even a web app.

3. Deploy React app by using Firebase Hosting:

Step1: Install Firebase tools:

First, we 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 -g firebase-tools

Step 2: Login to Firebase in your terminal

The second step is we will now need to login to Firebase in your terminal. You will be prompted to enter your login details (email and password) if you're not already logged in. Also, please make sure that you are inside of the React application that we have created before.

For eg your terminal will look like ~/my-app.

Run the following command

firebase login

when you enter yes it will redirect you to the Google sign-in page. There select the account that you have used to create the project on a Firebase in the second part.

Before initializing the Firebase first create the build for your react application. So in React by using the following command you can easily generate the build for your app.

npm run build

Step 3: Initialize Firebase in Your React App

In the third step we are initializing the Firebase account with our react app by using the following command:

firebase init

When you run this command you need to answer some of the questions that I have shown you in the below image

  Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys 
  What do you want to use as your public directory? (public) build 
  Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y
  Set up automatic builds and deploys with GitHub? (y/N) N
  File build /index.html already exists. Overwrite? (y/N) N

For the first question select option Hosting: Configure and deploy Firebase Hosting sites.

In the second question that is Project setup, Select Use an existing project, and in that select Firebase project name that you have created in part 2, my project name is ReactDemo so I have select that.

And the last part is the Hosting setup part here you will need to specify the folder where Firebase will look for assets to deploy. By default, the build folder will contain the production assets. So Enter build as an answer to this option.

For Configure as a single-page app question enter y for this option.

The last question is whether or not to overwrite your existing build/index.htmlfile. So You'll want to enter N (No) for this option because we want actual index.html file that Reacts is generated while creating the build.

Once the initialization part is done you can check the directory, you should see two new files .firebaserc, firebase.json. These files are automatically generated.

Step 4: Deploy React app

The fourth step is to deploy your app.

Now that everything is set up, you can go ahead and deploy your app! The only thing you need to do is run the following command:

firebase deploy 

Once you run this command, Firebase will then give you a unique hosting URL where your deployed app is located. For example https://my-app-f8d87.web.app

You can also see the list of deployment records inside the Hosting tab in the Firebase project on the Firebase console. We have successfully deployed our React application with the help of Firebase Hosting.

#C1
Development team

Deploy a React Application With Firebase Hosting

How to Deploy a React Application With Firebase Hosting

Deployment is now easy because of Firebase Hosting.

Many platforms offer free hosting services for React and other JavaScript frameworks. These frameworks can be used for building single-page applications, which is handy when you need to launch a minimum viable product or a quick proof of concept.

Firebase is a development platform developed by Google that provides file storage, hosting, database, authentication, and analytics. Firebase is free, provides an SSL certificate by default, and offers impressive speed across multiple regions. Your fellow developers are taking advantage of these tools, and you can too.

I am going to discuss how we can deploy react applications within a few minutes by using some simple steps. So for that, we need two technologies: first is React to create one sample app and second is Firebase technology for the deployment purpose.

Before starting the deployment process first let’s talk about Firebase Hosting in short.

What is Firebase Hosting?

Production-grade web content hosting for developers is provided by Firebase Hosting. Firebase Hosting is a fast, secure, and reliable way to host your apps. By using one command, you can quickly deploy web apps and serve both static and dynamic content to a global CDN (content delivery network).

we're going to cover the following points:

  • Create a simple React application with create-react-app
  • Log into the Firebase Console and create a new project
  • Deploy React app by using Firebase Hosting

1. Create a simple React Application:

For this blog, we are creating a basic react application by using the create-react-app command. create-react-app is a tool that provides you a boilerplate for react applications so we can easily headstart the react apps. It saves you from time-consuming setup and configuration.

To use this command first you need to install it by using the following command:

npm install -g create-react-app

The -g flag in the command above installs the NPM package globally on the machine. Once this installation is done then we can create a basic react application. Just enter the following command

create-react-app my-app

So once you run the above command it will create the mydemo directory in your local machine. If you check inside the mydemo directory, you can see all the files that you required for your project (i.e. boilerplate). Now just enter the following command and on localhost:3000 you will get your simple react application.

cd my-app
npm start

I hope that it was easy and fast to create a react application. Now we will move to the next step that is Firebase setup.

2. Log in to the Firebase Console and create a new project:

Now we are going to set up the Firebase. First, login into the Firebase Console by using this link https://firebase.google.com/.You can log in by using your Google account and click on create a new project button mentioned in the name of your project and follow some steps and your project is ready.

In the Firebase console I have created my-app project

Once the project is created, you have the ability to add Firebase to any Android or iOS mobile app and even a web app.

3. Deploy React app by using Firebase Hosting:

Step1: Install Firebase tools:

First, we 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 -g firebase-tools

Step 2: Login to Firebase in your terminal

The second step is we will now need to login to Firebase in your terminal. You will be prompted to enter your login details (email and password) if you're not already logged in. Also, please make sure that you are inside of the React application that we have created before.

For eg your terminal will look like ~/my-app.

Run the following command

firebase login

when you enter yes it will redirect you to the Google sign-in page. There select the account that you have used to create the project on a Firebase in the second part.

Before initializing the Firebase first create the build for your react application. So in React by using the following command you can easily generate the build for your app.

npm run build

Step 3: Initialize Firebase in Your React App

In the third step we are initializing the Firebase account with our react app by using the following command:

firebase init

When you run this command you need to answer some of the questions that I have shown you in the below image

  Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys 
  What do you want to use as your public directory? (public) build 
  Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y
  Set up automatic builds and deploys with GitHub? (y/N) N
  File build /index.html already exists. Overwrite? (y/N) N

For the first question select option Hosting: Configure and deploy Firebase Hosting sites.

In the second question that is Project setup, Select Use an existing project, and in that select Firebase project name that you have created in part 2, my project name is ReactDemo so I have select that.

And the last part is the Hosting setup part here you will need to specify the folder where Firebase will look for assets to deploy. By default, the build folder will contain the production assets. So Enter build as an answer to this option.

For Configure as a single-page app question enter y for this option.

The last question is whether or not to overwrite your existing build/index.htmlfile. So You'll want to enter N (No) for this option because we want actual index.html file that Reacts is generated while creating the build.

Once the initialization part is done you can check the directory, you should see two new files .firebaserc, firebase.json. These files are automatically generated.

Step 4: Deploy React app

The fourth step is to deploy your app.

Now that everything is set up, you can go ahead and deploy your app! The only thing you need to do is run the following command:

firebase deploy 

Once you run this command, Firebase will then give you a unique hosting URL where your deployed app is located. For example https://my-app-f8d87.web.app

You can also see the list of deployment records inside the Hosting tab in the Firebase project on the Firebase console. We have successfully deployed our React application with the help of Firebase Hosting.

README.md

A utility-first CSS framework for rapidly building custom user interfaces.

build
passing
downloads
8.7M

Documentation


For full documentation, visit tailwindcss.com

Community


For help, discussion about best practices, or any other conversation that would benefit from being searchable:
Discuss Tailwind CSS on GitHub
For casual chit-chat with others using the framework:
Join the Tailwind CSS Discord Server

Contributing


If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.

© 2020 GitHub, Inc.,