How to deploy websites to Google Firebase

TIKAM CHAND–Firebase, Google, How To, React–

Today we’re going to deploy a website to the google firebase. Google firebase is free & easy to use. Google firebase provides the free hosting upto 1GB space, if you need more there are some plans provided by firebase. You can use as per your requirements.

Before starting, I assume you already have a google firebase account and a website ready to be host.

let’s start hosting a website to google firebase.

1. Create a Build

Open cmd prompt in your website folder and run the below command

npm run build

It will create a build folder which contains all the website data ready to be host. All website data means html, js, css, images files.

2. Create Project in Firebase

Login to your Firebase Console & add a new project. If you have already created a project, just choose that.

2. Open Hosting Page

You can find a Hosting link in the left side menu. Click on it and open the hosting page.

3. Set up firebase hosting.

Open cmd in your project folder and install the Firebase CLI into website.

1. Install Firebse CLI

npm install -g firebase-tools

2. Initialize the Project

Open a terminal window and navigate to or create a root directory for your web app

A. Sign in to Google

It will take you to Google Login page and log you in into the app.

firebase login

B. Initiate your project

firebase init
  • Go to hosting by up-down arrow key
  • Select Hosting by clicking the space button on keyboard and hit Enter
  • It will ask you to select the hosting folder, write build
  • Next Configure as a single-page app, write Y
  • Next Overwrite the index.html, write N
  • Firebase initialisation is complete. Now, deploy the website in next step.

3. Deploy to Firebase Hosting

Run this command from your app’s root directory:

firebase deploy

4. Open and run your website.

After successful deployment, firebase will provide you a link and you can use it to see your live website in action.

This link will be a subdomain of google domains. It will be look like your-project-id.web.app

If you want to add your custom domain to this website, you can follow the link Map custom domain to firebase hosting.

Have any questions? Write into the comment section.