Hosting Website on Firebase

This instruction is for making newbies work easy so that they can follow exactly the same steps I am giving below

1. Create a folder name website on desktop
2. Create another folder within the website folder name it as public.
3. 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.

• 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