next -> redux opinionated

.env_example

@@ -9,11 +9,11 @@
 # ==============================================================================
 
 # The host on which to run the server.
-SERVER_HOST=localhost
+HOST=localhost
 
 # The port on which to run the server.
-SERVER_PORT=1337
+PORT=1337
 
 # The port on which to run the client bundle dev server (i.e. used during
 # development only).
-CLIENT_DEVSERVER_PORT=7331
+CLIENT_DEV_PORT=7331

.eslintignore

@@ -1,4 +1,2 @@
-flow-typed/
-tools/flow/
 node_modules/
 build/

.eslintrc

@@ -1,9 +1,6 @@
 {
   "parser": "babel-eslint",
   "extends": "airbnb",
-  "plugins": [
-    "flowtype"
-  ],
   "env": {
     "browser": true,
     "es6": true,
@@ -14,14 +11,8 @@
     "defaultParams": true
   },
   "rules": {
-    // We use the 'import' plugin which allows for cases "flow" awareness.
-    "no-duplicate-imports": 0,
     // A .jsx extension is not required for files containing jsx.
     "react/jsx-filename-extension": 0,
-    // This rule struggles with flow and class properties.
-    "react/sort-comp": 0,
-    // This rule struggles with flow.
-    "react/prop-types": 0,
     // We use global requires in various places, e.g. code splitting instances.
     "global-require": 0
   }

.gitignore

@@ -33,11 +33,8 @@ npm-debug.log
 .vscode
 .history
 
-# flow-typed Lib Defs
-flow-typed/
-
-# Flow Coverage Report
-flow-coverage/
-
 # Happypack
 .happypack
+
+# OSX Files
+.DS_Store

.modernizrrc

@@ -0,0 +1,7 @@
+{
+  "minify": true,
+  "options": [],
+  "feature-detects": [
+    "elem/picture"
+  ]
+}

.nvmrc

@@ -1 +1 @@
-v6.9.2
+v6.9.4

CHANGELOG.md

@@ -9,6 +9,46 @@ I'll map them as follows:
   - Minor: New features or changes to the build tools. Could contain some things that are traditionally know as breaking changes, however, I believe the upgrade path to minor.
   - Patch: Small(ish) fixes/restructuring that I expect will take minimal effort to merge in.
 
+# [13.0.0] - 2017-01-23
+
+### BREAKING
+
+ - Big folder structure refactor, moving items from src/* into the root of the project.
+ - Removes the CONF_ENV variable and instead relies on NODE_ENV for runtime env specification on executing server.
+ - Upgrades to `react-router` v4 beta.
+ - Replaces `code-split-component` with `react-async-component`
+ - Removed `react-hot-loader` as it doesn't play nicely with `react-async-component`, but we still have webpack's default hot module reloading.
+ - Complete restructure of the DefinePlugin special flags, they have been prefixed with "BUILD_FLAG_" to make them more obvious when used in the code. This also helps us distinguish these build-time values from other runtime provided process.env values.
+ - We no longer rely on NODE_ENV to include an optimized version of React/ReactDOM - this caused confusion with booting an application to target a specific NODE_ENV like "staging" or whatever. Now we use webpack's alias feature to resolve React/ReactDOM imports to the correct optimized version of React.
+ - Removes cross-env and refactors the script commands.  You can assign NODE_ENV as and when you need now (for example, to target a .env.production environment configuration file).
+ - Renamed environment variables:
+   - `SERVER_PORT` to `PORT`
+   - `SERVER_HOST` to `HOST`
+   - `CLIENT_DEVSERVER_PORT` to `CLIENT_DEV_PORT`
+ - Renames the `nodeBundlesIncludeNodeModuleFileTypes` config property to `nodeExternalsFileTypeWhitelist`
+ - Refactors the server and serviceworker offline page generation. We now use a set of React components (`ServerHTML` and `HTML`) to manage our HTML in a uniform fashion.
+ - Refactors how we resolve environment specific configuration values. `NODE_ENV` is reserved for specifying a `development` or `production` build now. Use `CONF_ENV` to specify a target environment if you would like to resolve an environment specific .env file.
+ - All config reads are now done through the centralised `config/index.js` helper.
+ - Refactors the client configuration filter rule to be contained within the main configuration and moves the configuration object creation into the server middleware.
+ - Refactors the config folder in various ways.  Cleaning up, restructuring, etc.
+ - Renames the `environmentVars` file and helpers.
+
+### Changed
+
+ - All server/client/shared code all use the shared config helper.
+ - Updated dependencies, including to the latest Webpack official 2 release.
+
+### Added
+
+ - New babel plugins to optimise React production build performance.
+ - Adds new icon sets.
+
+### Fixed
+
+ - Chrome favicon request issue.
+ - Cleans up the package scripts.
+ - Service worker would fail if a subfolder was added to the public folder.
+
 # [12.0.0] - 2017-01-09
 
 ### BREAKING

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016 Sean Matheson
+Copyright (c) 2017 Sean Matheson
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -7,7 +7,7 @@ Note: This is a feature branch of `react-universally`. Please see the [`FEATURE_
 <p align='center'>
   <h1 align='center'>React, Universally</h1>
   <p align='center'><img width='150' src='https://raw.githubusercontent.com/ctrlplusb/assets/master/logos/react-universally.png' /></p>
-  <p align='center'>A starter kit giving you the minimum requirements for a modern universal React application.</p>
+  <p align='center'>A starter kit for universal react applications.</p>
 </p>
 
 ## About
@@ -21,13 +21,13 @@ This starter kit contains all the build tooling and configuration you need to ki
   - 🚄 `express` server.
   - 🎭 `jest` as the test framework.
   - 🖌 Very basic CSS support - it's up to you to extend it with CSS Modules etc.
-  - ✂️ Code splitting - easily define code split points in your source using `code-split-component`.
+  - ✂️ Code splitting - easily define code split points in your source using `react-async-component`.
   - 🌍 Server Side Rendering.
   - 😎 Progressive Web Application ready, with offline support, via a Service Worker.
   - 🐘 Long term browser caching of assets with automated cache invalidation.
   - 📦 All source is bundled using Webpack v2.
-  - 🚀 Full ES2017+ support - use the exact same JS syntax across the entire project (src/tools/config). No more folder context switching! We also only use syntax that is stage-3 or later in the TC39 process.
-  - 🔧 Centralised application configuration with helpers to avoid boilerplate in your code.
+  - 🚀 Full ES2017+ support - use the exact same JS syntax across the entire project. No more folder context switching! We also only use syntax that is stage-3 or later in the TC39 process.
+  - 🔧 Centralised application configuration with helpers to avoid boilerplate in your code. Also has support for environment specific configuration files.
   - 🔥 Extreme live development - hot reloading of ALL changes to client/server source, with auto development server restarts when your application configuration changes.  All this with a high level of error tolerance and verbose logging to the console.
   - ⛑ SEO friendly - `react-helmet` provides control of the page title/meta/styles/scripts from within your components.
   - 🤖 Optimised Webpack builds via HappyPack and an auto generated Vendor DLL for smooth development experiences.
@@ -64,10 +64,10 @@ Now go make some changes to the `Home` component to see the tooling in action.
 
 ## Docs
 
- - [Project Overview](/docs/PROJECT_OVERVIEW.md)
- - [Application Configuration](/docs/APPLICATION_CONFIG.md)
- - [Package Script Commands](/docs/PKG_SCRIPTS.md)
- - [Feature Branches](/docs/FEATURE_BRANCHES.md)
- - [Deploy your very own Server Side Rendering React App in 5 easy steps](/docs/DEPLOY_TO_NOW.md)
- - [FAQ](/docs/FAQ.md)
+ - [Project Overview](/internal/docs/PROJECT_OVERVIEW.md)
+ - [Project Configuration](/internal/docs/PROJECT_CONFIG.md)
+ - [Package Script Commands](/internal/docs/PKG_SCRIPTS.md)
+ - [FAQ](/internal/docs/FAQ.md)
+ - [Feature Branches](/internal/docs/FEATURE_BRANCHES.md)
+ - [Deploy your very own Server Side Rendering React App in 5 easy steps](/internal/docs/DEPLOY_TO_NOW.md)
  - [Changelog](/CHANGELOG.md)

client/index.js

@@ -0,0 +1,67 @@
+/* eslint-disable global-require */
+
+import React from 'react';
+import { render } from 'react-dom';
+import { Provider as ReduxProvider } from 'react-redux';
+import { rehydrateJobs } from 'react-jobs/ssr';
+import BrowserRouter from 'react-router-dom/BrowserRouter';
+import { withAsyncComponents } from 'react-async-component';
+import { configureStore } from '../shared/redux/configureStore';
+
+import './polyfills';
+
+import DemoApp from '../shared/components/DemoApp';
+
+// Get the DOM Element that will host our React application.
+const container = document.querySelector('#app');
+
+// Create our Redux store.
+const store = configureStore(
+  // Server side rendering would have mounted our state on this global.
+  window.__APP_STATE__, // eslint-disable-line no-underscore-dangle
+);
+
+/**
+ * Renders the given React Application component.
+ */
+function renderApp(TheApp) {
+  // Firstly, define our full application component, wrapping the given
+  // component app with a browser based version of react router.
+  const app = (
+    <ReduxProvider store={store}>
+      <BrowserRouter>
+        <TheApp />
+      </BrowserRouter>
+    </ReduxProvider>
+  );
+
+  // We use the react-async-component in order to support code splitting of
+  // our bundle output. It's important to use this helper.
+  // @see https://github.com/ctrlplusb/react-async-component
+  withAsyncComponents(app).then(({ appWithAsyncComponents }) =>
+    render(appWithAsyncComponents, container),
+  );
+
+  rehydrateJobs(app).then(({ appWithJobs }) =>
+    render(appWithJobs, container),
+  );
+}
+
+// Execute the first render of our app.
+renderApp(DemoApp);
+
+// This registers our service worker for asset caching and offline support.
+// Keep this as the last item, just in case the code execution failed (thanks
+// to react-boilerplate for that tip.)
+require('./registerServiceWorker');
+
+// The following is needed so that we can support hot reloading our application.
+if (process.env.BUILD_FLAG_IS_DEV && module.hot) {
+  // Accept changes to this file for hot reloading.
+  module.hot.accept('./index.js');
+  // Any changes to our App will cause a hotload re-render.
+  module.hot.accept(
+    '../shared/components/DemoApp',
+    () => renderApp(require('../shared/components/DemoApp').default),
+  );
+}

client/polyfills/index.js

@@ -0,0 +1,18 @@
+/* eslint-disable no-console */
+
+import Modernizr from 'modernizr';
+
+// This is just an illustrative example.  Here you are testing the client's
+// support for the "picture" element, and if it isn't supported then you
+// load a polyfill.
+if (!Modernizr.picture) {
+  console.log('Client does not support "picture", polyfilling it...');
+  // If you want to use the below do a `yarn add picturefill --exact` and then
+  // uncomment the lines below:
+  /*
+  require('picturefill');
+  require('picturefill/dist/plugins/mutation/pf.mutation');
+  */
+} else {
+  console.log('Client has support for "picture".');
+}

src/client/registerServiceWorker.js → client/registerServiceWorker.js

@@ -1,17 +1,19 @@
-// We use the offline-plugin to generate a service worker.  See the webpack
-// config for more details.
-//
-// We need to ensure that the runtime is installed so that the generated
-// service worker is executed.
-//
-// We will only be doing this for production builds.
+/**
+ * We use the offline-plugin to generate a service worker.  See the webpack
+ * config for more details.
+ *
+ * We need to ensure that the runtime is installed so that the generated
+ * service worker is executed.
+ *
+ * NOTE: We only enable the service worker for non-development environments.
+ */
 
-import { safeConfigGet } from '../shared/utils/config';
+import config from '../config';
 
-if (process.env.NODE_ENV === 'production') {
+if (!process.env.BUILD_FLAG_IS_DEV) {
   // We check the shared config, ensuring that the service worker has been
   // enabled.
-  if (safeConfigGet(['serviceWorker', 'enabled'])) {
+  if (config('serviceWorker.enabled')) {
     const OfflinePluginRuntime = require('offline-plugin/runtime');
 
     // Install the offline plugin, which instantiates our service worker and app

config/components/ClientConfig.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import serialize from 'serialize-javascript';
+import filterWithRules from '../../shared/utils/objects/filterWithRules';
+import values from '../values';
+
+// Filter the config down to the properties that are allowed to be included
+// in the HTML response.
+const clientConfig = filterWithRules(
+  // These are the rules used to filter the config.
+  values.clientConfigFilter,
+  // The config values to filter.
+  values,
+);
+
+const serializedClientConfig = serialize(clientConfig);
+
+/**
+ * A react component that generates a script tag that binds the allowed
+ * values to the window so that config values can be read within the
+ * browser.
+ *
+ * They get bound to window.__CLIENT_CONFIG__
+ */
+function ClientConfig({ nonce }) {
+  return (
+    <script
+      type="text/javascript"
+      nonce={nonce}
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{
+        __html: `window.__CLIENT_CONFIG__=${serializedClientConfig}`,
+      }}
+    />
+  );
+}
+
+ClientConfig.propTypes = {
+  nonce: React.PropTypes.string.isRequired,
+};
+
+export default ClientConfig;