with-firebase-hosting improvements & fixes (#3886)

* Next.js v5 update, _error & _document bugs fixes

* document clean script

* remove old build artefact

* add babelrc

* reset next.js version to 'latest' from '^5.0.0'

* typo in readme

* format code

* remove _files as they were a fix for a solved, but unreleased problem

examples/with-firebase-hosting/.gitignore

@@ -0,0 +1 @@
+dist/

examples/with-firebase-hosting/README.md

@@ -20,48 +20,56 @@ curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2
 cd with-firebase-hosting
 ```
 
-It is recommended to use a package manager that uses a lockfile and caching for faster dev/test cycles:
-- [Yarn](https://github.com/yarnpkg/yarn)
-- [npm5.1.x](https://github.com/npm/npm)
-- [pnpm](https://github.com/pnpm/pnpm)
-
 Set up firebase:
-- install Firebase Tools: `npm i -g firebase-tools`
-- 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 `.firebaserc` default project ID to the newly created project
 
-Install project:
+* install Firebase Tools: `npm i -g firebase-tools`
+* 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 `.firebaserc` default project ID to the newly created project
+* login to the Firebase CLI tool with `firebase login`
+
+#### Install project:
 
 ```bash
 npm install
 ```
 
-Run Next.js development:
+#### Run Next.js development:
 
 ```bash
-npm run next
+npm run dev
 ```
 
-Run Firebase locally for testing:
+#### Run Firebase locally for testing:
+
+Unfortunately I have been unable to get any combination of
 
 ```bash
-npm run serve
+firebase serve --only functions,hosting
 ```
 
-Deploy it to the cloud with Firebase:
+to locally host the built Next.js app as expected. [This issue is where solutions are being explored](https://github.com/firebase/firebase-tools/issues/535) and they will be shared here and on the [Next.js repo's similar issue](https://github.com/zeit/next.js/issues/3167) when discovered.
+
+#### Deploy it to the cloud with Firebase:
 
 ```bash
 npm run deploy
 ```
 
+#### Clean dist folder
+
+```bash
+npm run clean
+```
+
 ## 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. Each individual `page` bundle is served in a new call to the Cloud Function which performs the initial server render.
 
 This is based off of the work at https://github.com/geovanisouza92/serverless-firebase & https://github.com/jthegedus/firebase-functions-next-example as described [here](https://medium.com/@jthegedus/next-js-on-cloud-functions-for-firebase-with-firebase-hosting-7911465298f2).
 
-## Important / Caveats
+## 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 empty `placeholder.html` file is so Firebase Hosting does not error on an empty `public/` folder and still hosts at the Firebase project URL.
-*   Testing on Firebase locally requires a complete build of the Next.js app. `npm run serve` handles everything required.
+* `firebase.json` outlines the catchall rewrite rule for our Cloud Function.
-*   **Any npm modules dependencies used in the Next.js app (`app/` folder) must also be installed as dependencies for the Cloud Functions project (`functions` folder).**
+* The [Firebase predeploy](https://firebase.google.com/docs/cli/#predeploy_and_postdeploy_hooks) hooks run most of the npm scripts when `npm run deploy` runs `firebase deploy`. The only scripts you should need are `dev`, `clean` and `deploy`.

examples/with-firebase-hosting/app/components/Header.js

@@ -1,11 +0,0 @@
-import Link from 'next/link'
-
-export default ({ pathname }) =>
-  <header>
-    <Link href='/'>
-      <a className={pathname === '/' && 'is-active'}>Home</a>
-    </Link>{' '}
-    <Link href='/about'>
-      <a className={pathname === '/about' && 'is-active'}>About</a>
-    </Link>
-  </header>

examples/with-firebase-hosting/app/next.config.js

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

examples/with-firebase-hosting/app/package.json

@@ -1,13 +0,0 @@
-{
-  "name": "app",
-  "description": "Next.js React SSR App",
-  "dependencies": {
-    "next": "latest",
-    "react": "16.0.0",
-    "react-dom": "16.0.0"
-  },
-  "scripts": {
-    "dev": "next",
-    "build": "next build"
-  }
-}

examples/with-firebase-hosting/firebase.json

@@ -1,14 +1,17 @@
 {
   "hosting": {
-    "public": "public",
+    "public": "dist/public",
     "rewrites": [
       {
         "source": "**/**",
         "function": "next"
       }
-    ]
+    ],
+    "predeploy": "yarn build-public"
   },
   "functions": {
-    "source": "functions"
+    "source": "dist/functions",
+    "predeploy":
+      "yarn build-funcs && yarn build-app && yarn copy-deps && yarn install-deps"
   }
 }

examples/with-firebase-hosting/functions/.gitignore

@@ -1 +0,0 @@
-next

examples/with-firebase-hosting/functions/package.json

@@ -1,11 +0,0 @@
-{
-  "name": "functions",
-  "description": "Cloud Functions for Firebase",
-  "dependencies": {
-    "firebase-admin": "5.3.0",
-    "firebase-functions": "0.6.3",
-    "next": "latest",
-    "react": "16.0.0",
-    "react-dom": "16.0.0"
-  }
-}

examples/with-firebase-hosting/package.json

@@ -1,19 +1,35 @@
 {
   "name": "with-firebase-hosting",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description":
     "Host Next.js SSR app on Firebase Cloud Functions with Firebase Hosting redirects.",
   "scripts": {
-    "install-app": "cd \"app/\" && npm i",
+    "dev": "next src/app",
-    "install-functions": "cd \"functions/\" && npm i",
+    "serve":
-    "postinstall": "npm run install-app && npm run install-functions",
+      "echo \"for details see:\n\thttps://github.com/firebase/firebase-tools/issues/535 \n\thttps://github.com/zeit/next.js/issues/3167\";",
-    "next": "cd \"app\" && npm run dev",
-    "preserve": "npm run build-all",
-    "serve": "firebase serve",
-    "predeploy": "npm run build-all",
     "deploy": "firebase deploy",
-    "build-all": "npm run build-next && npm run build-firebase",
+    "clean": "rimraf \"dist/functions\" && rimraf \"dist/public\"",
-    "build-next": "cd \"app\" && npm i && npm run build",
+    "build-public": "cpx \"src/public/**/*.*\" \"dist/public\" -C",
-    "build-firebase": "cd \"functions\" && npm i"
+    "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}\" \"dist/functions\"",
+    "install-deps": "cd \"dist/functions\" && npm i"
+  },
+  "dependencies": {
+    "firebase-admin": "5.8.1",
+    "firebase-functions": "^0.8.1",
+    "next": "latest",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.0.0-beta.40",
+    "@babel/core": "^7.0.0-beta.40",
+    "@babel/preset-env": "^7.0.0-beta.40",
+    "@firebase/app-types": "^0.1.2",
+    "cpx": "^1.5.0",
+    "prettier": "^1.10.2",
+    "rimraf": "^2.6.2"
   }
 }

examples/with-firebase-hosting/src/app/components/App.js

@@ -1,9 +1,11 @@
+import React from 'react'
 import Header from './Header'
 
-const App = ({ children }) =>
+const App = ({ children }) => (
   <main>
     <Header />
     {children}
   </main>
+)
 
 export default App

examples/with-firebase-hosting/src/app/components/Header.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import Link from 'next/link'
+
+export default ({ pathname }) => (
+  <header>
+    <Link href='/'>
+      <a className={pathname === '/' ? 'is-active' : ''}>Home</a>
+    </Link>{' '}
+    <Link href='/about'>
+      <a className={pathname === '/about' ? 'is-active' : ''}>About</a>
+    </Link>
+  </header>
+)

examples/with-firebase-hosting/src/app/next.config.js

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

examples/with-firebase-hosting/src/app/pages/about.js

@@ -1,6 +1,7 @@
 import App from '../components/App'
 
-export default () =>
+export default () => (
   <App>
     <p>About Page</p>
   </App>
+)

examples/with-firebase-hosting/src/app/pages/index.js

@@ -1,6 +1,7 @@
 import App from '../components/App'
 
-export default () =>
+export default () => (
   <App>
     <p>Index Page</p>
   </App>
+)

examples/with-firebase-hosting/src/functions/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "env",
+      {
+        "targets": {
+          "node": "6.11.5"
+        }
+      }
+    ]
+  ]
+}