From 2fdd43c307b769f5a4934aedd1f6b1c0ebc8b4a1 Mon Sep 17 00:00:00 2001 From: Saro Vindigni Date: Mon, 10 Dec 2018 16:19:57 +0100 Subject: [PATCH] Create with-firebase-hosting-and-docker example (#5373) * ADD with-firebase-hosting-and-docker example * Improve doc --- .../.env.example | 4 ++ .../.eslintignore | 2 + .../.eslintrc.json | 31 +++++++++ .../.prettierrc | 5 ++ .../Dockerfile | 10 +++ .../with-firebase-hosting-and-docker/LICENSE | 21 ++++++ .../README.md | 63 +++++++++++++++++ .../docker-compose.deploy.yml | 11 +++ .../docker-compose.dev.yml | 13 ++++ .../docker-compose.serve.yml | 13 ++++ .../docker-compose.yml | 7 ++ .../firebase.json | 16 +++++ .../next.config.js | 3 + .../package.json | 69 +++++++++++++++++++ .../src/app/components/App.js | 18 +++++ .../src/app/components/Header.js | 23 +++++++ .../src/app/pages/about.js | 8 +++ .../src/app/pages/index.js | 8 +++ .../src/functions/.babelrc | 19 +++++ .../src/functions/index.js | 28 ++++++++ .../src/functions/lib/firebase.js | 5 ++ .../src/public/placeholder.html | 2 + 22 files changed, 379 insertions(+) create mode 100644 examples/with-firebase-hosting-and-docker/.env.example create mode 100644 examples/with-firebase-hosting-and-docker/.eslintignore create mode 100644 examples/with-firebase-hosting-and-docker/.eslintrc.json create mode 100644 examples/with-firebase-hosting-and-docker/.prettierrc create mode 100644 examples/with-firebase-hosting-and-docker/Dockerfile create mode 100644 examples/with-firebase-hosting-and-docker/LICENSE create mode 100644 examples/with-firebase-hosting-and-docker/README.md create mode 100644 examples/with-firebase-hosting-and-docker/docker-compose.deploy.yml create mode 100644 examples/with-firebase-hosting-and-docker/docker-compose.dev.yml create mode 100644 examples/with-firebase-hosting-and-docker/docker-compose.serve.yml create mode 100644 examples/with-firebase-hosting-and-docker/docker-compose.yml create mode 100644 examples/with-firebase-hosting-and-docker/firebase.json create mode 100644 examples/with-firebase-hosting-and-docker/next.config.js create mode 100644 examples/with-firebase-hosting-and-docker/package.json create mode 100644 examples/with-firebase-hosting-and-docker/src/app/components/App.js create mode 100644 examples/with-firebase-hosting-and-docker/src/app/components/Header.js create mode 100644 examples/with-firebase-hosting-and-docker/src/app/pages/about.js create mode 100644 examples/with-firebase-hosting-and-docker/src/app/pages/index.js create mode 100644 examples/with-firebase-hosting-and-docker/src/functions/.babelrc create mode 100644 examples/with-firebase-hosting-and-docker/src/functions/index.js create mode 100644 examples/with-firebase-hosting-and-docker/src/functions/lib/firebase.js create mode 100644 examples/with-firebase-hosting-and-docker/src/public/placeholder.html diff --git a/examples/with-firebase-hosting-and-docker/.env.example b/examples/with-firebase-hosting-and-docker/.env.example new file mode 100644 index 00000000..9543d3e4 --- /dev/null +++ b/examples/with-firebase-hosting-and-docker/.env.example @@ -0,0 +1,4 @@ +NODE_ENV=development +FB_PROJECTID= +FIREBASE_TOKEN= +GOOGLE_APPLICATION_CREDENTIALS=/app/dist/functions/serviceAccountKey.json diff --git a/examples/with-firebase-hosting-and-docker/.eslintignore b/examples/with-firebase-hosting-and-docker/.eslintignore new file mode 100644 index 00000000..5dd04e1f --- /dev/null +++ b/examples/with-firebase-hosting-and-docker/.eslintignore @@ -0,0 +1,2 @@ +**/node_modules +build/* \ No newline at end of file diff --git a/examples/with-firebase-hosting-and-docker/.eslintrc.json b/examples/with-firebase-hosting-and-docker/.eslintrc.json new file mode 100644 index 00000000..bf91fc68 --- /dev/null +++ b/examples/with-firebase-hosting-and-docker/.eslintrc.json @@ -0,0 +1,31 @@ +{ + "extends": ["airbnb"], + "parser": "babel-eslint", + "rules": { + "import/prefer-default-export": "off", + "react/jsx-boolean-value": 0, + "react/require-default-props": 0, + "react/no-array-index-key": 0, + "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], + "jsx-a11y/anchor-is-valid": 0, + "jsx-a11y/label-has-for": [ + 2, + { + "components": ["Label"], + "required": { + "every": ["nesting", "id"] + }, + "allowChildren": true + } + ] + }, + "globals": { + "window": true, + "document": true, + "navigator": true + }, + "env": { + "es6": true, + "node": true + } +} diff --git a/examples/with-firebase-hosting-and-docker/.prettierrc b/examples/with-firebase-hosting-and-docker/.prettierrc new file mode 100644 index 00000000..2fec1f28 --- /dev/null +++ b/examples/with-firebase-hosting-and-docker/.prettierrc @@ -0,0 +1,5 @@ +{ + "singleQuote": true, + "trailingComma": "all", + "printWidth": 100 +} diff --git a/examples/with-firebase-hosting-and-docker/Dockerfile b/examples/with-firebase-hosting-and-docker/Dockerfile new file mode 100644 index 00000000..c766c98e --- /dev/null +++ b/examples/with-firebase-hosting-and-docker/Dockerfile @@ -0,0 +1,10 @@ +FROM node:8.11.1-alpine AS base + +ARG NODE_ENV +ENV NODE_ENV $NODE_ENV + +# Install package dependencies +RUN yarn global add firebase-tools @google-cloud/functions-emulator --ignore-engines + +RUN mkdir /app +WORKDIR /app diff --git a/examples/with-firebase-hosting-and-docker/LICENSE b/examples/with-firebase-hosting-and-docker/LICENSE new file mode 100644 index 00000000..cd01a936 --- /dev/null +++ b/examples/with-firebase-hosting-and-docker/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2017 Saro Vindigni + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/examples/with-firebase-hosting-and-docker/README.md b/examples/with-firebase-hosting-and-docker/README.md new file mode 100644 index 00000000..83d90516 --- /dev/null +++ b/examples/with-firebase-hosting-and-docker/README.md @@ -0,0 +1,63 @@ +# With Firebase Hosting and Docker example + +## How to use + +### Using `create-next-app` + +Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example: + +```bash +npx create-next-app --example with-firebase-hosting-and-docker with-firebase-hosting-and-docker-app +# or +yarn create next-app --example with-firebase-hosting-and-docker with-firebase-hosting-and-docker-app +``` + +### Download manually + +Download the example: + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-firebase-hosting-and-docker +cd with-firebase-hosting-and-docker +``` + +Set up firebase: + +* create a project through the [firebase web console](https://console.firebase.google.com/) +* grab the projects ID from the web consoles URL: https://console.firebase.google.com/project/ +* update the `.env` with your FB_PROJECTID and FIREBASE_TOKEN ( see .env.example ) +* ADD `serviceAccountKey.json` to your project root + +### Dev next + +```bash +yarn docker:dev +open http://localhost:5000 +``` + +### Firebase serve + +```bash +yarn docker:serve +open http://localhost:3000 +``` + +### Firebase deploy + +```bash +yarn docker:deploy +``` + +## The idea behind the example + +The goal is to host the Next.js app on Firebase Cloud Functions with Firebase Hosting rewrite rules so our app is served from our Firebase Hosting URL, with docker support for a consistent development environment. Each individual `page` bundle is served in a new call to the Cloud Function which performs the initial server render. Docker is entirely dedicated for local development and the deployment process and that Firebase itself will not leverage Docker itself. + +This is based off of the work of @jthegedus in the [with-firebase-hosting](https://github.com/zeit/next.js/tree/canary/examples/with-firebase-hosting) example. + +If you're having issues, feel free to tag @sampsonjoliver in the [issue you create on the next.js repo](https://github.com/zeit/next.js/issues/new) + +## Important + +* The empty `placeholder.html` file is so Firebase Hosting does not error on an empty `public/` folder and still hosts at the Firebase project URL. +* `firebase.json` outlines the catchall rewrite rule for our Cloud Function. +* The [Firebase predeploy](https://firebase.google.com/docs/cli/#predeploy_and_postdeploy_hooks) hooks defined in `firebase.json` will handle linting and compiling of the next app and the functions sourceswhen `firebase deploy` is invoked. The only scripts you should need are `docker:dev`, `docker:serve` and `docker:deploy`. diff --git a/examples/with-firebase-hosting-and-docker/docker-compose.deploy.yml b/examples/with-firebase-hosting-and-docker/docker-compose.deploy.yml new file mode 100644 index 00000000..2f8f64a7 --- /dev/null +++ b/examples/with-firebase-hosting-and-docker/docker-compose.deploy.yml @@ -0,0 +1,11 @@ +version: '3.5' +services: + server: + volumes: + - .:/app + command: sh -c "yarn --production=false && yarn clean && yarn deploy --project "$FB_PROJECTID"" + environment: + NODE_ENV: '${NODE_ENV}' + GOOGLE_APPLICATION_CREDENTIALS: '${GOOGLE_APPLICATION_CREDENTIALS}' + FIREBASE_TOKEN: '${FIREBASE_TOKEN}' + diff --git a/examples/with-firebase-hosting-and-docker/docker-compose.dev.yml b/examples/with-firebase-hosting-and-docker/docker-compose.dev.yml new file mode 100644 index 00000000..05fd8db7 --- /dev/null +++ b/examples/with-firebase-hosting-and-docker/docker-compose.dev.yml @@ -0,0 +1,13 @@ +version: '3.5' +services: + server: + volumes: + - .:/app + command: sh -c "yarn --production=false && yarn dev" + environment: + NODE_ENV: '${NODE_ENV}' + GOOGLE_APPLICATION_CREDENTIALS: '${GOOGLE_APPLICATION_CREDENTIALS}' + FIREBASE_TOKEN: '${FIREBASE_TOKEN}' + ports: + - '3000:3000' + - '5000:5000' diff --git a/examples/with-firebase-hosting-and-docker/docker-compose.serve.yml b/examples/with-firebase-hosting-and-docker/docker-compose.serve.yml new file mode 100644 index 00000000..1ac4e755 --- /dev/null +++ b/examples/with-firebase-hosting-and-docker/docker-compose.serve.yml @@ -0,0 +1,13 @@ +version: '3.5' +services: + server: + volumes: + - .:/app + command: sh -c 'yarn --production=false && yarn clean && yarn build-app && yarn serve --project "$FB_PROJECTID"' + environment: + NODE_ENV: '${NODE_ENV}' + GOOGLE_APPLICATION_CREDENTIALS: '${GOOGLE_APPLICATION_CREDENTIALS}' + FIREBASE_TOKEN: '${FIREBASE_TOKEN}' + ports: + - '3000:3000' + - '5000:5000' diff --git a/examples/with-firebase-hosting-and-docker/docker-compose.yml b/examples/with-firebase-hosting-and-docker/docker-compose.yml new file mode 100644 index 00000000..eb7c8829 --- /dev/null +++ b/examples/with-firebase-hosting-and-docker/docker-compose.yml @@ -0,0 +1,7 @@ +version: '3.5' +services: + server: + build: + context: . + dockerfile: Dockerfile + target: base diff --git a/examples/with-firebase-hosting-and-docker/firebase.json b/examples/with-firebase-hosting-and-docker/firebase.json new file mode 100644 index 00000000..98424236 --- /dev/null +++ b/examples/with-firebase-hosting-and-docker/firebase.json @@ -0,0 +1,16 @@ +{ + "hosting": { + "public": "dist/public", + "rewrites": [ + { + "source": "**/**", + "function": "app" + } + ], + "predeploy": "yarn build-public" + }, + "functions": { + "source": "dist/functions", + "predeploy": "yarn build-funcs && yarn build-app && yarn copy-deps" + } +} diff --git a/examples/with-firebase-hosting-and-docker/next.config.js b/examples/with-firebase-hosting-and-docker/next.config.js new file mode 100644 index 00000000..d58ad066 --- /dev/null +++ b/examples/with-firebase-hosting-and-docker/next.config.js @@ -0,0 +1,3 @@ +module.exports = { + distDir: '../../dist/functions/next', +}; diff --git a/examples/with-firebase-hosting-and-docker/package.json b/examples/with-firebase-hosting-and-docker/package.json new file mode 100644 index 00000000..5fd41c76 --- /dev/null +++ b/examples/with-firebase-hosting-and-docker/package.json @@ -0,0 +1,69 @@ +{ + "name": "next-firebase-functions", + "version": "3.0.0", + "description": + "Host Next.js SSR app on Firebase Cloud Functions with Firebase Hosting redirects and Docker.", + "scripts": { + "dev": "next -p 5000 src/app", + "preserve": "yarn build-public && yarn build-funcs && yarn copy-deps", + "serve": "cd dist/functions && firebase serve -p 3000 --debug -o 0.0.0.0", + "deploy": "cd dist/functions && firebase deploy", + "clean": "rimraf dist && mkdir -p dist/functions", + "build-public": "cpx \"src/public/**/*.*\" \"dist/public\" -C", + "build-funcs": "babel \"src/functions\" --out-dir \"dist/functions\"", + "build-app": "next build \"src/app\"", + "copy-deps": "cpx \"*{package.json,package-lock.json,yarn.lock,serviceAccountKey.json}\" \"dist/functions\" -C", + "install-deps": "cd \"dist/functions\" && yarn install", + "lint": "eslint src", + "lint:fix": "eslint --fix src", + "docker:dev": "docker-compose -f docker-compose.yml -f docker-compose.dev.yml up", + "docker:serve": "docker-compose -f docker-compose.yml -f docker-compose.serve.yml up", + "docker:deploy": "docker-compose -f docker-compose.yml -f docker-compose.deploy.yml up", + "docker:down": "docker-compose down -v", + "docker:sh": "docker-compose exec server sh", + "logs": "firebase functions:log", + "shell": "firebase functions:shell" + }, + "dependencies": { + "body-parser": "^1.18.3", + "compression": "^1.7.3", + "cors": "^2.8.4", + "express": "^4.16.3", + "firebase-admin": "6.0.0", + "firebase-functions": "^2.0.5", + "helmet": "^3.13.0", + "next": "7.0.0", + "prop-types": "^15.6.2", + "react": "16.5.2", + "react-dom": "16.5.2" + }, + "devDependencies": { + "@babel/cli": "^7.1.0", + "@babel/core": "^7.1.0", + "@babel/plugin-proposal-class-properties": "^7.1.0", + "@babel/plugin-proposal-decorators": "^7.1.0", + "@babel/plugin-proposal-object-rest-spread": "^7.0.0", + "@babel/plugin-transform-async-to-generator": "^7.1.0", + "@babel/plugin-transform-runtime": "^7.1.0", + "@babel/preset-env": "^7.1.0", + "babel-eslint": "^10.0.0", + "babel-plugin-module-resolver": "^3.1.1", + "cpx": "^1.5.0", + "eslint": "^5.6.0", + "eslint-config-airbnb": "^17.1.0", + "eslint-config-prettier": "^3.1.0", + "eslint-config-standard": "^12.0.0", + "eslint-plugin-import": "^2.14.0", + "eslint-plugin-jsx-a11y": "^6.1.1", + "eslint-plugin-node": "^7.0.1", + "eslint-plugin-prettier": "^2.6.2", + "eslint-plugin-promise": "^4.0.1", + "eslint-plugin-react": "^7.11.1", + "eslint-plugin-standard": "^4.0.0", + "prettier": "^1.14.3", + "rimraf": "^2.6.2" + }, + "engines": { + "node": "8" + } +} diff --git a/examples/with-firebase-hosting-and-docker/src/app/components/App.js b/examples/with-firebase-hosting-and-docker/src/app/components/App.js new file mode 100644 index 00000000..7dbf0244 --- /dev/null +++ b/examples/with-firebase-hosting-and-docker/src/app/components/App.js @@ -0,0 +1,18 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Header from './Header'; + +const propTypes = { + children: PropTypes.element, +}; + +const App = ({ children }) => ( +
+
+ {children} +
+); + +App.propTypes = propTypes; + +export default App; diff --git a/examples/with-firebase-hosting-and-docker/src/app/components/Header.js b/examples/with-firebase-hosting-and-docker/src/app/components/Header.js new file mode 100644 index 00000000..d6309d60 --- /dev/null +++ b/examples/with-firebase-hosting-and-docker/src/app/components/Header.js @@ -0,0 +1,23 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Link from 'next/link'; + +const propTypes = { + pathname: PropTypes.String, +}; + +const Header = ({ pathname }) => ( +
+ + Home + + - + + About + +
+); + +Header.propTypes = propTypes; + +export default Header; diff --git a/examples/with-firebase-hosting-and-docker/src/app/pages/about.js b/examples/with-firebase-hosting-and-docker/src/app/pages/about.js new file mode 100644 index 00000000..c30a5ef4 --- /dev/null +++ b/examples/with-firebase-hosting-and-docker/src/app/pages/about.js @@ -0,0 +1,8 @@ +import * as React from 'react'; +import App from '../components/App'; + +export default () => ( + +

About Page

+ +); diff --git a/examples/with-firebase-hosting-and-docker/src/app/pages/index.js b/examples/with-firebase-hosting-and-docker/src/app/pages/index.js new file mode 100644 index 00000000..0a570f67 --- /dev/null +++ b/examples/with-firebase-hosting-and-docker/src/app/pages/index.js @@ -0,0 +1,8 @@ +import * as React from 'react'; +import App from '../components/App'; + +export default () => ( + +

Index Page

+ +); diff --git a/examples/with-firebase-hosting-and-docker/src/functions/.babelrc b/examples/with-firebase-hosting-and-docker/src/functions/.babelrc new file mode 100644 index 00000000..ae6d227a --- /dev/null +++ b/examples/with-firebase-hosting-and-docker/src/functions/.babelrc @@ -0,0 +1,19 @@ +{ + "presets": [ + [ + "@babel/preset-env", + { + "targets": { + "node": "8.11.1" + } + } + ] + ], + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-async-to-generator", + "@babel/plugin-proposal-object-rest-spread" + ], + "sourceMaps": false, + "ignore": ["**/node_modules"] +} diff --git a/examples/with-firebase-hosting-and-docker/src/functions/index.js b/examples/with-firebase-hosting-and-docker/src/functions/index.js new file mode 100644 index 00000000..bf26a864 --- /dev/null +++ b/examples/with-firebase-hosting-and-docker/src/functions/index.js @@ -0,0 +1,28 @@ +/* eslint-disable import/no-unresolved,import/extensions */ +import next from 'next'; +import express from 'express'; +import compression from 'compression'; +import helmet from 'helmet'; +import cors from 'cors'; +import bodyParser from 'body-parser'; +import { functions } from './lib/firebase'; + +const nextApp = next({ dev: false, conf: { distDir: 'next' } }); +const handle = nextApp.getRequestHandler(); + +const server = express(); +server.disable('x-powered-by'); +server.use(cors()); +server.use(bodyParser.json()); +server.set('trust proxy', 1); +server.use(compression()); +server.use(helmet()); + +server.get('*', (req, res) => handle(req, res)); + +const app = functions.https.onRequest(async (req, res) => { + await nextApp.prepare(); + return server(req, res); +}); + +export { app }; diff --git a/examples/with-firebase-hosting-and-docker/src/functions/lib/firebase.js b/examples/with-firebase-hosting-and-docker/src/functions/lib/firebase.js new file mode 100644 index 00000000..cb040266 --- /dev/null +++ b/examples/with-firebase-hosting-and-docker/src/functions/lib/firebase.js @@ -0,0 +1,5 @@ +import admin from 'firebase-admin'; +import * as functions from 'firebase-functions'; + +export { functions }; +export const firebase = admin.initializeApp(); diff --git a/examples/with-firebase-hosting-and-docker/src/public/placeholder.html b/examples/with-firebase-hosting-and-docker/src/public/placeholder.html new file mode 100644 index 00000000..84458566 --- /dev/null +++ b/examples/with-firebase-hosting-and-docker/src/public/placeholder.html @@ -0,0 +1,2 @@ +This is never reachable since Firebase Hosting passes all routing to Next.js which has it's own 404 page. It is only here +so that Firebase Hosting has something in the `public/` folder to upload, else it fails on deployment.