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 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”: “**/*[email protected](eot|otf|ttf|ttc|woff|font.css)”,
    “headers”: [{
    “key”: “Access-Control-Allow-Origin”,
    “value”: “*”
    }]
    }]
    }

    View Slide

  61. e.g. Cache-Control
    {
    “headers”: [{
    “source”: “**/*[email protected](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