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!
If you found this content helpful, please visit the original article on my blog to support the author and explore more interesting content.
Some series you might find interesting:
Top comments (0)