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
790
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
1.1k
Becoming a GDE & Overcoming Stage Fright
ireade
4
470
Web Components: The Future of Web Applications
ireade
6
1.6k
What about CSS? Progressive Enhancement & CSS (Updated)
ireade
4
470
Building "The Loop" (Introduction to Frontend Development)
ireade
3
280
Demystifying Angular Universal
ireade
5
550
Introduction to UI/UX Design
ireade
9
660
Building Modern Progressive Web Apps
ireade
7
1.6k
What about CSS? Progressive Enhancement & CSS
ireade
9
4.5k
Other Decks in Programming
See All in Programming
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
119
44k
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
960
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.4k
Yes, You Can Work on Rails & any other Gem
kaspth
0
110
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
690
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
190
Hack Claude Code with Claude Code
choplin
8
2.8k
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
16
5.9k
コーディングエージェント概観(2025/07)
itsuki_t88
0
120
PHPカンファレンス関西2025 基調講演
sugimotokei
5
920
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
180
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
150
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Why Our Code Smells
bkeepers
PRO
337
57k
Into the Great Unknown - MozCon
thekraken
40
1.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Side Projects
sachag
455
43k
Raft: Consensus for Rubyists
vanstee
140
7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
GitHub's CSS Performance
jonrohan
1031
460k
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