Merge pull request #82 from CodingZeal/chores/update-to-cra-1.0-scripts

Update to latest zeal/react-scripts

Author: randycoulman

README.md

@@ -66,6 +66,8 @@ ReactGen is built on [@zeal/react-scripts](https://github.com/CodingZeal/create-
 
 After generating your application, you can run it using `yarn start` (or `npm start`) and you can develop on `localhost:3000` if you are not in the context of a larger framework.
 
+If you are in the context of a larger framework, you can customize the `APP_PORT` variable in `.env.development` to match the port where the host application runs.  You can then develop in the context of that application instead.
+
 Other provided `yarn`/`npm` scripts include:
 
 - `build`: Create a production-ready client bundle.  By default, the bundle is placed in the `build` folder, but you can change that by setting the `BUILD_PATH` environment variable.

app/__tests__/app-spec.js

@@ -26,6 +26,6 @@ describe("react-zeal", () => {
   });
 
   test("copies .eslintrc.js file", () => {
-    assert.fileContent(".eslintrc.js", "path.resolve");
+    assert.fileContent(".eslintrc.js", "paths.appSrc");
   });
 });

app/index.js

@@ -25,6 +25,12 @@ module.exports = class ReactZeal extends Generator {
       globOptions: { dot: true }
     });
 
+    this.fs.copy(this.templatePath(".env"), this.destinationPath(".env"));
+    this.fs.copy(
+      this.templatePath(".env.development"),
+      this.destinationPath(".env.development")
+    );
+
     this.fs.copy(
       this.templatePath(".eslintrc.js"),
       this.destinationPath(".eslintrc.js")

app/templates/.env

@@ -0,0 +1 @@
+NODE_PATH = ./client

app/templates/.env.development

@@ -0,0 +1 @@
+APP_PORT = 3000

app/templates/.eslintrc.js

@@ -1,4 +1,27 @@
-const path = require("path");
+// Ideally, we'd point the import resolver to
+// `node_modules/@zeal/react-scripts/config/webpack.config.dev.js` instead of
+// having our own configuration here.  However, that doesn't currently work:
+//
+// - @zeal/react-scripts `lint` script loads `config/env.js`, which reads the
+//   `.env` files and then transforms the NODE_PATH by removing any absolute
+//   paths (to avoid accidentally importing files from outside the project)
+//   and then resolving relative paths so that they become absolute.
+//
+// - `lint` spawns a call to `eslint` which ultimately loads
+//   `webpack.config.dev.js`.  This new process inherits the massaged NODE_PATH
+//   from above.
+//
+// - `webpack.config.dev.js` imports `config/env.js`.  Since this is now a
+//   different process, that file is reloaded which.  It reloads our `.env`
+//   file, but since dotenv ["will never modify any environment variables that
+//   have already been set"](https://www.npmjs.com/package/dotenv#what-happens-to-environment-variables-that-were-already-set),
+//   the now-absolute NODE_PATH entry gets removed during the NODE_PATH
+//   transformation.
+//
+// - As a result, `eslint` can't properly resolve any of our module imports.
+//
+
+const paths = require("@zeal/react-scripts/config/paths");
 
 module.exports = {
   extends: ["zeal", "zeal/react", "prettier", "prettier/react"],
@@ -8,7 +31,7 @@ module.exports = {
       webpack: {
         config: {
           resolve: {
-            root: path.resolve(__dirname, "client")
+            modules: [paths.ownNodeModules, paths.appNodeModules, paths.appSrc]
           }
         }
       }

app/templates/package.json

@@ -3,9 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@zeal/react-scripts": "^1.0.0",
+    "@zeal/react-scripts": "^2.0.0",
     "babel-polyfill": "^6.23.0",
     "enzyme": "^2.8.2",
+    "eslint": "3.19.0",
     "eslint-config-prettier": "^2.1.1",
     "history": "^4.6.1",
     "husky": "^0.13.3",