Many apps nowadays come with static content that is loaded on demand and not built into the app. For this type of content Google Firebase provides a hosting solution called Firebase Hosting. Firebase hosting gives you a free, fast, and reliable way to host an app's static assets such as HTML, CSS, JavaScript, and media files. One Gigabyte of data storage and 10 Gigabyte of monthly data transfer are free, including TLS certificate and an option to include your custom domain. That makes Firebase Hosting interesting for serving simple static websites. In this session we will look at getting started with a simple website hosted on Firebase and how to use its command line tools.

1. Getting started with
Firebase
@rorypreddy

2. Meet Rory
• Developer in R&D team at BBD
• Organizer for the Java and AWS User groups
• Not related to Tyrion Lannister
• Don’t do kids parties
@rorypreddy

5. • History of the Cloud and Firebase
• Creating a Firebase App
• Using Firebase in an Angular App
• Deploying and version control
Agenda

6. Cloud Computing
Cloud computing is a model for enabling convenient, on-
demand network access to a shared pool of configurable
computing resources (e.g., networks, servers, storage,
applications, and services) that can be rapidly
provisioned and released with minimal management
effort or service provider interaction.
https://nvlpubs.nist.gov/nistpubs/legacy/sp/nistspecialpublication800-145.pdf

7. Benefits of Cloud Computing:
• Cost
• Global Scale
• Reliability
• Speed and Performance
• Productivity

9. Deployment models
• Public cloud
• Private cloud
• Hybrid cloud

10. Tactic SolutionNew IT realityOld IT Implementation

12. History of firebase
• Originally firebase was online chat message integration service.
• Later the real time architecture was separated to create firebase
database in 2012.
• Firebase surfaced as a popular choice when Parse.com went down.
• Google acquired firebase in 2014 and added a whole lot of features
in Google IO-2016.
• Firebase is now a complete cloud solution.

14. Firebase Hosting
• Firebase hosting provides a fast and secure static hosting for
your web app.
• It is a production grade web content hosting.
• CDN edges around the world
• Hosting gives a subdomain of “firebaseapp.com”
• You can also get a custom domain.
• Free SSL certificate
• Install firebase CLI
• Also suited for SPA/Progressive web apps
• Version controlled

15. Not Suited For
• Dynamic web pages (Node.js)
• use Cloud functions with Node.js instead
• Server-Side Applications (PHP, JAVA, and so on)
• use Google Cloud Platform instead
• Authentication
• use Firebase Auth instead
• Authorization
• use Real Time and Storage security rules instead
• Heavy files
• Firebase Storage recommended

16. Pricing

17. Firebase console
• Google has several "consoles".
• These are webpages to control varying things.
• Other Examples:
• https://partner.android.com/things/console#/ android things
• https://console.developers.google.com/apis/ for apis like maps
• https://developers.google.com/beacons/dashboard/ for beacons
• Firebase has its own as well:
• https://console.firebase.google.com/

18. • Create a Firebase account and a Firebase
app - https://firebase.google.com
• Links your google account
• Optionally link a google cloud account
– The Firebase SDKs for Cloud Storage store files
directly in Google Cloud Storage buckets
Firebaseaccount

19. Deploy Your site
1. Install node and npm.
2. Install firebase CLI
➢ npm install –g firebase-tools
3. Initialize your app
➢ firebase login
• Link your google account
➢ firebase init
4. Set root folder and put your static content there.
➢ firebase serve
5. Deploy
➢ firebase deploy
Your app will be hosted at “subdomain”.firebase-app.com

20. Demo
https://github.com/roryp/basic_css_js_website

21. Creating an Angular App

22. Creating an Angular App

23. • npm install -g @angular/cli
• ng new wtc
• cd wtc
• ng serve --open
Creating an Angular App

24. • firebase init
➢Which Firebase CLI features?
➢Hosting
➢Select a default Firebase project?
➢Angular Hosting Test
➢What do you want to use as your public directory?
➢distwtc
➢Configure as a single-page app?
➢Yes
Creating an Angular App

25. • ng build –prod
• firebase deploy
–Deploys distwtc
• firebase open hosting:site
Creating an Angular App

27. Demo

28. References
• https://console.firebase.google.com/
• https://firebase.google.com/docs/
• https://github.com/roryp/basic_css_js_website
• Code lab: Friendly Chat web app (about 1ish hours)
• https://codelabs.developers.google.com/codelabs/firebase-web/index.html
• Covers database, storage, auth, messaging, firebase notifications..