Krutik Raut
Posted on October 25, 2021
This instruction is for making newbies work easy so that they can follow exactly the same steps I am giving below
- Create a folder name website on desktop
- Create another folder within the website folder name it as public.
- Add your HTML/CSS/JS and images files to the public folder
Make sure the main page of your website is named as an index.html
Note:Firebase hosting does not support any server-side scripts such as Ruby, PHP, Python, or anything else that is processing your files before output. That would require an application engine such as Google App Engine, Heroku, or similar. The hosting service is a static website hosting service.
Before starting install node js on your device.
Link: https://nodejs.org/en/
Once you are done with installing Node JS Follow the steps:
- Go to https://firebase.google.com/ and click on Get started.
- Click on Add Project.
- Enter your Project name and continue.
example:
reboot13-dev
- Enable google analytics on your project if you want to track users and click on continue.
Firebase will create your project within a few seconds
- Click on continue.
Lets Install Firebase CLI on our device
- Now Open your terminal (Command Prompt). - Type
npm install -g firebase-tools
This will install firebase tools globally on your device.
- Type
firebase login
This will redirect you to the browser
- Now select the Gmail account in which you have created the Project.
Allow access to Firebase and get back to the terminal.
Once you are logged in change the directory in the terminal.
- Type
cd C:\Users\common\Desktop\website
- Type
firebase init
You're about to initialize a Firebase project in this directory:
C:\Users\common\Desktop\website?
Are you ready to proceed? (Y/n)
type y and press enter
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices.
Scroll down user navigation keys (arrow keys) and press space to select
(*) Hosting: Configure and deploy Firebase Hosting sites
(*)means it's selected.
Press enter.
? Please select an option: (Use arrow keys)
Select > Use an existing project and press enter.
Select a default Firebase project for this directory: (Use arrow keys)
Select your project name and press enter.
Select a default Firebase project for this directory: (Use arrow keys)
As we named our folder public
type public and press enter
? Configure as a single-page app (rewrite all URLs to /index.html)?
type n and press enter.
? Set up automatic builds and deploys with GitHub? (y/N)
type n and press enter.
File public/404.html already exists. Overwrite? (y/N)
type n and press enter.
? File public/index.html already exists. Overwrite? (y/N)
type n and press enter.
Don't overwrite any file just type n and press enter.
- Firebase initialization complete!
- Now Type
firebase deploy
- Deploy complete!
Done you successfully hosted your website on Firebase
<project name>.web.app
Check the one I hosted https://reboot13-dev.web.app
Youtube Video Tutorial: https://www.youtube.com/watch?v=KQs7adkKNHk
Reboot13
Youtube: https://youtube.com/krutikraut
Github: https://github.com/reboot13-git
Posted on October 25, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.