Firebase Hosting

Search…

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": "**/*[email protected](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

Firebase CRUD

Push Notifications

Last modified 6mo ago

Copy link

Outline

Deploy your Ionic app with Firebase Hosting

Add Firebase to your Ionic App