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)

45ca9033757d209fabf1481740d1c936?s=128

Ire Aderinokun

September 22, 2016
Tweet

Transcript

  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
  21. None
  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
  27. None
  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

  31. None
  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

  37. None
  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

  42. None
  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

  47. None
  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

  52. None
  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

  63. None
  64. Thank You! @IreAderinokun #LaunchpadDev