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.
B. Initiate your project
- 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:
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.