Harrison 
As a front-end developer, you may have used free hosting platforms such as Vercel, Netlify, or GitHub Pages to deploy your front-end projects.
Personally, I use Vercel and Netlify a lot. But he also likes experimenting with different web technologies, and in the past in various projects he has used Firebase’s authentication and storage features. So he decided to deploy his React-TypeScript project using Firebase. It worked very well.
What is Firebase?
Firebase is a Backend-as-a-Service (BaaS) platform owned by Google that can be used to perform backend operations such as authentication and real-time database functionality.
Firebase allows front-end developers to interact with back-end functionality without actually diving deep into back-end development.
You can also use Firebase to host and deploy your projects. You can share the hosting URL provided after deployment with others to view your app on their devices as well as other hosting and deployment platforms.
Follow these step-by-step instructions to successfully deploy your React project using Firebase.
Create a React project
Create your React project depending on the method you use to create it. For example, you can use CRA to do this. npx create-react-app app-name Or using Vite: npm create vite@latest (Recommendation).
use cd app-name Click to navigate to your project directory.after that npm start or npm run dev Start the development server. Build the desired project, create a GitHub repository, and push the project to his GitHub.
Part 1 of the procedure is now complete. Proceed to the next part.
How to configure and install Firebase
If you don’t have an account with Firebase, visit this site to create an account with Firebase, or log in if you already have an account. If you have a Google account, creating one with Firebase is easy.
After successfully logging in, you need to create a project in Firebase. Here’s how:
Step 1: Firebase console dashboard.
Go to the Firebase console dashboard. After logging in, you will see the text “Go to Console” in the top right corner of the page.
The page that opens has a “Create Project” button. Clicking that button will take you to a page where you enter your project details (Step 2).
If you’ve used Firebase before, that means you already have a project on Firebase. In that case, you will see a page like the one below, with a list of projects and a box to add a new project.
Step 2: Create a new project
Click the Add Project card. A page opens asking you to name your project.
Step 3: Enter project details
In this example, I named the project “My React APP.”
If you’re new to Firebase,[Firebase 規約に同意する]checkbox and the second checkbox must be checked.
Click the Continue button. The next page has a toggle button to enable or disable Google Analytics for your project. We don’t need Google Analytics for this demo, so we’ll disable this toggle.
Click the Create Project button to begin creating your Firebase project.
If you’re new to Firebase, click the link on the page above.[続行]Click the button to disable Google Analytics and create a new project.
Step 4: Install Firebase and Firebase tools
The next step is to go to the project terminal in VS Code, command line interface, or whatever code editor you’re using. Make sure you are in the main folder of the project you want to deploy and use the following command to install Firebase into your project. npm install firebase.
Next, install the Firebase tools for hosting and deployment using the following commands: npm install -g firebase-tools.
Step 5: Log in to Firebase using Terminal
After configuring your Firebase project and installing the required dependencies, you need to log in to Firebase in your terminal using the following command: firebase login.
You will be prompted to select “Yes” or “No” to the question “Do you want to allow Firebase to collect CLI and emulator suite usage and error reporting information?” Select the “Yes” option.
Step 6: Choose your account
A window will open in your default browser and you will need to select your Firebase account to log in.
If the authentication is successful, a success message will be displayed on your device.
Step 7: Build the project
use npm run build Command to build project scripts. This command automatically generates a production-ready build of your application by bundling all the required JavaScript, CSS, and other assets into one folder “build” in your project directory. .
This process is important to optimize the performance of your code and assets. This reduces the overall application size and makes deployment more efficient.
Once part 2 is successfully completed, move on to the next important part of this entire deployment process.
How to initialize Firebase
Next, we need to initialize Firebase, so we’ll walk you through the steps.
Step 1: Initialize Firebase
Initialize Firebase for this project using the following command in Terminal: firebase init. You will be notified that you are about to initialize a Firebase project in your directory.
The prompt that appears after this command includes “Are you ready to continue?” For this, enter “Y” for “yes”.
The next prompt is “Which Firebase feature do you want to configure in this directory?” Use the down arrow key on your keyboard to point to the “Hosting:Configure files for Firebase Hosting and (optional) set up GitHub Actiondeploys” option. Press Spacebar and press Enter.
Step 2: Set up the project
In this step, you connect your project directory to your Firebase project. When prompted to select a project, select the “Use an existing project” option.
Then, when prompted to “Select a default Firebase project for your directory,” choose the specific Firebase project you created in part 1 of this process.
If you have multiple Firebase projects in the Firebase console, you may see other project options.
Step 3: Set up hosting
During this process, you will be presented with several prompts that you will need to answer.
The first one is “What do you want to use as your public directory?” Select or type “Build.”
Then select Y or Yes when asked if you want to configure it as a single-page app (rewrite all URLs to /index.html).
When asked, “Do you want to set up automated builds and deployments using GitHub?”, select the “Yes” option. Also, if you are prompted with “The file build/index.html already exists. Do you want to overwrite it?”, select “No”.
Step 4: Authorize Firebase with GitHub
You must authorize Firebase with your GitHub account. A window will open on your browser where you must authenticate Firebase to GitHub and enter your GitHub password. If authentication is successful, you’ll see a success message in your terminal that includes your GitHub username.
If you can stay on track and get to this point, you’ve done well so far. You are now halfway through deploying your project.
How to choose a GitHub repository and configure GitHub workflows
Step 1: Choose a GitHub repository
First, you need to enter the GitHub repository you’ll use to set up the GitHub workflow for Firebase deployment.
The format to do this is “username/repository”. Recall that in part 1 of this process we built the project and pushed it to GitHub. That GitHub repository will be what you use.
For example, suppose your GitHub username is “CoderDev” and your project’s repository is “Firebase-Deployment.” Type “CoderDev/Firebase-Deployment” in the terminal. It will be as follows.
Step 2: GitHub secret token
Setting up a GitHub workflow creates a service account with administrative privileges for Firebase Hosting and uploads the service account JSON to GitHub as a secret token.
This secret token can also be viewed on GitHub. To do this, go to your project’s repository and[設定]Switch to tab. In the left panel of the settings page, click the Secrets & Variables dropdown and select the Actions option. The secret token will be displayed as shown below.
Step 3: Set up your workflow
You’ll be asked, “Do you want to set up your workflow to run a build script on every deployment?” Please select “Yes” here.
You may also be asked, “Which script should I run every time I deploy? (npm ci && npm run build) npm run build.” Type the following in your terminal: npm ci && npm run build. This creates a workflow file in your project directory.
You will see a “firebase-hosting-pull-request.yml” file inside the “.github/workflows” folder in your project folder structure.
Step 4: Automatic deployment
You’ll then be asked if you want to “set up automatic deployment to your site’s live channels when merging PRs.” Please select “Yes”.
When asked to enter the name of the GitHub branch associated with your site’s live channel, enter or select “main.” This will create another workflow file ‘firebase-hosting-merge.yml’ inside the ‘.github/workflows’ folder.
Step 5: Generate folders
The two operations performed above will generate two folders in the project directory. One named “firebase.json” is where the configuration information will be written, and the other named “.firebaserc” is where the project information will be written.
That’s all you need to do to initialize Firebase in your project.
These processes take a little time, but the good news is that all that’s left to do is deploy to Firebase.
How to deploy to Firebase
Run the deployment command
Run the deployment command firebase deploy. Wait until it is deployed. Once complete, you’ll see a success message on your device that includes your hosting URL. This is a live link for a project with a “web.app” domain extension.
that’s it! You have successfully deployed your React project using Firebase.
Now, when you add, commit, or push new changes to your GitHub repository, your app will be automatically built and redeployed to Firebase so your changes will be reflected on your live site.
This automatic build and redeployment is possible because you selected the Yes option to configure automatic build and deployment using GitHub during the previous Firebase initialization process.
I also selected the Yes option to set up a workflow to run a build script before every deployment, and specified a script to run before every deployment.
To see how this deployment runs every time you push to your repository, visit that project’s GitHub repository. Switch to the Actions tab to see how your app is built and deployed.
Errors may occur during deployment. The good thing is that you can track where in your app the error is coming from on the GitHub actions page.
Let’s say you’re using TypeScript in your project, and you declare a function but don’t use it, or call a hook but don’t use it. The app may work fine on your browser.
However, during deployment, this may become an issue or cause a warning, so to fix the error you will need to fix it, commit it, and push it to the repository again. If you do this and the deployment is successful, your action page will look like this:
conclusion
Deploying a project using Firebase may seem like a long process at first. However, if you follow the steps in this article, you should be able to do it without any problems.
By following the simple steps in this article, you can easily deploy your application to Firebase Hosting and take advantage of powerful features such as automated processes, a simplified deployment process, and continuous integration with GitHub.
If you want to learn more about all the features Firebase offers to developers, visit and explore the official Firebase documentation.
