Deploying your React App to Firebase Hosting

Muhammad Ibrahim Umar — Thu, 30 Mar 2023 17:22:13 +0000

Deploying a React app to Firebase Hosting can be a straightforward process. Firebase is a mobile and web application development platform that provides a range of services, including hosting, database, authentication, storage, and analytics.
Firebase Hosting is a fast and reliable hosting solution that allows developers to deploy web applications quickly and easily.

In this tutorial, we will cover the steps required to deploy a React app on Firebase Hosting. We will assume that you have a basic understanding of React and Command Line.

Prerequisites
Before we get started, you will need the following:

Firebase account
React application
Firebase CLI installed on your machine

Step 1: Create a Firebase Project

To get started, log in to your Firebase console and create a new project. Give your project a name and select your preferred region. Once your project is created, navigate to the project dashboard.

Next, choose the platform for your app. In this case, we will choose "Web". Provide a name for your app and click on the "Register app" button.

Firebase will generate a set of configuration keys for your app. Copy these keys to your clipboard, as we will use them later in the tutorial.

Step 2: Install Firebase CLI
Next, we need to install the Firebase CLI on our machine. The Firebase CLI is a command-line interface that allows us to interact with Firebase from our terminal.

To install Firebase CLI, open your terminal and run the following command:

npm install -g firebase-tools

Once the installation is complete, log in to Firebase CLI by running the following command:

firebase login

This will open a browser window and ask you to log in to your Firebase account. Once you are logged in, you can close the browser window and return to your terminal.

Step 3: Initialize Firebase in Your React App
Now that we have installed Firebase CLI, we can initialize Firebase in our React app. Navigate to your project directory in your terminal and run the following command:

firebase init

This will initialize Firebase in your project and create a firebase.json file in your project root directory.

Next, we need to configure Firebase Hosting. In the Firebase CLI prompt, select "Hosting" and press Enter. Then, select the project you created in Step 1.

Firebase will ask you to configure your hosting settings. Use the following configuration:

What do you want to use as your public directory? dist
Configure as a single-page app (rewrite all urls to /index.html)? Yes
File dist/index.html already exists. Overwrite? Yes

Step 4: Build Your React App

Before we can deploy our app to Firebase Hosting, we need to build our React app. To do this, run the following command:

npm run build

This will create a production-ready build of your React app in the dist directory.

Step 5: Deploy Your React App to Firebase Hosting
Finally, we are ready to deploy our React app to Firebase Hosting. To do this, run the following command:

firebase deploy

Congratulations! You have successfully deployed your React app to Firebase Hosting.

App is Live, preview it here

Conclusion

In this tutorial, we covered the steps required to deploy a React app on Firebase Hosting. We started by creating a Firebase project and configuring Firebase CLI on our machine. Then, we initialized Firebase in our React app and configured Firebase Hosting. Finally, we built our React app and deployed it to Firebase Hosting.

Firebase Hosting is a fast and reliable hosting solution that allows developers to deploy web applications quickly and easily. It is an excellent option for hosting your React app, as it provides a range of features and integrations that can help streamline your development workflow.

If you encounter any issues during the deployment process, be sure to consult the Firebase documentation or reach out to their support team for assistance. Happy coding!

Installing Fira Code on Github Codespaces.

Muhammad Ibrahim Umar — Thu, 26 May 2022 06:58:54 +0000

Before you get confuse about what fira code is, let me explain.
Fira Code is a free monospaced font containing ligatures for common programming multi-character combinations.
If you are still not okay with this explanation, you can check out Fira Code on Github.

Step 0 - Installing the font.

Open your terminal and paste this command

sudo apt install fonts-firacode

Step 1 - Font Configuration. [Making it active]

click on the gear icon at the bottom left corner.
Click Settings
Search for ligatures on the search bar
Click edit settings.json. then finally, copy and paste this in your settings.json file

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,

And that's it.
Congratulations for making it to the end👏👏🎉🎊

DEV Community: Muhammad Ibrahim Umar

Deploying your React App to Firebase Hosting

Installing Fira Code on Github Codespaces.