Deploy ReactJS application to Firebase in 5 minutes

Introduction Firebase

Firebase is a product of Google that helps developers build, manage, and grow their apps easily. It’s designed to make app development faster and more secure.

In this article, I'll guide you through deploying a ReactJS application on Firebase. Google provides Firebase hosting for free, offering stable speed and SSL certificates, making it ideal for creating HTTPS-supported websites.


Creating a React Application

Firstly, you need to create a React Application project or use an existing one. You can use tools like vite, create-react-app, or Nx/Nrwl. The project initialization process is straightforward and can be easily found. Here, I'll use Nx, a build system that provides various tools for developing projects in multiple programming languages. You can learn more about Nx/React here.


After successfully initializing and running the React application, the result should look like this:


Next, let's proceed to build the React application. If you're using Nx, use the following command:

nx run {app name}:build


Setup Firebase

First, visit this page to create a project. The steps are quite straightforward; you just need to enter the required information as prompted.


Next, return to the React project you created earlier to install the firebase-tools package. Use the following command:

yarn add -D firebase-tools


After the installation is complete, log in to Google and initialize the project with the following commands:

firebase login
firebase init


Then, you'll be prompted with questions regarding project setup. Choose the following options:




? What do you want to use as your public directory? {build directory}
? Configure as a single-page app (rewrite all urls to /index.html)? Yes


After successful initialization, two additional files will be created: firebase.json and .firebaserc.


To deploy, simply use the command:

firebase deploy


Upon successful deployment, you will receive a Host URL to access your application.


You can access your hosted application via the Host URL, which typically looks like this: https://{project-id}.web.app


To disable the project, use the command:

firebase hosting:disable

Please like and share if you found this post helpful. Your support motivates me to create more valuable content!

Comments

Popular posts from this blog

Kubernetes Practice Series

Docker Practice Series

NodeJS Practice Series

React Practice Series

Sitemap

Setting up Kubernetes Dashboard with Kind

Deploying a NodeJS Server on Google Kubernetes Engine

Create API Gateway with fast-gateway

Explaining Async/Await in JavaScript in 10 Minutes

A Handy Guide to Using Dynamic Import in JavaScript