Nicolas Garnier
8 years ago
7 changed files with 241 additions and 0 deletions
@ -0,0 +1,79 @@ |
|||
# Firebase SDK for Cloud Functions Quickstart - HTTPS function with Firebase Hosting URL trigger |
|||
|
|||
This quickstart demonstrates using the **Firebase SDK for Cloud Functions** with an HTTPS trigger that's triggered through a Firebase Hosting URL. The function will display a repeated number of "BONG" depending on the hour of the day. |
|||
|
|||
|
|||
## Introduction |
|||
|
|||
The function `bigben` returns an HTML page that display a repeated number of "BONG" depending on the hour of the day. |
|||
|
|||
Further reading: |
|||
|
|||
- [Read more about the Firebase SDK for Cloud Functions](https://firebase.google.com/docs/functions) |
|||
|
|||
|
|||
## Initial setup, build tools and dependencies |
|||
|
|||
### 1. Clone this repo |
|||
|
|||
Clone or download this repo and open the `quickstarts/big-ben` directory. |
|||
|
|||
|
|||
### 2. Create a Firebase project and configure the quickstart |
|||
|
|||
Create a Firebase Project on the [Firebase Console](https://console.firebase.google.com). |
|||
|
|||
Set up your Firebase project by running `firebase use --add`, select your Project ID and follow the instructions. |
|||
|
|||
|
|||
### 3. Install the Firebase CLI and enable Functions on your Firebase CLI |
|||
|
|||
You need to have installed the Firebase CLI. If you haven't run: |
|||
|
|||
```bash |
|||
npm install -g firebase-tools |
|||
``` |
|||
|
|||
> Doesn't work? You may need to [change npm permissions](https://docs.npmjs.com/getting-started/fixing-npm-permissions). |
|||
|
|||
|
|||
## Deploy the app to prod |
|||
|
|||
First you need to install the `npm` dependencies of the functions: |
|||
|
|||
```bash |
|||
cd functions && npm install; cd .. |
|||
``` |
|||
|
|||
This installs locally the Firebase SDK and the Firebase Functions SDK. |
|||
|
|||
Deploy to Firebase using the following command: |
|||
|
|||
```bash |
|||
firebase deploy |
|||
``` |
|||
|
|||
This deploys and activates the `reverseString` Function. |
|||
|
|||
> The first time you call `firebase deploy` on a new project with Functions will take longer than usual. |
|||
|
|||
|
|||
## Try the sample |
|||
|
|||
After deploying the function you can open the following URL in your browser: |
|||
|
|||
``` |
|||
https://<your-project-id>.firebaseapp.com/bigben |
|||
``` |
|||
|
|||
A page containing a repeated number of "BONG" will be displayed. |
|||
|
|||
|
|||
## Contributing |
|||
|
|||
We'd love that you contribute to the project. Before doing so please read our [Contributor guide](../../CONTRIBUTING.md). |
|||
|
|||
|
|||
## License |
|||
|
|||
© Google, 2016. Licensed under an [Apache-2](../../LICENSE) license. |
|||
@ -0,0 +1,12 @@ |
|||
// [START rewriterules] |
|||
{ |
|||
"hosting": { |
|||
"public": "public", |
|||
|
|||
// Add the following rewrites section *within* "hosting". |
|||
"rewrites": [ { |
|||
"source": "/bigben", "function": "bigben" |
|||
} ] |
|||
} |
|||
} |
|||
// [END rewriterules] |
|||
@ -0,0 +1,40 @@ |
|||
/** |
|||
* Copyright 2017 Google Inc. All Rights Reserved. |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
'use strict'; |
|||
|
|||
// [START all]
|
|||
const functions = require('firebase-functions'); |
|||
|
|||
exports.bigben = functions.https.onRequest((req, res) => { |
|||
const hours = (new Date().getHours() % 12) + 1; // london is UTC + 1hr;
|
|||
// [START_EXCLUDE silent]
|
|||
// [START cachecontrol]
|
|||
res.set('Cache-Control', 'public, max-age=300, s-maxage=600'); |
|||
// [END cachecontrol]
|
|||
// [START vary]
|
|||
res.set('Vary', 'Accept-Encoding, X-My-Custom-Header'); |
|||
// [END vary]
|
|||
// [END_EXCLUDE]
|
|||
res.status(200).send(`<!doctype html>
|
|||
<head> |
|||
<title>Time</title> |
|||
</head> |
|||
<body> |
|||
${'BONG '.repeat(hours)} |
|||
</body> |
|||
</html>`); |
|||
}); |
|||
// [END all]
|
|||
@ -0,0 +1,8 @@ |
|||
{ |
|||
"name": "big-ben-functions", |
|||
"description": "A simple endpoint that returns a number of 'BONG' based on the time of day", |
|||
"dependencies": { |
|||
"firebase-admin": "^4.2.1", |
|||
"firebase-functions": "^0.5.5" |
|||
} |
|||
} |
|||
@ -0,0 +1,33 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
<title>Page Not Found</title> |
|||
|
|||
<style media="screen"> |
|||
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; } |
|||
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; } |
|||
#message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; } |
|||
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; } |
|||
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;} |
|||
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; } |
|||
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; } |
|||
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } |
|||
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; } |
|||
@media (max-width: 600px) { |
|||
body, #message { margin-top: 0; background: white; box-shadow: none; } |
|||
body { border-top: 16px solid #ffa100; } |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div id="message"> |
|||
<h2>404</h2> |
|||
<h1>Page Not Found</h1> |
|||
<p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p> |
|||
<h3>Why am I seeing this?</h3> |
|||
<p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p> |
|||
</div> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,65 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
<title>Welcome to Firebase Hosting</title> |
|||
|
|||
<!-- update the version number as needed --> |
|||
<script defer src="/__/firebase/3.9.0/firebase-app.js"></script> |
|||
<!-- include only the Firebase features as you need --> |
|||
<script defer src="/__/firebase/3.9.0/firebase-auth.js"></script> |
|||
<script defer src="/__/firebase/3.9.0/firebase-database.js"></script> |
|||
<script defer src="/__/firebase/3.9.0/firebase-messaging.js"></script> |
|||
<script defer src="/__/firebase/3.9.0/firebase-storage.js"></script> |
|||
<!-- initialize the SDK after all desired features are loaded --> |
|||
<script defer src="/__/firebase/init.js"></script> |
|||
|
|||
<style media="screen"> |
|||
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; } |
|||
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; } |
|||
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; } |
|||
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;} |
|||
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; } |
|||
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; } |
|||
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } |
|||
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; } |
|||
@media (max-width: 600px) { |
|||
body, #message { margin-top: 0; background: white; box-shadow: none; } |
|||
body { border-top: 16px solid #ffa100; } |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div id="message"> |
|||
<h2>Welcome</h2> |
|||
<h1>Firebase Hosting Setup Complete</h1> |
|||
<p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p> |
|||
<a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a> |
|||
</div> |
|||
<p id="load">Firebase SDK Loading…</p> |
|||
|
|||
<script> |
|||
document.addEventListener('DOMContentLoaded', function() { |
|||
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥 |
|||
// // The Firebase SDK is initialized and available here! |
|||
// |
|||
// firebase.auth().onAuthStateChanged(user => { }); |
|||
// firebase.database().ref('/path/to/ref').on('data', snapshot => { }); |
|||
// firebase.messaging().requestPermission().then(() => { }); |
|||
// firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { }); |
|||
// |
|||
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥 |
|||
|
|||
try { |
|||
let app = firebase.app(); |
|||
let features = ['auth', 'database', 'messaging', 'storage'].filter(feature => typeof app[feature] === 'function'); |
|||
document.getElementById('load').innerHTML = `Firebase SDK loaded with ${features.join(', ')}`; |
|||
} catch (e) { |
|||
console.error(e); |
|||
document.getElementById('load').innerHTML = 'Error loading the Firebase SDK, check the console.'; |
|||
} |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
Loading…
Reference in new issue