Hosting with Firebase

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