Firebase deployment

Firebase Hosting and function deployment

Firebase Cli Installation

You can create a firebase project 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

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

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

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.

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 .

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 .

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

Firebase Function deployments.

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 docs on deployment .