With Firebase Hosting Example (#2642)

* Rename Firebase Auth example

* Update gitignore to include npm5 lockfile

* Cloud Function

* Add Next app with two pages to demonstrate navigation

* Add Firebase Hosting and configuration to Host & Deploy

* Fix errors in rename for firebase-auth example

* Recommend pkg managers with caches for better perf

* Update with-firebase-hosting example

Fix code

* Update with-firebase-hosting example

Fix npm scripts and package.json files

* Update with-firebase-hosting example

Update README & install scripts

* Update with-firebase-hosting example

Update example package name

* Update with-firebase-hosting example

Fix to use single-quotes

* Update with-firebase-hosting example

VSCode did not like single-quotes! Sorry

* Fix gitignore file

examples/with-firebase-authentication/README.md

@@ -1,13 +1,13 @@
-[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-firebase)
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-firebase-authentication)
 
-# With Firebase example
+# With Firebase Authentication example
 
 ## How to use
 
 Download the example [or clone the repo](https://github.com/zeit/next.js):
 
 ```bash
-curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-firebase
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-firebase-authentication
 cd with-firebase
 ```
 

examples/with-firebase-hosting/.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "<project-name-here>"
+  }
+}

examples/with-firebase-hosting/README.md

@@ -0,0 +1,55 @@
+# With Firebase Hosting example
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-firebase-hosting
+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:
+- 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:
+
+```bash
+npm install
+```
+
+Run Next.js development:
+
+```bash
+npm run next
+```
+
+Run Firebase locally for testing:
+
+```bash
+npm run serve
+```
+
+Deploy it to the cloud with Firebase
+
+```bash
+npm run 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. 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/)
+
+## Important & Caveats
+*   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.
+*   Testing on Firebase locally requires a complete build of the Next.js app. `npm run serve` handles everything required.
+*   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).

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

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

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

@@ -0,0 +1,11 @@
+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

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

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

@@ -0,0 +1,13 @@
+{
+  "name": "app",
+  "version": "1.0.0",
+  "dependencies": {
+    "next": "beta",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1"
+  },
+  "scripts": {
+    "dev": "next",
+    "build": "next build"
+  }
+}

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

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

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

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

examples/with-firebase-hosting/firebase.json

@@ -0,0 +1,14 @@
+{
+  "hosting": {
+    "public": "public",
+    "rewrites": [
+      {
+        "source": "**/**",
+        "function": "next"
+      }
+    ]
+  },
+  "functions": {
+    "source": "functions"
+  }
+}

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

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

examples/with-firebase-hosting/functions/index.js

@@ -0,0 +1,11 @@
+const functions = require('firebase-functions')
+const next = require('next')
+
+var dev = process.env.NODE_ENV !== 'production'
+var app = next({ dev, conf: { distDir: 'next' } })
+var handle = app.getRequestHandler()
+
+exports.next = functions.https.onRequest((req, res) => {
+  console.log('File: ' + req.originalUrl) // log the page.js file that is being requested
+  return app.prepare().then(() => handle(req, res))
+})

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

@@ -0,0 +1,13 @@
+{
+  "name": "functions",
+  "description": "Cloud Functions for Firebase",
+  "version": "1.0.0",
+  "dependencies": {
+    "firebase-admin": "^5.0.1",
+    "firebase-functions": "^0.6.0",
+    "next": "beta",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1"
+  },
+  "private": true
+}

examples/with-firebase-hosting/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "with-firebase-hosting",
+  "version": "1.0.0",
+  "description": "Host Next.js SSR app on Firebase Cloud Functions with Firebase Hosting redirects.",
+  "scripts": {
+    "install": "npm run build-all",
+    "next": "npm run build-firebase && cd \"app\" && npm i && 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",
+    "build-next": "cd \"app\" && npm i && npm run build",
+    "build-firebase": "cd \"functions\" && npm i"
+  },
+  "dependencies": {
+    "next": "^3.0.1-beta.8",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1"
+  }
+}