Create with-firebase-hosting-and-docker example (#5373)

* ADD with-firebase-hosting-and-docker example

* Improve doc

examples/with-firebase-hosting-and-docker/.env.example

@@ -0,0 +1,4 @@
+NODE_ENV=development
+FB_PROJECTID=<FIREBASE PROJECT>
+FIREBASE_TOKEN=<FIREBASE KEY>
+GOOGLE_APPLICATION_CREDENTIALS=/app/dist/functions/serviceAccountKey.json

examples/with-firebase-hosting-and-docker/.eslintignore

@@ -0,0 +1,2 @@
+**/node_modules
+build/*

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
+  }
+}

examples/with-firebase-hosting-and-docker/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100
+}

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

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.

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/<projectId>
+* 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`.

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}'
+

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'

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'

examples/with-firebase-hosting-and-docker/docker-compose.yml

@@ -0,0 +1,7 @@
+version: '3.5'
+services:
+  server:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      target: base

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"
+  }
+}

examples/with-firebase-hosting-and-docker/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  distDir: '../../dist/functions/next',
+};

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"
+  }
+}

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 }) => (
+  <main>
+    <Header />
+    {children}
+  </main>
+);
+
+App.propTypes = propTypes;
+
+export default App;

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 }) => (
+  <header>
+    <Link href="/">
+      <a className={pathname === '/' ? 'is-active' : ''}>Home</a>
+    </Link>
+    <span> - </span>
+    <Link href="/about">
+      <a className={pathname === '/about' ? 'is-active' : ''}>About</a>
+    </Link>
+  </header>
+);
+
+Header.propTypes = propTypes;
+
+export default Header;

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 () => (
+  <App>
+    <p>About Page</p>
+  </App>
+);

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 () => (
+  <App>
+    <p>Index Page</p>
+  </App>
+);

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"]
+}

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 };

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();

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.