Home›Firebase in 5 Days›Day 5
Day 5 of 5
⏱ ~60 minutes
Firebase in 5 Days — Day 5

Hosting and Analytics

Deploy to Firebase Hosting with a CDN, set up rewrites for SPAs, and add Firebase Analytics.

Firebase Hosting

firebase.json
{
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "**/*.@(js|css)",
        "headers": [{"key": "Cache-Control", "value": "max-age=31536000"}]
      }
    ]
  }
}
Deploy
npm run build
firebase deploy --only hosting
# Live at your-app.web.app
Analytics
import { getAnalytics, logEvent } from 'firebase/analytics';
const analytics = getAnalytics(app);

// Log custom events
logEvent(analytics, 'post_created', {
  post_id: postId,
  category: postCategory
});

logEvent(analytics, 'button_click', {
  button_name: 'subscribe'
});

// Built-in: page_view, session_start, first_open tracked automatically
💡
Firebase Hosting serves your app from Google's CDN globally. With the SPA rewrite rule (** → /index.html), client-side routing works for all URLs. Without it, refreshing on /about returns a 404.
📝 Day 5 Exercise
Deploy Your Firebase App
  1. R
  2. u
  3. n
  5. <
  6. c
  7. o
  8. d
  9. e
  10. >
  11. n
  12. p
  13. m
  15. r
  16. u
  17. n
  19. b
  20. u
  21. i
  22. l
  23. d
  24. <
  25. /
  26. c
  27. o
  28. d
  29. e
  30. >
  31. .
  33. D
  34. e
  35. p
  36. l
  37. o
  38. y
  40. t
  41. o
  43. F
  44. i
  45. r
  46. e
  47. b
  48. a
  49. s
  50. e
  52. H
  53. o
  54. s
  55. t
  56. i
  57. n
  58. g
  59. .
  61. A
  62. d
  63. d
  65. t
  66. h
  67. e
  69. S
  70. P
  71. A
  73. r
  74. e
  75. w
  76. r
  77. i
  78. t
  79. e
  81. r
  82. u
  83. l
  84. e
  85. .
  87. V
  88. e
  89. r
  90. i
  91. f
  92. y
  94. c
  95. l
  96. i
  97. e
  98. n
  99. t
  100. -
  101. s
  102. i
  103. d
  104. e
  106. r
  107. o
  108. u
  109. t
  110. i
  111. n
  112. g
  114. w
  115. o
  116. r
  117. k
  118. s
  120. b
  121. y
  123. n
  124. a
  125. v
  126. i
  127. g
  128. a
  129. t
  130. i
  131. n
  132. g
  134. t
  135. o
  137. a
  139. r
  140. o
  141. u
  142. t
  143. e
  145. a
  146. n
  147. d
  149. r
  150. e
  151. f
  152. r
  153. e
  154. s
  155. h
  156. i
  157. n
  158. g
  159. .
  161. A
  162. d
  163. d
  165. o
  166. n
  167. e
  169. c
  170. u
  171. s
  172. t
  173. o
  174. m
  176. a
  177. n
  178. a
  179. l
  180. y
  181. t
  182. i
  183. c
  184. s
  186. e
  187. v
  188. e
  189. n
  190. t
  191. .

Day 5 Summary

  • Firebase Hosting = global CDN, HTTPS by default, custom domains.
  • The ** → /index.html rewrite is required for SPAs (React Router, Vue Router).
  • Cache aggressively: JS/CSS files with hashed names can be cached for a year.
  • Firebase Analytics is free and works automatically for page views. Add custom events for key actions.
→
← Previous
Day 4: Cloud Functions
Course Complete
Back to Firebase in 5 Days
→
Finished this lesson?