Firebase Hosting

How to deploy you Ionic app using Firebase Hosting.

Deploy your Ionic app with Firebase Hosting

Firebase provides a Hosting solution that's super easy to work with besides it is free and has many benefits for Progressive Web Apps, including fast response times thanks to CDN's, HTTPS enabled by default, and support for HTTP2 push.

Follow me while I show you how to deploy your Ionic app to Firebase.

If you want to learn more about using Firebase with Ionic Apps, check our series of posts covering Authentication with Firebase, Ionic CRUD with Firebase, Firebase Storage, Firebase Database.

Ionic Firebase deploy

Add Firebase to your Ionic App

Let’s start by installing the Firebase CLI:

npm install -g firebase-tools

With the Firebase CLI installed, run firebase init from within your project’s folder. This will generate a firebase.json config file for you to adjust the deployment details.

Lastly, make sure caching headers are being set correctly. Ensure your firebase.json file looks like this:

firebase.json

{
  "hosting": {
    "public": "www",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [ {
      "source": "**",
      "destination": "/index.html"
    } ],
    "headers": [
      {
        "source": "**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      },
      {
        "source": "**/*.@(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|font.css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      },
      {
        "source": "ngsw-worker.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      }
    ]
  }
}

Now each time you make a change on your Ionic app run the following:

ionic build --prod

That’s it! Now simply deploy the app by running:

firebase deploy