added babel 6 support.

BerndWessels · Dec 17, 2015 · ee9b465 · ee9b465
1 parent 0c5c5b3
commit ee9b465
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 54 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,48 +1,41 @@
 {
-  "stage": 0,
+  "presets": [
+    "es2015",
+    "react",
+    "stage-0"
+  ],
   "env": {
     "development": {
       "plugins": [
         "babel-relay-plugin-loader",
-        "react-transform"
-      ],
-      "sourceMaps": "inline",
-      "optional": [
-        "runtime",
-        "es7.decorators",
-        "es7.classProperties"
-      ],
-      "extra": {
-        "react-transform": {
-          "transforms": [
-            {
-              "transform": "react-transform-hmr",
-              "imports": [
-                "react"
-              ],
-              "locals": [
-                "module"
-              ]
-            },
-            {
-              "transform": "react-transform-catch-errors",
-              "imports": [
-                "react",
-                "redbox-react"
-              ]
-            }
-          ]
-        }
-      }
+        [
+          "react-transform",
+          {
+            "transforms": [
+              {
+                "transform": "react-transform-hmr",
+                "imports": [
+                  "react"
+                ],
+                "locals": [
+                  "module"
+                ]
+              },
+              {
+                "transform": "react-transform-catch-errors",
+                "imports": [
+                  "react",
+                  "redbox-react"
+                ]
+              }
+            ]
+          }
+        ]
+      ]
     },
     "production": {
       "plugins": [
         "babel-relay-plugin-loader"
-      ],
-      "optional": [
-        "runtime",
-        "es7.decorators",
-        "es7.classProperties"
       ]
     }
   }

diff --git a/README.md b/README.md
@@ -1,8 +1,25 @@
 # Overview
 
-This is a template you can fork and clone to develop React SPA Websites.
+This is a template you can fork and clone to develop data driven React/Relay SPA Websites using a single GraphQL endpoint.
 
-It also shows how to integrate access to a database like mysql or postgres.
+It also shows how to integrate access to databases like mysql or postgres.
+
+# Babel 6
+
+Starting with version 0.2.0 we moved on to Babel 6.
+
+If for any reason you have to stick to Babel 5 then use 0.1.x versions of this repo.
+
+Some of the modules might still be a bit wonky since Babel 6 support is just slowly making it into the eco-system.
+
+    "babel-plugin-react-transform": "^2.0.0-beta1",
+    "babel-preset-es2015": "^6.0.0",
+    "babel-preset-react": "^6.0.0",
+    "babel-preset-stage-0": "^6.0.0",
+
+Make sure you get the latest versions. Otherwise you might run into bugs that have already been fixed.
+
+Also keep an eye on `babel-plugin-react-transform`. It is still experimental but will hopefully soon become stable.
 
 # Features
 * React
@@ -11,7 +28,7 @@ It also shows how to integrate access to a database like mysql or postgres.
 * MySQL
 * Webpack
 * Heavily commented webpack configuration with reasonable defaults.
-* ES6, and ES7 support with babel.js.
+* Latest JSX, ES6, and ES7 support with babel 6.
 * Source maps included in all builds.
 * Development server with live reload.
 * Production builds with cache busting and asset minification.
@@ -56,6 +73,19 @@ Now in another console you can start developing with `npm start`
 
 That should automatically open a browser window on port 3000 and you are ready to go.
 
+# Build Production
+
+To build the production version of the client you first update/create the graphql schema `npm run schema:update`
+
+Then run `npm run build`
+
+This will create a `dist` folder with all the static production files and resources.
+
+You can copy the `dist` content now to your production environment.
+
+If you want to run the production version locally to make sure it works, you can run `npm run build:serve`.
+This will serve the `dist` folder on port `8080`. Just make sure you serve the schema as well.
+
 ## Scripts
 
 * `npm start` - start development server, try it by opening `http://localhost:8080/`

diff --git a/data/database/db.js b/data/database/db.js
@@ -22,7 +22,7 @@ import Sequelize from 'sequelize';
      * Create the database connection.
      */
     var sequelize = new Sequelize('manapaho', 'root', 'abcDEF123', {
-      host: '192.168.101.92',
+      host: '192.168.101.44',
       dialect: 'mysql',
       pool: {
         max: 5,

diff --git a/package.json b/package.json
@@ -1,16 +1,17 @@
 {
   "name": "react-webpack",
-  "version": "0.1.2",
-  "description": "React Relay SQL Webpack SPA Example.",
+  "version": "0.2.0",
+  "description": "React Relay SQL Webpack SPA Babel6 Example.",
   "main": "index.js",
   "scripts": {
     "start": "webpack-dev-server --history-api-fallback --inline --progress --hot --watch",
     "build": "webpack --config webpack.build.js --bail -p",
-    "postinstall": "babel-node --eval \"require('./scripts/externalsUpdate')().catch(err => console.error(err.stack))\"",
-    "externals:update": "babel-node --eval \"require('./scripts/externalsUpdate')().catch(err => console.error(err.stack))\"",
-    "database:fake": "babel-node --eval \"require('./scripts/databaseFake')().catch(err => console.error(err.stack))\"",
-    "schema:update": "babel-node --eval \"require('./scripts/schemaUpdate')().catch(err => console.error(err.stack))\"",
-    "schema:serve": "babel-node --eval \"require('./scripts/schemaServe')().catch(err => console.error(err.stack))\""
+    "build:serve": "babel-node --eval \"var script = require('./scripts/buildServe'); script.default().catch(err => console.error(err.stack))\"",
+    "postinstall": "babel-node --eval \"var script = require('./scripts/externalsUpdate'); script.default().catch(err => console.error(err.stack))\"",
+    "externals:update": "babel-node --eval \"var script = require('./scripts/externalsUpdate'); script.default().catch(err => console.error(err.stack))\"",
+    "database:fake": "babel-node --eval \"var script = require('./scripts/databaseFake'); script.default().catch(err => console.error(err.stack))\"",
+    "schema:update": "babel-node --eval \"var script = require('./scripts/schemaUpdate'); script.default().catch(err => console.error(err.stack))\"",
+    "schema:serve": "babel-node --eval \"var script = require('./scripts/schemaServe'); script.default().catch(err => console.error(err.stack))\""
   },
   "repository": {
     "type": "git",
@@ -25,6 +26,7 @@
   },
   "dependencies": {
     "bootstrap": "^3.0.0",
+    "history": "1.13.1",
     "lodash": "^3.0.0",
     "mysql": "^2.0.0",
     "react": "^0.14.0",
@@ -37,14 +39,15 @@
   },
   "devDependencies": {
     "autoprefixer": "^6.0.0",
-    "babel": "^5.0.0",
-    "babel-core": "^5.0.0",
-    "babel-eslint": "^4.0.0",
-    "babel-loader": "^5.0.0",
-    "babel-plugin-react-transform": "^1.0.0",
+    "babel-core": "^6.0.0",
+    "babel-eslint": "^5.0.0-beta4",
+    "babel-loader": "^6.0.0",
+    "babel-plugin-react-transform": "^2.0.0-beta1",
+    "babel-preset-es2015": "^6.0.0",
+    "babel-preset-react": "^6.0.0",
+    "babel-preset-stage-0": "^6.0.0",
     "babel-relay-plugin": "^0.6.0",
     "babel-relay-plugin-loader": "^0.6.0",
-    "babel-runtime": "^5.0.0",
     "browser-sync": "^2.0.0",
     "browser-sync-webpack-plugin": "^1.0.0",
     "clean-webpack-plugin": "^0.1.0",
@@ -59,7 +62,7 @@
     "graphiql": "^0.4.0",
     "graphql": "^0.4.0",
     "graphql-relay": "^0.3.0",
-    "history": "^1.0.0",
+    "html-loader": "^0.4.0",
     "html-webpack-plugin": "^1.0.0",
     "isparta-instrumenter-loader": "^1.0.0",
     "jasmine-core": "^2.0.0",

diff --git a/scripts/buildServe.js b/scripts/buildServe.js
@@ -0,0 +1,33 @@
+/**
+ * Manapaho (https://github.com/manapaho/)
+ *
+ * Copyright © 2015 Manapaho. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+import path from 'path';
+import express from'express';
+import task from './lib/task';
+
+/**
+ * Serves the production build.
+ */
+export default task('serve build', async () => {
+  // Development data port.
+  const PORT = 8080;
+  // Create an endpoint.
+  var server = express();
+  // Serve the static build files.
+  server.use(express.static(path.resolve(__dirname, '../dist')));
+  // Log every incoming query.
+  server.use((req, res, next) => {
+    console.log('Time:', Date.now());
+    next();
+  });
+  // Run the server.
+  server.listen(PORT, () => console.log(
+    `Server is now running on http://localhost:${PORT}`
+  ));
+});
diff --git a/webpack.build.js b/webpack.build.js
@@ -13,6 +13,7 @@
 
 // Force production mode for all build components.
 process.env['BABEL_ENV'] = 'production';
+process.env['NODE_ENV'] = 'production';
 
 module.exports = require('./webpack.make')({
   BUILD: true,

diff --git a/webpack.config.js b/webpack.config.js
@@ -13,6 +13,7 @@
 
 // Force development mode for all build components.
 process.env['BABEL_ENV'] = 'development';
+process.env['NODE_ENV'] = 'development';
 
 module.exports = require('./webpack.make')({
   BUILD: false,