Hosting Ionic PWA using firebase hosting

In this tutorial we are going to explain how to host ionic PWA using Firebase Hosting. I hope you have you have ready you application. If not please go through our previous tutorial.

Before starting our tutorial let take about firebase hosting. Firebase Hosting is production-grade web content hosting for developers. With a single command, you can quickly deploy web apps and serve both static and dynamic content to a global CDN (content delivery network).

It is very simple to host your application on firebase and also it completely  free but there is some limitations. Like the free hosting plan offers only 1GB storage and 10GB transfer. In firebase hosting you will get free SSL certificate with each domain which is provide feature to run your application over https protocol without any configuration. And also you can host your application using custom domain on firebase hosting.  

To build you ionic application for deployment on production you need to run the following command.

npm run ionic:build --prod

This command will build you application for production. The command behave same like ionic serve but the between both of them is ionic serve will build runtime files meanwhile ionic build will build you application in the www folder of you project.

Let talk about www folder basically this having all the files which we use during our hosting. This folder contains all the JavaScript's files, all resources in assets folder and index.html.

Hosting Your Application On Firebase

For hosting application you need to create a project on firebase. If you are using your machine first time for hosting then you need to install the firebase tools package using this command.

npm install -g firebase-tools

This is one time installation, for your other project you don't need to install again because we have installed globally using -g command.

Now you need to login your firebase into firebase tools. Open the your terminal window and run this command. 

firebase login

 If ask for your firebase credentials to access your project for hosting. After you need to this command for initialize firebase in you project.

firebase init

After running this command you will see something like this 

Because we need to host our application for that you need select the hosting option using down arrow. For selecting hosting you need to hit the space and then Enter. Then you will be see the list of project which associated with your account. You need to select the appropriate one and then hit Enter.

Now time for hosting setup for that you need to file some more option which shown in below.

First you need set you public directory for that we are using www folder because www folder contains our build code. After giving all the answers same as image then two files are generated in your project- .firebaserc and firebase.json.

.firebaserc contains the information of associated project name with you application.

{
  "projects": {
    "default": "findyourjab"
  },

and firebase.json contains all the configuration which is used during hosting.

{
  "hosting": {
    "public": "www",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

To build you ionic application for deployment on production you need to run the following command.

npm run ionic:build --prod

and then run 

firebase deploy

Once you need run this command you application are getting start to deploying one your firebase. After completing this action you will get the hosting URL that you can use to access your application on web. For mobile device it some looks like as app.

I hope you enjoy this tutorial. Keep learning

Thanks!