Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Hosting with Firebase

Hosting with Firebase

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

Ire Aderinokun

September 22, 2016
Tweet

More Decks by Ire Aderinokun

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size 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 full-size slide

  4. What is Firebase Hosting?

    View full-size slide

  5. The Firebase Suite

    View full-size slide

  6. The Firebase Suite

    View full-size slide

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

    View full-size slide

  8. “Production Grade”

    View full-size slide

  9. “Web Content”

    View full-size slide

  10. “For Developers”

    View full-size slide

  11. Why Static Hosting?

    View full-size slide

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

    View full-size slide

  13. The Power of Front-End Frameworks

    View full-size slide

  14. Progressive Web Applications

    View full-size slide

  15. Key Features of
    Firebase Hosting

    View full-size slide

  16. Served Over a
    Secure Connection

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. Fast Content Delivery

    View full-size slide

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

    View full-size slide

  21. Rapid Deployment

    View full-size slide

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

    View full-size slide

  23. firebase deploy

    View full-size slide

  24. One-Click Rollbacks

    View full-size slide

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

    View full-size slide

  26. Getting Started with
    Firebase Hosting

    View full-size slide

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

    View full-size slide

  28. 1. Create a Firebase project

    View full-size slide

  29. 2. Install the Firebase CLI

    View full-size slide

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

    View full-size slide

  31. npm install -g firebase-tools

    View full-size slide

  32. 3. Initialise your Application

    View full-size slide

  33. firebase init

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. 4. Deploy your Website

    View full-size slide

  37. firebase deploy

    View full-size slide

  38. https://YOUR_FIREBASE_APP_NAME.firebaseapp.com

    View full-size slide

  39. More Features

    View full-size slide

  40. 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 full-size slide

  41. Hooking up a
    Custom Domain

    View full-size slide

  42. Automatically Secure

    View full-size slide

  43. Setting up a
    Staging Environment

    View full-size slide

  44. 1. Create a new Firebase Project

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. 3. Deploy from “staging” Environment

    View full-size slide

  48. Setting up URL
    Redirects & Rewrites

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  51. Setting Custom Headers

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  55. Scaling your Application

    View full-size slide

  56. Thank You!
    @IreAderinokun
    #LaunchpadDev

    View full-size slide