Hosting Website on Firebase
Tags: webdev, firebase, hosting, website
Published: 2021-10-25 15:34:00

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/](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.

<hr>
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