Update server rendering variables and configuration

calvinl · calvinl · commit d96b9f5ba41e · 2017-06-26T15:05:24.000-04:00
diff --git a/common/layouts/server.html b/common/layouts/server.html
@@ -5,7 +5,8 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width height=device-height" />
   <link rel="shortcut icon" type="image/x-icon" href="<%= favicon %>">
-  <link type="text/css" rel="stylesheet" href="<%= stylesheet %>" />
+  <link type="text/css" rel="stylesheet" href="<%= vendorCss %>" />
+  <link type="text/css" rel="stylesheet" href="<%= appCss %>" />
 </head>
 <body>
   <div id="app"><%= html %></div>
diff --git a/server/config.js b/server/config.js
@@ -1,9 +1,10 @@
-'use strict';
+require('dotenv-safe').load();
 
-const isDev = process.env.NODE_ENV === 'development';
+const { NODE_ENV, APPLICATION_PORT, ASSET_URL } = require('../webpack/constants');
+const isDev = NODE_ENV === 'development';
 const configFile = isDev ? 'development' : 'production';
 const webpackConfig = require(`../webpack/${configFile}`).default;
-const applicationPort = process.env.APPLICATION_PORT || (isDev ? 3000 : 80);
+const applicationPort = APPLICATION_PORT || 3000;
 import packageJson from '../package.json';
 
 export default {
@@ -13,5 +14,5 @@ export default {
 
   // launch environment
   port: applicationPort,
-  assetHost: process.env.ASSET_HOST || webpackConfig.output.publicPath
+  assetUrl: ASSET_URL || webpackConfig.output.publicPath
 };
diff --git a/server/index.js b/server/index.js
@@ -1,9 +1,17 @@
 require('babel-register');
 
+const fs = require('fs');
+const { addPath } = require('app-module-path');
+
 // Adds common/js to the app module path so we can access local modules without
 // having to use relative paths on the server-side. This is done on the client
 // side using webpack's `resolve`.
-require('app-module-path').addPath('common/js');
+addPath('common/js');
+
+// HTML files are read as pure strings
+require.extensions['.html'] = (module, filename) => {
+  module.exports = fs.readFileSync(filename, 'utf8');
+};
 
 // css-modules-require-hook package allows us to require css files on the server.
 require('css-modules-require-hook')({
diff --git a/server/render.js b/server/render.js
@@ -2,17 +2,12 @@
 import { template } from 'lodash';
 import { renderToString } from 'react-dom/server';
 import config from './config';
-import fs from 'fs';
-
-// Tell node.js to load html files as a string
-require.extensions['.html'] = (module, filename) => {
-  module.exports = fs.readFileSync(filename, 'utf8');
-};
 
+const { NODE_ENV } = process.env;
 const compile = template(require('../common/layouts/server.html'));
-const env = process.env.NODE_ENV || 'development';
+const env = NODE_ENV || 'development';
 
-export default function render(component, initialState) {
+export default function render(component, initialState = {}) {
   if (env === 'development') {
     global.ISOTools.refresh();
   }
@@ -23,9 +18,10 @@ export default function render(component, initialState) {
   const vendorJs = assets.javascript.vendor;
   const appJs = assets.javascript.app;
   const html = renderToString(component);
-  const stylesheet = env === 'development'
-    ? config.assetHost + 'styles.css'
-    : assets.styles.app;
+  const vendorCss = assets.styles.vendor;
+  const appCss = assets.styles.app;
 
-  return compile({ html, title, favicon, stylesheet, vendorJs, appJs, initialState });
+  return compile(
+    { html, title, favicon, vendorCss, appCss, vendorJs, appJs, initialState }
+  );
 }
