Hosting with Firebase

For Google Developers Launchpad in Sub-Saharan Africa (Lagos)

1. Hosting with Firebase Ire Aderinokun Google Launchpad Build 2016 (Lagos)
2. Hello! • Ire Aderinokun • User Interface Designer & Front-End Developer • Head of Technology, Big Cabal Media • Google Developer Expert (Web Technologies)
3. What We’ll Cover • What is Firebase Hosting? • Why Static Hosting? • Key Features of Firebase Hosting • Getting Started with Firebase Hosting • More Features of Firebase Hosting
4. What is Firebase Hosting?
5. The Firebase Suite
6. The Firebase Suite
7. Firebase Hosting is production-grade, web content hosting for developers
8. “Production Grade”
9. “Web Content”
10. “For Developers”
11. Why Static Hosting?
12. Increase in Popularity Decrease in Popularity Stack Overflow Developer Survey 2016 (http://stackoverflow.com/research/developer-survey-2016)
13. The Power of Front-End Frameworks
14. Progressive Web Applications
15. Key Features of Firebase Hosting
16. Served Over a Secure Connection
17. Zero-configuration SSL is built into Firebase Hosting so content is always delivered securely
18. The Importance of HTTPS • Security for Users • Modern Web APIs require HTTPS (e.g. Service Worker, Push API) • The Future Default
19. Fast Content Delivery
20. Each file you upload is cached on SSDs at CDN edges around the world
22. Rapid Deployment
23. Using the Firebase CLI, you can get your app up and running in seconds
24. firebase deploy
25. One-Click Rollbacks
26. Firebase Hosting provides full versioning and release management with one-click rollbacks
28. Getting Started with Firebase Hosting
29. 4 Simple Steps 1. Create a new Firebase project 2. Install the Firebase CLI 3. Initialise your application 4. Deploy your website
30. 1. Create a Firebase project
32. 2. Install the Firebase CLI
33. Dependencies • Node.js (> 0.10.0) • NPM
34. npm install -g firebase-tools
35. 3. Initialise your Application
36. firebase init
38. firebase.json { “hosting”: { “public”: “app”, “ignore”: [ “firebase.json”, “**/*.*”, “**/node_modules/**” ] } }
39. .firebaserc { “projects”: { “default”: “PROJECT_NAME_HERE” } }
40. 4. Deploy your Website
41. firebase deploy
43. https://YOUR_FIREBASE_APP_NAME.firebaseapp.com
44. More Features
45. Do More with Firebase • Hooking up a Custom Domain • Setting up a Staging Environment • Setting up URL Redirects and Rewrites • Setting Custom Headers • Scaling your Application
46. Hooking up a Custom Domain
48. Automatically Secure
49. Setting up a Staging Environment
50. 1. Create a new Firebase Project
51. 2. Link New Project Under “staging” Alias firebase use --add
53. .firebaserc { “projects”: { “default”: “offline-fx”, “staging”: “offline-fx-staging” } }
54. 3. Deploy from “staging” Environment
55. Setting up URL Redirects & Rewrites
56. Redirects { “redirects”: [{ “source”: “/old-url-path”, “destination”: “/new-url-path”, “type”: 301 }] }
57. Rewrites { “rewrites”: [{ “source”: “**”, “destination”: “/index.html” }] }
58. Setting Custom Headers
59. Headers • Cache-Control • Access-Control-Allow-Origin • X-UA-Compatible • X-Content-Type-Options • X-Frame-Options • X-XSS-Protection • Content-Type
60. e.g. Access-Control-Allow-Origin { “headers”: [{ “source”: “**/*.@(eot|otf|ttf|ttc|woff|font.css)”, “headers”: [{ “key”: “Access-Control-Allow-Origin”, “value”: “*” }] }] }
61. e.g. Cache-Control { “headers”: [{ “source”: “**/*.@(jpg|jpeg|gif|png)”, “headers”: [{ “key”: “Cache-Control”, “value”: “max-age=7200” }] }] }
62. Scaling your Application
64. Thank You! @IreAderinokun #LaunchpadDev