feat: Add CRA Generator

generator.js

@@ -3,10 +3,16 @@
 var path = require('path');
 var isValid = require('is-valid-app');
 
-module.exports = function(app) {
+module.exports = app => {
   // return if the generator is already registered
   if (!isValid(app, 'generate-react')) return;
 
+  app.use(require('generate-project'));
+  app.register(
+    'create-react-app',
+    require('./lib/generators/create-react-app')
+  );
+
   /**
    * Generate a `index.js` file to the current working directory. Learn how to [customize
    * behavior(#customization) or override built-in templates.
@@ -18,8 +24,6 @@ module.exports = function(app) {
    * @api public
    */
 
-  task(app, 'react', 'index.js');
-
   /**
    * Alias for running the [react](#react) task with the following command:
    *
@@ -30,18 +34,19 @@ module.exports = function(app) {
    * @api public
    */
 
-  app.task('default', ['react']);
+  app.task('default', ['project']);
 };
 
 /**
  * Create a task with the given `name` and glob `pattern`
  */
 
-function task(app, name, pattern) {
-  app.task(name, function() {
-    return app.src(pattern, {cwd: __dirname})
+function task(app, name, pattern, dest = '') {
+  app.task(name, () => {
+    return app
+      .src(pattern, { cwd: __dirname })
       .pipe(app.renderFile('*'))
       .pipe(app.conflicts(app.cwd))
-      .pipe(app.dest(app.cwd));
+      .pipe(app.dest(path.join(app.cwd, dest)));
   });
 }

lib/constants.js

@@ -0,0 +1,17 @@
+module.exports = {
+  YARN: "yarn",
+  NPM: "npm",
+  NPX: "npx",
+  ADD: "add",
+  INSTALL: "install",
+  CREATE_REACT_APP: "create-react-app",
+  REDUX: "redux",
+  REACT_REDUX: "react-redux",
+  MOBX: "mobx",
+  STYLED_COMPONENTS: "styled-components",
+  SCSS: "node-sass",
+  LESS: "less",
+  ROUTER: "react-router-dom",
+  ENZYME: "enzyme",
+  JEST: "jest"
+};

lib/generators/create-react-app.js

@@ -0,0 +1,45 @@
+const spawn = require("../spawn");
+const path = require("path");
+const { prompt } = require("enquirer");
+const { NPX, CREATE_REACT_APP } = require("../constants.js");
+
+module.exports = app => {
+  app.task("create-react-app", async () => {
+    let dest = app.options.name;
+    if (!dest) {
+      const answers = await prompt({
+        type: "text",
+        name: "appName",
+        message: "What would you like the app name to be?"
+      });
+      dest = answers.appName;
+    }
+    await spawn(NPX, [CREATE_REACT_APP, dest]);
+  });
+
+  app.task("create-react-app-templates", async () => {
+    const dest = path.join(app.cwd, app.options.name);
+    const answers = await prompt([
+      {
+        type: "text",
+        name: "description",
+        message: "What description would you like to use for your website?"
+      },
+      {
+        type: "text",
+        name: "title",
+        message: "What title would you like to use for your website?"
+      }
+    ]);
+
+    return app
+      .src("create-react-app/public/*.*", {
+        cwd: path.join(__dirname, "../../templates")
+      })
+      .pipe(app.renderFile("*", answers).on("error", console.error))
+      .pipe(app.conflicts(dest))
+      .pipe(app.dest(dest));
+  });
+
+  app.task("default", ["create-react-app", "create-react-app-templates"]);
+};

lib/spawn.js

@@ -0,0 +1,22 @@
+"use strict";
+
+const spawn = require("child_process").spawn;
+
+const defaults = {
+  stdio: "inherit",
+  cwd: process.cwd()
+};
+
+// simple wrapper around cli commands
+module.exports = async (cmd, args, options) => {
+  return new Promise((resolve, reject) => {
+    const cp = spawn(cmd, args, { ...defaults, ...options });
+    cp.on("error", reject);
+    cp.on("close", code => {
+      if (code > 0) {
+        return reject(code);
+      }
+      resolve(code);
+    });
+  });
+};

package.json

@@ -21,7 +21,10 @@
     "test": "mocha"
   },
   "dependencies": {
-    "is-valid-app": "^0.3.0"
+    "is-valid-app": "^0.3.0",
+    "enquirer": "^2.3.2",
+    "generate": "^0.14.0",
+    "generate-project": "^1.0.0"
   },
   "keywords": [
     "generate",

templates/create-react-app/public/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="<%= description %>"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title><%= title %></title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>