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-toolsWith 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
1
{
2
"hosting": {
3
"public": "www",
4
"ignore": [
5
"firebase.json",
6
"**/.*",
7
"**/node_modules/**"
8
],
9
"rewrites": [ {
10
"source": "**",
11
"destination": "/index.html"
12
} ],
13
"headers": [
14
{
15
"source": "**",
16
"headers": [
17
{
18
"key": "Cache-Control",
19
"value": "no-cache, no-store, must-revalidate"
20
}
21
]
22
},
23
{
24
"source": "**/*[email protected](jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|font.css)",
25
"headers": [
26
{
27
"key": "Cache-Control",
28
"value": "no-cache"
29
}
30
]
31
},
32
{
33
"source": "ngsw-worker.js",
34
"headers": [
35
{
36
"key": "Cache-Control",
37
"value": "no-cache"
38
}
39
]
40
}
41
]
42
}
43
}
Copied!
Now each time you make a change on your Ionic app run the following:
1
ionic build --prod
Copied!
That’s it! Now simply deploy the app by running:
1
firebase deploy
Copied!
Last modified 6d ago