Hosting with Firebase

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

Transcript

1. Hosting with Firebase
   Ire Aderinokun
   Google Launchpad Build 2016 (Lagos)
   

   View Slide

2. Hello!
   • Ire Aderinokun
   • User Interface Designer & Front-End
   Developer
   • Head of Technology, Big Cabal
   Media
   • Google Developer Expert (Web
   Technologies)
   

   View Slide

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
   

   View Slide

4. What is Firebase Hosting?
   

   View Slide

5. The Firebase Suite
   

   View Slide

6. The Firebase Suite
   

   View Slide

7. Firebase Hosting is production-grade, web content
   hosting for developers
   

   View Slide

8. “Production Grade”
   

   View Slide

9. “Web Content”
   

   View Slide

10. “For Developers”
    

    View Slide

11. Why Static Hosting?
    

    View Slide

12. Increase in Popularity Decrease in Popularity
    Stack Overflow Developer Survey 2016
    (http://stackoverflow.com/research/developer-survey-2016)
    

    View Slide

13. The Power of Front-End Frameworks
    

    View Slide

14. Progressive Web Applications
    

    View Slide

15. Key Features of
    Firebase Hosting
    

    View Slide

16. Served Over a
    Secure Connection
    

    View Slide

17. Zero-configuration SSL is built into Firebase Hosting so
    content is always delivered securely
    

    View Slide

18. The Importance of HTTPS
    • Security for Users
    • Modern Web APIs require HTTPS (e.g. Service Worker, Push API)
    • The Future Default
    

    View Slide

19. Fast Content Delivery
    

    View Slide

20. Each file you upload is cached on SSDs at CDN edges
    around the world
    

    View Slide

21. View Slide

22. Rapid Deployment
    

    View Slide

23. Using the Firebase CLI, you can get your app
    up and running in seconds
    

    View Slide

24. firebase deploy
    

    View Slide

25. One-Click Rollbacks
    

    View Slide

26. Firebase Hosting provides full versioning and release
    management with one-click rollbacks
    

    View Slide

27. View Slide

28. Getting Started with
    Firebase Hosting
    

    View Slide

29. 4 Simple Steps
    1. Create a new Firebase project
    2. Install the Firebase CLI
    3. Initialise your application
    4. Deploy your website
    

    View Slide

30. 1. Create a Firebase project
    

    View Slide

31. View Slide

32. 2. Install the Firebase CLI
    

    View Slide

33. Dependencies
    • Node.js (> 0.10.0)
    • NPM
    

    View Slide

34. npm install -g firebase-tools
    

    View Slide

35. 3. Initialise your Application
    

    View Slide

36. firebase init
    

    View Slide

37. View Slide

38. firebase.json
    {
    “hosting”: {
    “public”: “app”,
    “ignore”: [
    “firebase.json”,
    “**/*.*”,
    “**/node_modules/**”
    ]
    }
    }
    

    View Slide

39. .firebaserc
    {
    “projects”: {
    “default”: “PROJECT_NAME_HERE”
    }
    }
    

    View Slide

40. 4. Deploy your Website
    

    View Slide

41. firebase deploy
    

    View Slide

42. View Slide

43. https://YOUR_FIREBASE_APP_NAME.firebaseapp.com
    

    View Slide

44. More Features
    

    View Slide

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
    

    View Slide

46. Hooking up a
    Custom Domain
    

    View Slide

47. View Slide

48. Automatically Secure
    

    View Slide

49. Setting up a
    Staging Environment
    

    View Slide

50. 1. Create a new Firebase Project
    

    View Slide

51. 2. Link New Project Under “staging” Alias
    firebase use --add
    

    View Slide

52. View Slide

53. .firebaserc
    {
    “projects”: {
    “default”: “offline-fx”,
    “staging”: “offline-fx-staging”
    }
    }
    

    View Slide

54. 3. Deploy from “staging” Environment
    

    View Slide

55. Setting up URL
    Redirects & Rewrites
    

    View Slide

56. Redirects
    {
    “redirects”: [{
    “source”: “/old-url-path”,
    “destination”: “/new-url-path”,
    “type”: 301
    }]
    }
    

    View Slide

57. Rewrites
    {
    “rewrites”: [{
    “source”: “**”,
    “destination”: “/index.html”
    }]
    }
    

    View Slide

58. Setting Custom Headers
    

    View Slide

59. Headers
    • Cache-Control
    • Access-Control-Allow-Origin
    • X-UA-Compatible
    • X-Content-Type-Options
    • X-Frame-Options
    • X-XSS-Protection
    • Content-Type
    

    View Slide

60. e.g. Access-Control-Allow-Origin
    {
    “headers”: [{
    “source”: “**/*.@(eot|otf|ttf|ttc|woff|font.css)”,
    “headers”: [{
    “key”: “Access-Control-Allow-Origin”,
    “value”: “*”
    }]
    }]
    }
    

    View Slide

61. e.g. Cache-Control
    {
    “headers”: [{
    “source”: “**/*.@(jpg|jpeg|gif|png)”,
    “headers”: [{
    “key”: “Cache-Control”,
    “value”: “max-age=7200”
    }]
    }]
    }
    

    View Slide

62. Scaling your Application
    

    View Slide

63. View Slide

64. Thank You!
    @IreAderinokun
    #LaunchpadDev
    

    View Slide