Firebase Hosting of React Project

Introduction of Firebase Hosting

Firebase Hosting provides fast and secure hosting for your web app, static and dynamic content, and microservices. Firebase Hosting is production-grade web content hosting for mobile app developers. With a single command, you can rapidly deploy web apps and serve both static and dynamic content to a global CDN (content delivery network).

Firebase Hosting is built for the modern web developer. Websites and apps are more powerful than ever with the rise of front-end JavaScript frameworks like Angular and static generator tools like Jekyll. Whether you are deploying a simple app landing page or a complex Progressive Web App (PWA), Hosting gives you the infrastructure, features, and tooling tailored to deploying and managing websites and apps.

Using the Firebase CLI, you deploy files from local directories on your computer to your Hosting server. Beyond serving static content, you can use Cloud Functions for Firebase or Cloud Run to serve dynamic content and host microservices on your sites. All content is served over an SSL connection from the closest edge server on our global CDN.

Firebase Hosting has lightweight hosting configuration options for you to build sophisticated PWAs. You can easily rewrite URLs for client-side routing, set up custom headers, and even serve localized content.

What is Firebase Hosting?

Firebase Hosting is a fully-managed hosting service for static and dynamic content as well as microservices. The service is backed by SSD storage and a global CDN (content delivery network). Zero-configuration SSL is built into Firebase Hosting, so content is always delivered securely.

Get started with Firebase Hosting

Firebase Hosting gives you a fast, secure, and reliable way to host your app’s static assets (HTML, CSS, JavaScript, media files, etc.) as well as to serve dynamic content and host microservices.

It’s production-grade hosting is backed by a global content delivery network (CDN). Hosting serves your content over SSL, by default, and can be used with your own custom domain or on your project’s free subdomains on web.app and firebaseapp.com.

Before you begin

Create react project: 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

Step 1: Creating firebase project

Go to firebase console and sign in with your Google account

Creating firebase project

then create new project, enter your project name.

Create New Project

Step 2: Firebase Login

Now come back to the command line and go to your project folder

cd firebase-demo

First, we have to login into firebase from the command line. Type in the following command.

It will take you to the sign-in page in the browser, once you’ve successfully logged in it will show you something like this.
(See in detail url)

Step 3: Initializing project

To initialize firebase project, you have to enter the command

firebase init

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.

Configure and deploy Firebase Hosting sites.

Then it will ask you to select firebase project,

Select Use an existing project, which we created in step 1

Use an existing project,

Then it will ask you enter the main folder in which all your website assets are present.

enter the main folder in which all your website assets are present

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. firebaserc, firebase.json in the react project. These files are automatically generated and you will 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. The .firebaserc should look similar to the following:
{

“projects”: {
“default”: “firebase-hosting-demo”
}
}

The firebase.json file should look exactly like the following:
{

“hosting”: {
“public”: “build”,
“ignore”: [
“firebase.json”,
“/.*”,
“/node_modules/”
],
“rewrites”: [
{
“source”: “”,
“destination”: “/index.html”
}
]
}
}
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 on command line: firebase deploy

firebase deploy app

Congratulations! your website is now live; you can check by going to URL which is provided as Hosting URL in the command line.

Get to know more with images here: https://www.rlogical.com/blog/firebase-hosting-of-react-project/