Hosting Website on Firebase

reboot13_dev

Krutik Raut

Posted on October 25, 2021

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:

example:

reboot13-dev
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

This will install firebase tools globally on your device.

  • Type
firebase login
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode
  • Type
firebase init
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • Deploy complete!

Done you successfully hosted your website on Firebase

<project name>.web.app
Enter fullscreen mode Exit fullscreen mode

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

💖 💪 🙅 🚩
reboot13_dev
Krutik Raut

Posted on October 25, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Hosting Website on Firebase
webdev Hosting Website on Firebase

October 25, 2021