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.2k
Other Decks in Programming
See All in Programming
Successful with Signals: 3 Rules for Your Architecture
manfredsteyer
PRO
0
130
NEWTにおけるiOS18対応の進め方
ryu1sazae
0
330
書籍『LangChainとLangGraphによるRAG・AIエージェント[実践]入門』の紹介
os1ma
2
120
Modern Angular with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
170
組織に自動テストを書く文化を根付かせる戦略(2024秋版) / Building Automated Test Culture 2024 Autumn Edition
twada
PRO
8
3.5k
レイトレ合宿10 レンダラー紹介 / Renderer Introduction, Ray Tracing Camp 10
shocker_0x15
0
630
Going Staff - Keynote edition
pragtob
0
350
モジュラモノリス、その前に / Modular monolith, before that
euglena1215
8
750
(Deep|Web) Link support with expo-router
mrtry
0
190
MLOps in Mercari Group’s Trust and Safety ML Team
cjhj
1
130
sqlcを利用してsqlに型付けを
kamiyam
0
250
.NET Aspireのクラウド対応検証: Azureと他環境での実践
ymd65536
1
660
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4.1k
It's Worth the Effort
3n
183
27k
Optimizing for Happiness
mojombo
375
69k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
40
2.1k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
46
4.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
Code Reviewing Like a Champion
maltzj
519
39k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
327
21k
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