A Universal React Stack, semi-automatic route-based code splitting, Hot Module Reloading (HMR), Redux, Apollo GraphQL and more...
More on the selected components of the stack: About
fetchDatastatic methods where available
This solution uses Webpack 2 to produce bundles for both the client and the server code.
The reasoning for using Webpack to bundle both the client and the server is to bring greater interop and extensibility to the table. This will for instance allowing server bundles to handle React components that introduce things like CSS or Images (as and when you add the respective loaders).
Given that we are bundling our server code I have included the
source-map-support module to ensure that we get nice stack traces when executing our code via node.
All the source code is written in ES2015, and I have explicitly kept it to the true specification (bar JSX syntax). As we are following this approach it is unnecessary for us to transpile our source code for the server into ES5, as
node v6 has native support for almost all of the ES2015 syntax. Our client (browser) bundle is however transpiled to ES5 code for maximum browser/device support.
The application configuration is supported by the
dotenv module and it requires you to create a
.env file in the project root (you can use the
.env.example as a base). The
.env file has been explicitly ignored from git as it will typically contain environment sensitive/specific information. In the usual case your continuous deployment tool of choice should configure the specific
.env file that is needed for a target environment.
Front-end Dev Stack includes a few NodeJS dependencies which rely on native code and requires binary downloads (where possible) or local compilation of source code. This is implemented in NodeJS via Node-Gyp.
Currently the following dependencies are using native code:
leveldown: Used by HardSource for caching
compression: ExpressJS compression library
iltorb: Brotli compression
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install node)
brew install yarn)
Note: Without admin rights it's best to download NodeJS locally in some accessible folder and
extend the PATH using
setx to the NodeJS folder. Installation of Yarn seems to work best for this
situation when using
npm install yarn instead of using the MSI installer.
Note: Windows Build Tools are required for Node-Gyp support: Easiest approach would be installation via
npm install --global --production windows-build-tools - alternatively install Visual Studio 2013 or 2015
(be sure to select "Common Tools for Visual C++"). Also have a look here: https://github.com/nodejs/node-gyp#installation
Note: Eventually you have to configure your proxy settings for NPM before any following installation procedures.