Previously I wrote a blog about my portfolio. If you haven't checked it out yet, check it out here:

In the ending of the post, I mentioned that I deployed my React Application to Firebase.

Want to know how to do this as well?

Well today, I am going to be showing you the same.

Getting Started

In this tutorial, I will be demonstrating how you can deploy your React app using Firebase Hosting. I will assume that you already have a Firebase project set up. If you do not, you can create one using the Firebase Console.
You will also need to ensure have a React app created. For this, I will use Create React App. You can create a new React app by running the following:

npx create-react-app firebase-hosting-demo

1. Installing the Firebase CLI Tools

You will need the Firebase CLI Tools in order to deploy your app to the internet.

You can do this by using the command:

npm install firebase-tools -g

(Don't forget to add the -g flag or else it will not be enabled globally and will set the scope to only this project)

2. Login to Firebase

Login to Firebase console by using:

firebase login

Then, proceed with your google account to login to the Firebase console.

3. Initialize Firebase

The next step is to Initialize Firebase with your project using:

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.

Then, create a project on the Firebase Console

Then, back in the CLI:

Select Use an existing project

Then, select your firebase project that you created.

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. These files are automatically generated and you will want to save these files, and commit them in your git repo, as they live in 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 should look similar to this:

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

4. 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:

firebase deploy

Firebase will then give you a unique URL where your deployed app is located. For example, it might look similar to:

https://yourprojectid.firebaseapp.com

or

https://yourprojectid.web.app

And thats pretty much it!

Thank You for reading my blog and remember...

Keep Coding Y'All 👨🏻‍💻