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
760
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
1k
Becoming a GDE & Overcoming Stage Fright
ireade
4
440
Web Components: The Future of Web Applications
ireade
6
1.5k
What about CSS? Progressive Enhancement & CSS (Updated)
ireade
4
430
Building "The Loop" (Introduction to Frontend Development)
ireade
3
270
Demystifying Angular Universal
ireade
5
530
Introduction to UI/UX Design
ireade
9
590
Building Modern Progressive Web Apps
ireade
7
1.5k
What about CSS? Progressive Enhancement & CSS
ireade
9
4.1k
Other Decks in Programming
See All in Programming
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
250
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
680
2024 컴포즈 정원사
jisungbin
0
150
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
650
令和トラベルにおけるLLM活用事例:社内ツール開発から得た学びと実践
ippo012
0
210
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
140
仮想ファイルシステムを導入して開発環境のストレージ課題を解消する
segadevtech
2
550
ドメイン駆動設計を実践するために必要なもの
bikisuke
4
330
The Shape of a Service Object
inem
0
520
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
420
Ruby Parser progress report 2024
yui_knk
2
230
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
Faster Mobile Websites
deanohume
304
30k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.6k
KATA
mclloyd
27
13k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
Fantastic passwords and where to find them - at NoRuKo
philnash
48
2.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
1
53
In The Pink: A Labor of Love
frogandcode
139
22k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
120
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Done Done
chrislema
180
16k
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