Add Firebase functions example (jaredpalmer#422)

* added Firebase functions example

* fixed README.md title
typo fix

examples/with-firebase-functions/.firebaserc

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

examples/with-firebase-functions/.gitignore

@@ -0,0 +1,10 @@
+logs
+*.log
+npm-debug.log*
+.DS_Store
+
+coverage
+node_modules
+build
+public/static
+.env.*.local

examples/with-firebase-functions/README.md

@@ -0,0 +1,38 @@
+# Razzle with Cloud Functions for Firebase example
+
+## How to use
+Download the example [or clone the whole project](https://github.com/jaredpalmer/razzle.git):
+
+```bash
+curl https://codeload.github.com/jaredpalmer/razzle/tar.gz/master | tar -xz --strip=2 razzle-master/examples/with-firebase-functions
+cd with-firebase-functions
+```
+
+Setting up firebase:
+- install Firebase Tools: `npm i -g firebase-tools`
+- create a project at [Firebase console](https://console.firebase.google.com/)
+- replace <firebase-project-id> in `.firebaserc` with the actual project ID
+
+Install it and run:
+
+```bash
+yarn install
+yarn start
+```
+
+Build client and server
+
+```bash
+yarn build
+```
+
+Deploy to firebase
+
+```bash
+yarn deploy
+```
+
+Access your app at `<firebase-project-id>.firebaseapp.com`
+
+## Idea behind the example
+This is a basic example of how to use razzle with firebase functions and firebase hosting.

examples/with-firebase-functions/firebase.json

@@ -0,0 +1,19 @@
+{
+  "hosting": {
+    "public": "build/public",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**/**",
+        "function": "app"
+      }
+    ]
+  },
+  "functions": {
+    "source": "."
+  }
+}

examples/with-firebase-functions/index.js

@@ -0,0 +1,5 @@
+'use strict'
+const functions = require('firebase-functions');
+const app = require('./server/build/server.bundle.js').default;
+
+exports.app = functions.https.onRequest(app)

examples/with-firebase-functions/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "razzle-examples-basic",
+  "version": "0.8.7",
+  "license": "MIT",
+  "scripts": {
+    "start": "razzle start",
+    "build": "razzle build",
+    "test": "razzle test --env=jsdom",
+    "predeploy": "npm run build",
+    "deploy": "firebase deploy"
+  },
+  "dependencies": {
+    "express": "^4.15.2",
+    "firebase-admin": "^5.5.1",
+    "firebase-functions": "^0.7.3",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  },
+  "devDependencies": {
+    "raf": "^3.3.2",
+    "razzle": "^0.8.7"
+  }
+}

examples/with-firebase-functions/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+

examples/with-firebase-functions/razzle.config.js

@@ -0,0 +1,16 @@
+'use strict';
+const path = require('path');
+module.exports = {
+  modify(config, { target, dev }) {
+    const appConfig = config; // stay immutable here
+
+    if (target === 'node' && !dev) {
+      appConfig.entry = path.resolve(__dirname, './src/server.js');
+      appConfig.output.filename = 'server.bundle.js';
+      appConfig.output.path = path.resolve(__dirname, './server/build');
+      appConfig.output.libraryTarget = 'commonjs2';
+    }
+
+    return appConfig;
+  },
+}

examples/with-firebase-functions/src/App.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Helvetica,
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol";
+}

examples/with-firebase-functions/src/App.js

@@ -0,0 +1,6 @@
+import './App.css';
+
+import React from 'react';
+const App = () => <div>Welcome to Razzle.</div>;
+
+export default App;

examples/with-firebase-functions/src/App.test.js

@@ -0,0 +1,10 @@
+import App from './App';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+describe('<App />', () => {
+  test('renders without exploding', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<App />, div);
+  });
+});

examples/with-firebase-functions/src/client.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { hydrate } from 'react-dom';
+import App from './App';
+
+hydrate(<App />, document.getElementById('root'));
+
+if (module.hot) {
+  module.hot.accept();
+}

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

@@ -0,0 +1,21 @@
+import express from 'express';
+import app from './server';
+
+if (module.hot) {
+  module.hot.accept('./server', function() {
+    console.log('🔁  HMR Reloading `./server`...');
+  });
+  console.info('✅  Server-side HMR Enabled!');
+}
+
+const port = process.env.PORT || 3000;
+
+export default express()
+  .use((req, res) => app.handle(req, res))
+  .listen(port, function(err) {
+    if (err) {
+      console.error(err);
+      return;
+    }
+    console.log(`> Started on port ${port}`);
+  });

examples/with-firebase-functions/src/server.js

@@ -0,0 +1,37 @@
+import App from './App';
+import React from 'react';
+import express from 'express';
+import { renderToString } from 'react-dom/server';
+
+const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
+
+const server = express();
+
+server
+  .disable('x-powered-by')
+  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
+  .get('/*', (req, res) => {
+    const markup = renderToString(<App />);
+    res.send(
+      `<!doctype html>
+    <html lang="">
+    <head>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta charSet='utf-8' />
+        <title>Welcome to Razzle</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        ${assets.client.css
+          ? `<link rel="stylesheet" href="${assets.client.css}">`
+          : ''}
+         ${process.env.NODE_ENV === 'production'
+           ? `<script src="${assets.client.js}" defer></script>`
+           : `<script src="${assets.client.js}" defer crossorigin></script>`}
+    </head>
+    <body>
+        <div id="root">${markup}</div>
+    </body>
+</html>`
+    );
+  });
+
+export default server;

examples/with-firebase-functions/src/setupTests.js

@@ -0,0 +1 @@
+import 'raf/polyfill';