Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Hosting with Firebase
Search
Ire Aderinokun
September 22, 2016
Programming
3
730
Hosting with Firebase
For Google Developers Launchpad in Sub-Saharan Africa (Lagos)
Ire Aderinokun
September 22, 2016
Tweet
Share
More Decks by Ire Aderinokun
See All by Ire Aderinokun
Web Accessibility: It Doesn't Have to Be Hard
ireade
4
960
Becoming a GDE & Overcoming Stage Fright
ireade
4
420
Web Components: The Future of Web Applications
ireade
6
1.4k
What about CSS? Progressive Enhancement & CSS (Updated)
ireade
4
410
Building "The Loop" (Introduction to Frontend Development)
ireade
3
260
Demystifying Angular Universal
ireade
5
520
Introduction to UI/UX Design
ireade
9
570
Building Modern Progressive Web Apps
ireade
7
1.5k
What about CSS? Progressive Enhancement & CSS
ireade
9
4k
Other Decks in Programming
See All in Programming
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
700
見た目から始める生産性向上
ikumatadokoro
7
840
新宿ダンジョンを可視化してみた
satoshi7190
2
250
Elm Form Validation
bkuhlmann
0
510
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.3k
使ってみよう Azure AI Document Intelligence
kosmosebi
2
310
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
0
190
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
180
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
GitHub Copilotのススメ
marcy731
1
200
Code Reviews
bkuhlmann
4
890
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Designing for humans not robots
tammielis
248
25k
GraphQLとの向き合い方2022年版
quramy
32
12k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
BBQ
matthewcrist
80
8.8k
Happy Clients
brianwarren
92
6.4k
The Language of Interfaces
destraynor
151
23k
Being A Developer After 40
akosma
57
580k
Documentation Writing (for coders)
carmenintech
60
3.9k
Design by the Numbers
sachag
274
18k
Designing for Performance
lara
601
67k
Transcript
Hosting with Firebase Ire Aderinokun Google Launchpad Build 2016 (Lagos)
Hello! • Ire Aderinokun • User Interface Designer & Front-End
Developer • Head of Technology, Big Cabal Media • Google Developer Expert (Web Technologies)
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
What is Firebase Hosting?
The Firebase Suite
The Firebase Suite
Firebase Hosting is production-grade, web content hosting for developers
“Production Grade”
“Web Content”
“For Developers”
Why Static Hosting?
Increase in Popularity Decrease in Popularity Stack Overflow Developer Survey
2016 (http://stackoverflow.com/research/developer-survey-2016)
The Power of Front-End Frameworks
Progressive Web Applications
Key Features of Firebase Hosting
Served Over a Secure Connection
Zero-configuration SSL is built into Firebase Hosting so content is
always delivered securely
The Importance of HTTPS • Security for Users • Modern
Web APIs require HTTPS (e.g. Service Worker, Push API) • The Future Default
Fast Content Delivery
Each file you upload is cached on SSDs at CDN
edges around the world
None
Rapid Deployment
Using the Firebase CLI, you can get your app up
and running in seconds
firebase deploy
One-Click Rollbacks
Firebase Hosting provides full versioning and release management with one-click
rollbacks
None
Getting Started with Firebase Hosting
4 Simple Steps 1. Create a new Firebase project 2.
Install the Firebase CLI 3. Initialise your application 4. Deploy your website
1. Create a Firebase project
None
2. Install the Firebase CLI
Dependencies • Node.js (> 0.10.0) • NPM
npm install -g firebase-tools
3. Initialise your Application
firebase init
None
firebase.json { “hosting”: { “public”: “app”, “ignore”: [ “firebase.json”, “**/*.*”,
“**/node_modules/**” ] } }
.firebaserc { “projects”: { “default”: “PROJECT_NAME_HERE” } }
4. Deploy your Website
firebase deploy
None
https://YOUR_FIREBASE_APP_NAME.firebaseapp.com
More Features
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
Hooking up a Custom Domain
None
Automatically Secure
Setting up a Staging Environment
1. Create a new Firebase Project
2. Link New Project Under “staging” Alias firebase use --add
None
.firebaserc { “projects”: { “default”: “offline-fx”, “staging”: “offline-fx-staging” } }
3. Deploy from “staging” Environment
Setting up URL Redirects & Rewrites
Redirects { “redirects”: [{ “source”: “/old-url-path”, “destination”: “/new-url-path”, “type”: 301
}] }
Rewrites { “rewrites”: [{ “source”: “**”, “destination”: “/index.html” }] }
Setting Custom Headers
Headers • Cache-Control • Access-Control-Allow-Origin • X-UA-Compatible • X-Content-Type-Options •
X-Frame-Options • X-XSS-Protection • Content-Type
e.g. Access-Control-Allow-Origin { “headers”: [{ “source”: “**/*.@(eot|otf|ttf|ttc|woff|font.css)”, “headers”: [{ “key”:
“Access-Control-Allow-Origin”, “value”: “*” }] }] }
e.g. Cache-Control { “headers”: [{ “source”: “**/*.@(jpg|jpeg|gif|png)”, “headers”: [{ “key”:
“Cache-Control”, “value”: “max-age=7200” }] }] }
Scaling your Application
None
Thank You! @IreAderinokun #LaunchpadDev