Merge pull request #25 from RyanCCollins/feat_rc_server_setup

Feat rc server setup

Author: RyanCCollins

Procfile

@@ -0,0 +1 @@
+web: node server.js

README.md

@@ -9,7 +9,7 @@ You can read more about the organizational strategy used in this app in [this Me
 We incorporate an ESLint configuration and follow strictly the [AirBnb JS & JSX style guides](https://github.com/airbnb/javascript).
 
 # What is Feature First?
-In most projects and frameworks, files are organized in a File type first fashion.  For example, your tests exist in a test folder, your styles in a styles folder.  This boilerplate takes a different approach. 
+In most projects and frameworks, files are organized in a File type first fashion.  For example, your tests exist in a test folder, your styles in a styles folder.  This boilerplate takes a different approach.
 
 We encourage encapsulation of features by asking that you organize each feature into a seperate folder (feature-first).  In React, this means that your containers and components exist in their own folders, along with literally every other file that pertains to that one component.  Your actions, reducers, tests, styles, and everything else are all internal to the component they represent.  By decoupling your features from the rest of your app, you set yourself up to reuse your UI components in future projects.  You can thank us later!
 
@@ -40,13 +40,16 @@ To try the example application out or to use the project, follow the instruction
 
    npm run start
 
-   Development server should be running at http://localhost:8080/
+   Your app will be served at: http://0.0.0.0:1337/
 
-4. **Make build**
+## Deployment
+In order to deploy the app, a demo express server setup has been included.  If you peak inside the server folder, you will see an example setup.  The public folder includes all of the files that are generated when running the: `npm run deploy` script.  This includes the production minified bundle.js, index.html and an app folder that includes all image assets.
 
-   npm run build
+The express server can be run with `npm run serve:bundle`.  This will start a static express server and serve the generated assets, just like you would in production.  A Procfile is included, that will run the node server on [Heroku](https://heroku.com) automatically if you push your project to Heroku after running the `npm run deploy` command.
 
-### File Structure
+NOTE: the deployment script will place all your generated assets in the `server/public` folder, where they can be served in production.
+
+## File Structure
 * Some files left out for brevity.  Please reference the files in the [Scalable React Boilerplate](https://github.com/RyanCCollins/feature-first-react-boilerplate) project for an example of the file structure.  The application will ultimately be in use in a production web application project and more info will be posted here when we have production level examples.
 ```
 .
@@ -93,30 +96,31 @@ To try the example application out or to use the project, follow the instruction
 
 ## Scripts
 - **npm run setup**
-
-    Installs the application's dependencies
+  + Installs the application's dependencies
 
 - **npm run test**
+  + Runs unit tests
 
-     Runs unit tests
 - **npm run test:watch**
+  + Watches for changes to run unit tests
 
-     Watches for changes to run unit tests
 - **npm run build**
+  + Bundles the application
 
-     Bundles the application
 - **npm run dev**
+  + Starts webpack development server
 
-     Starts webpack development server
 - **npm run lint**
+  + Runs the linter
 
-     Runs the linter
 - **npm run deploy**
+  + Creates the production ready files within the `/server/public` folder
 
-     Creates the production ready files
 - **npm run clean**
+  + Removes the bundled code and the production ready files
 
-    Removes the bundled code and the production ready files
+- **npm run serve:bundle**
+  + Serve production assets from the `/server/public` folder.
 
 ## Generators
 The boilerplate contains generators for easy project scaffolding.  At the moment, the generator has the following scaffold generating commands built in:
@@ -155,7 +159,7 @@ where <type_of_component> is one of: component, container or page.
 
 The generators use the same feature-first file organization as the rest of the project, encapsulating components within their own folder.
 
-#### **Gotchas**
+### **Gotchas**
 In order to get the import / export to work, the generator does some pattern matching of the comments in the files to place the new imports.  Just don't delete the comments within the root level index.js file in each directory and things will work fine!
 
 From `app/src/container/index.js` or `app/src/component/index.js`
@@ -226,6 +230,8 @@ which will pick up any file with the .test.js postfix and run it through Karma /
 * [x] Add [Grommet](grommet.io) as an optional starter component library
 * [x] Add Webpack stats plugin
 * [x] Dogfood the project and iterate on suggestions
+* [x] Setup production server configuration
+* [ ] Add Jest as testing utility
 * [ ] Create Docker container & automation scripts
 * [ ] Write wiki / other documentation
 

index.html

@@ -1,11 +1,11 @@
 <!doctype html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta http-equiv=X-UA-Compatible content="IE=edge">
     <meta name=viewport content="width=device-width,initial-scale=1">
     <title>Scalable React Boilerplate</title>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
     <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Raleway:400,300,700|Lato:400,300,700' rel='stylesheet' type='text/css'>
   </head>
 <body>

package.json

@@ -25,10 +25,11 @@
     "generate:container": "plop --plopfile config/generators/index.js container",
     "generate:page": "plop --plopfile config/generators/index.js page",
     "lint": "eslint . --ext .js --ext .jsx; exit 0",
-    "deploy": "NODE_ENV=production webpack -p",
+    "deploy": "cross-env NODE_ENV=production webpack -p",
     "start": "npm run dev",
     "clean": "rm -rf app/dist app/build",
-    "setup": "npm install"
+    "setup": "npm install",
+    "serve:bundle": "cross-env NODE_ENV=production PORT=1337 node server.js"
   },
   "repository": {
     "type": "git",
@@ -62,6 +63,7 @@
     "babel-preset-stage-0": "^6.3.13",
     "components": "^0.1.0",
     "css-loader": "^0.23.0",
+    "express": "^4.14.0",
     "expect": "^1.20.2",
     "expect-jsx": "^2.6.0",
     "file-loader": "^0.9.0",

server.js

@@ -0,0 +1,2 @@
+require("babel-core/register");
+var app = require('./server/app');

server/app.js

@@ -0,0 +1,19 @@
+/* eslint-disable */
+const isDeveloping = process.env.NODE_ENV !== 'production';
+const port = isDeveloping ? 1337 : process.env.PORT;
+const path = require('path');
+const express = require('express');
+const app = express();
+
+app.use(express.static(__dirname + '/public'));
+app.get('*', (req, res) => {
+  res.sendFile(path.join(__dirname, 'public/index.html'));
+});
+
+app.listen(port, '0.0.0.0', (err) => {
+  if (err) {
+    return console.warn(err);
+  }
+  return console.info(`==> 😎 Listening on port ${port}. Open http://0.0.0.0:${port}/ in your browser.`);
+});
+/* eslint-enable */

server/public/app/src/components/Navbar/logo.00e7c4cf372ade679404a6cf8f80704f.png

@@ -0,0 +1,16 @@
+<!doctype html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv=X-UA-Compatible content="IE=edge">
+    <meta name=viewport content="width=device-width,initial-scale=1">
+    <title>Scalable React Boilerplate</title>
+    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Raleway:400,300,700|Lato:400,300,700' rel='stylesheet' type='text/css'>
+  </head>
+<body>
+  <!-- The app will bootstrap into this div -->
+  <div id="app"></div>
+  <script src="/app/build/bundle.js"></script>
+<script type="text/javascript" src="/bundle.js"></script></body>
+</html>

server/public/bundle.js

@@ -6,7 +6,7 @@ import Visualizer from 'webpack-visualizer-plugin';
 const ROOT_PATH = path.resolve(__dirname);
 
 const env = process.env.NODE_ENV || 'development';
-const PORT = process.env.PORT || 8080;
+const PORT = process.env.PORT || 1337;
 const HOST = '0.0.0.0'; // Set to localhost if need be.
 
 module.exports = {
@@ -76,7 +76,7 @@ module.exports = {
     },
   },
   output: {
-    path: process.env.NODE_ENV === 'production' ? path.resolve(ROOT_PATH, 'app/dist') : path.resolve(ROOT_PATH, 'app/build'),
+    path: process.env.NODE_ENV === 'production' ? path.resolve(ROOT_PATH, 'server/public') : path.resolve(ROOT_PATH, 'app/build'),
     publicPath: '/',
     filename: 'bundle.js',
   },