# Firebase deployment

## Firebase Cli Installation 

You can [create a firebase project](https://docs.ionicfirebaseapp.com/multirestaurantfirestorebackend/firebase-config) through firebase console before the web app deployment on their Hosting. Once your project gets create Please install the firebase-cli globally on your machine. 

```
$     npm install -g firebase-tools   
```

Once above command finish and firebase-cli install on your machine  you can check if installation successfully finished  or not . 

```
$  firebase --version   // it will return the firebase version 
```

## Firebase Hosting Init 

You need to navigate to web app directory 

![Firebase Init ](/files/-LMa_AjMob-vHqbeXNjI)

Once you navigate into webapp directory run following command.

```
$ firebase init   // it will initialize firebase project  
```

If you are first time then it will ask to login in your google account. You can also run login command manually.

```
$ firebase login     // Will promopt to login with your gmail account 
```

![Firebase Hosting and Function selection](/files/-LMasZK_hLfR3GwTlvpV)

After `firebase init`

You can the list of services firebase has like above screen , Their you can select ***function and Hosting  OR HOSTING***  and  hit Enter. it will initialize  you firebase project in existing folder.  You can use Arrow Key  UP or DOWN with TAB key to select the list . 

Once you selected Hosting and function just hit then Enter and then it will show the list of project in your account and you can select the firebase app where you want this app to deploy 

![Select the firebase project ](/files/-LMavBiu0sNlYtgiBCoY)

Once you select firebase app name from list it may ask for some more question for Function to deploy on same project . We used firebase cloud function on some functionality where client can't handle the logic properly like rating , loyalty point etc.  

![](/files/-LMawKrOd_1HjXH2d4zI)

Once project initialize it will create 2 folder files in your project directory. 

```
.firebaserc and firebase.json 
```

**.firebaserc :**  it keep the name of the firebase project . You can change there name if want to use some other firebase app . 

```
{
  "projects": {
    "default": "multirestaurant-test"
  }
}
```

In our project probably these files already created so you can just need to change project name to your own project and we are ready to go . 

Let's make a production build now  

```
$ ng build --prod  // run in project directory 
```

 It will create a dist directory that can upload on any hosting providers but to deploy on firebase we run the follwing command .

```
$ firebase deploy  
```

It will deploy all the dist files to your firebase hosting account . Function also get deployed on your account as well .  Inside function Directory please install modules as well .  

![Install npm inside function . ](/files/-LMayWV1aEr4yyS--hLm)

Once all goes well you can visit your firebase console window and check  hosting and function if  deployed or not . 

![Firebase hosting looked like this . ](/files/-LMazMOh-bPhfuizNevR)

You can connect your firebase hosting with your domain as well . You need to update your DNS. 

![Firebase Function deployments.](/files/-LMazdNFKujuSFIK43xk)

Once firebase deployment success your firebase console will be looked like above screen. To deploy function you need to Upgrade your account to paid version like Spark . 

If you have any issue can follow [Google Firebase](https://firebase.google.com/docs/cli/) docs on deployment . 


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ionicfirebaseapp.com/multirestaurantfirestorebackend/firebase-deployment.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.