Deploying a static website can be a quick and seamless process, especially when using Firebase Hosting. In this guide, we’ll walk you through how to host your static site on Firebase, covering the steps from setting up your Firebase project to deploying your site with minimal hassle. Firebase offers a straightforward way to deploy static content while ensuring fast delivery through its global CDN. Whether you’re hosting a personal portfolio, blog, or a small project, this guide will help you get your static site online efficiently.
In this guide, we’ll focus on deploying a React app to Firebase Hosting. Firebase offers a smooth, efficient way to host web applications, and when combined with React, it allows for quick deployment of your static site.
Step 1: Create your React app
If you haven’t already, create a new React app using create-react-app. Open your terminal and run:
npx create-react-app my-react-app
cd my-react-app
You can now start the development server to preview your app locally:
npm run start
Before deploying, you need to create a production build of your React app. Run:
npm run build
The npm run build command creates a production-ready version of your app. It optimizes and combines all the files, like JavaScript and CSS, into a single package that’s ready for deployment. This process also adds unique hashes to the filenames to help with caching, ensuring your app loads faster for users. After running the command, you’ll see a build directory containing all the optimized files.
Step 2: Installing Firebase CLI
To deploy your app to Firebase, you’ll need the Firebase CLI. Install it globally by running:
npm install -g firebase-tools
Once installed, log in to Firebase using:
firebase login
Create a Firebase project by visiting the Firebase Console. Click on “Add Project” and follow the steps. After your project is created, initialize Firebase in your local React app folder.
There are versions of command used to initialize Firebase depending on your need. These commands allows you to configure Firebase services for your project.
Since we have already set up a project in Firebase console, choose existing project.
Everything upto here is available in all versions of initializing commands. The default one is:
firebase init
If you want to add a github workflow, you can try the following commands depending on your requirement:
If you've NOT set up Hosting:
firebase init hosting
If you've ALREADY set up Hosting:
firebase init hosting:github
Follow the CLI prompts, and the command will automatically take care of setting up the GitHub Action:
Creates a service account in your Firebase project with permission to deploy to Firebase Hosting.
Encrypts that service account's JSON key and uploads it to the specified GitHub repository as a GitHub secret.
Writes GitHub workflow yaml configuration files that reference the newly created secret. These files configure the GitHub Action to deploy to Firebase Hosting.
Now you are all set! You can deploy to firebase hosting directly from your terminal using the following terminal:
firebase deploy
Or, if you have configured github workflow, then whenever a PR is merged to your main branch, the changes will be deployed to firebase hosting.
Happy Coding!