feat: better webpack config, layout structure, and true SSR in production

Author: calvinl

.babelrc

@@ -5,9 +5,10 @@
   ],
   "plugins": [
     "react-hot-loader/babel",
+    "transform-es2015-modules-commonjs",
     "transform-class-properties",
     "transform-decorators",
-    "transform-object-rest-spread",
-    ["resolver", { "resolveDirs": ["common"] }]
+    "transform-export-extensions",
+    "transform-object-rest-spread"
   ]
 }

.gitignore

@@ -1,8 +1,12 @@
+npm-error.log
 .env
 node_modules
 npm-debug.log*
 .DS_Store
 
 # ignore built static files
-dist/
-webpack-assets.json
+/dist
+/webpack-assets.json
+
+# webpack-built server files
+server/renderer/*.built.js

common/css/_functions.scss

@@ -0,0 +1,2 @@
+// Import fonts here, from google, or whereever.
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');

common/css/_variables.scss

@@ -0,0 +1,14 @@
+html, body {
+  height: 100%;
+  font-family: 'Open Sans', sans-serif;
+}
+
+body {
+  background-color: $white;
+}
+
+#app {
+  height: 100%;
+  width: 100%;
+  margin: 0 auto;
+}

common/css/base/_fonts.scss

@@ -0,0 +1,9 @@
+// Import bootstrap-sass as needed
+$bootstrap-sass-asset-helper: true;
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/variables";
+
+$screen-lg-min: $app-max-width !global;
+$container-lg: $app-max-width !global;
+
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/mixins";
+@import "~bootstrap-sass/assets/stylesheets/bootstrap/grid";

common/css/base/_overrides.scss

@@ -0,0 +1,9 @@
+// Vendors and resource files (.e.g. variables, mixins, etc)
+@import '../resources/variables';
+@import 'vendors';
+@import '../resources/mixins';
+
+// The following are non-vendor, non-resource files.
+@import 'fonts';
+@import 'overrides';
+@import 'styles';

common/css/base/_styles.scss

@@ -0,0 +1,2 @@
+$white: #fff;
+$dark-gray: #333;