Firebase hosting working

davidgilbertson · Dec 9, 2016 · 134cf04 · 134cf04
1 parent 3d4fdaf
commit 134cf04
Show file tree

Hide file tree

Showing 15 changed files with 8,906 additions and 8,860 deletions.
diff --git a/.firebaserc b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "knowitall-9a92e"
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,5 @@
 .idea
-static
+public
 webpack/jsPackageName.json
 private
 

diff --git a/README.md b/README.md
@@ -1,4 +1,7 @@
 # Know it all
+
+https://knowitall-9a92e.firebaseapp.com/
+
 The goal of know-it-all is to help you discover things 
 that you don't know about web development.
 

diff --git a/app/client/client.js b/app/client/client.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Perf from 'react-addons-perf';
 import App from '../components/App/App.jsx';
 
-window.Perf = Perf;
+if (process.env.NODE_ENV !== `production`) {
+  window.Perf = require(`react-addons-perf`); // eslint-disable-line global-require
+}
 
 // We don't want to inline this data cos it's HUGE
 // We fetch here, but we have already pre-fetched in the <head>

diff --git a/app/components/TableRow/TableRow.jsx b/app/components/TableRow/TableRow.jsx
@@ -139,9 +139,10 @@ class TableRow extends Component {
       { 'table-row--expanded': props.item.get(`isExpanded`) }
     );
 
-    const contentStyle = {
+    const contentStyle = props.item.get(`score`)
+    ? {
       boxShadow: `inset 4px 0 ${props.item.get(`score`).color}`,
-    };
+    } : null;
 
     return (
       <div

diff --git a/app/data/data.json b/app/data/data.json
diff --git a/app/server/appHtml.js b/app/server/appHtml.js
@@ -10,14 +10,16 @@ import {
 
 const data = require(`../data/data.json`);
 
+// TODO (davidg): load polyfilledScriptFileName if the browser doesn't have fetch
+// is there anything else I need to polyfill?
 export default ({ dataFileName = `data.json`, scriptFileName, mode }) => {
   let scriptSrc;
   let styleTag = ``;
 
   if (mode === `production`) {
     scriptSrc = scriptFileName;
 
-    const stylesPath = path.resolve(__dirname, `../../static/styles.css`);
+    const stylesPath = path.resolve(__dirname, `../../public/styles.css`);
     const styles = fs.readFileSync(stylesPath, `utf8`);
 
     styleTag = `<style>${styles}</style>`;

diff --git a/app/server/server.js b/app/server/server.js
@@ -1,19 +1,21 @@
 import express from 'express';
+import compression from 'compression';
 const app = express();
+app.use(compression());
 
 import appHtml from './appHtml.js';
 import { PORT } from '../constants.js';
 
 // In dev mode, generate the html dynamically
-// otherwise, serve everything from static
-// so for testing 'production' locally I'll get the index.html served from static
+// otherwise, serve everything from public
+// so for testing 'production' locally I'll get the index.html served from public
 if (process.env.NODE_ENV !== `production`) {
   app.get(`/`, (req, res) => {
     res.send(appHtml({ mode: `dev` }));
   });
 }
 
-app.use(express.static(`static`));
+app.use(express.static(`public`));
 app.use(express.static(`app/data`)); // default location for data.json
 
 app.listen(PORT, () => {

diff --git a/app/utils/decorateData.js b/app/utils/decorateData.js
@@ -11,7 +11,7 @@ function parseData(items, path = []) {
   for (let i = 0; i < items.length; i++) {
     const item = items[i];
 
-    item.isExpanded = depth < 0;
+    item.isExpanded = depth < 1;
     item.row = rowCount++;
     item.depth = depth;
     item.path = path.slice();

diff --git a/assets/favicon.ico b/assets/favicon.ico
diff --git a/firebase.json b/firebase.json
@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "public",
+    "headers": [
+      {
+        "source": "**/*.@(js|json|ico)",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "max-age=31536000"
+          }
+        ]
+      }
+    ]
+  }
+}
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "heroku-postbuild": "npm run build",
     "start": "node index.js",
     "build": "node webpack/build.js",
+    "deploy": "firebase deploy",
     "dev": "nodemon index.dev.js",
     "test": "eslint ./app ./webpack --color --ext .jsx,.js"
   },
@@ -30,6 +31,7 @@
     "babel-preset-stage-2": "^6.11.0",
     "babel-register": "^6.11.6",
     "classnames": "2.2.5",
+    "compression": "^1.6.2",
     "css-loader": "0.26.1",
     "express": "^4.14.0",
     "extract-text-webpack-plugin": "1.0.1",

diff --git a/webpack/build.js b/webpack/build.js
@@ -10,19 +10,20 @@ const appHtml = require(`../app/server/appHtml`).default;
 
 const rimraf = require(`rimraf`);
 
-rimraf.sync(path.resolve(__dirname, `../static`));
+rimraf.sync(path.resolve(__dirname, `../public`));
 
-config.entry.unshift(`babel-polyfill`);
+fs.mkdirSync(`./public`);
+
+fs.createReadStream(`./assets/favicon.ico`).pipe(fs.createWriteStream(`./public/favicon.ico`));
 
 config.plugins = config.plugins.concat([
-  new webpack.optimize.UglifyJsPlugin({
-    sourceMap: false,
-  }),
   new webpack.DefinePlugin({
     'process.env': {
       NODE_ENV: JSON.stringify(`production`),
     },
   }),
+  new webpack.optimize.UglifyJsPlugin({ sourceMap: true }),
+  new webpack.optimize.DedupePlugin(),
 ]);
 
 config.plugins.push(
@@ -57,10 +58,16 @@ compiler.run((compileError, stats) => {
     chunks: false,
   });
 
+  console.log(stats.toString({
+    chunks: false,
+    colors: true,
+  }));
+
   // get the name of the JS file (including the hash webpack created)
-  const scriptFileName = jsonStats.assetsByChunkName.main.filter(asset => asset.endsWith(`.js`));
+  const scriptFileName = jsonStats.assetsByChunkName.app[0];
+  const polyfilledScriptFileName = jsonStats.assetsByChunkName[`app-with-polyfills`][0];
 
-  // We get the hash for the data file and copy it to static
+  // get the hash for the data file and copy it to public
   fs.readFile(`./app/data/data.json`, `utf8`, (dataFileError, dataJson) => {
     const dataHash = crypto.createHash(`md5`).update(dataJson).digest(`hex`);
     const dataFileName = `data.${dataHash}.json`;
@@ -69,16 +76,18 @@ compiler.run((compileError, stats) => {
     const htmlString = appHtml({
       dataFileName,
       scriptFileName,
+      polyfilledScriptFileName,
       mode: `production`,
     });
 
     // write the data to a new file with the hash in the name
-    // this could be a copy/rename but we already had the file read
-    fs.writeFile(`./static/${dataFileName}`, dataJson, `utf8`, (dataJsonError) => {
+    // this could be a copy/rename but we already
+    // had the file loaded and perf doesn't matter here
+    fs.writeFile(`./public/${dataFileName}`, dataJson, `utf8`, (dataJsonError) => {
       if (dataJsonError) console.error(`Error writing data.json to disk: ${dataJsonError}`);
     });
 
-    fs.writeFile(`./static/index.html`, htmlString, `utf8`, (indexError) => {
+    fs.writeFile(`./public/index.html`, htmlString, `utf8`, (indexError) => {
       if (indexError) console.error(`Error creating index.html: ${indexError}`);
 
       console.timeEnd(`build`);

diff --git a/webpack/config.shared.js b/webpack/config.shared.js
@@ -1,15 +1,19 @@
 const webpack = require(`webpack`);
 const path = require(`path`);
 
-process.env.WEBPACKING = true;
-
 module.exports = {
-  entry: [
-    `./app/client/client.js`,
-  ],
+  entry: {
+    app: [
+      `./app/client/client.js`,
+    ],
+    'app-with-polyfills': [
+      `babel-polyfill`,
+      `./app/client/client.js`,
+    ],
+  },
   output: {
-    path: path.resolve(__dirname, `../static`),
-    filename: `app.[hash].js`,
+    path: path.resolve(__dirname, `../public`),
+    filename: `[name].[hash].js`,
   },
   module: {
     loaders: [
@@ -20,7 +24,7 @@ module.exports = {
       },
     ],
     // noParse: [
-    //   /localforage/,
+      // /localforage/,
     // ],
   },
   resolve: {

diff --git a/webpack/devServer.js b/webpack/devServer.js
@@ -6,7 +6,7 @@ const CONSTANTS = require(`../app/constants.js`);
 
 const contentBase = `http://localhost:${CONSTANTS.DEV_PORT}`;
 
-config.entry.unshift(
+config.entry.app.unshift(
   `webpack-dev-server/client?${contentBase}`,
   `webpack/hot/only-dev-server`
 );
-Original file line number
+Diff line change
@@ -1,5 +1,5 @@
     .idea
-    static
+    public
     webpack/jsPackageName.json
     private
@@ Expand Down @@