Merge pull request #43 from fs-webdev/runFrEnvAutomatically

minor fixes, and auto setup of .env file for hf template

Author: joeycozza

packages/react-scripts/scripts/init.js

@@ -76,17 +76,9 @@ function tryGitInit(appPath) {
   }
 }
 
-module.exports = async function(
-  appPath,
-  appName,
-  verbose,
-  originalDirectory,
-  template
-) {
+module.exports = async function(appPath, appName, verbose, originalDirectory, template) {
   const answers = await frontierInit.promptForConfig(appPath);
-  const ownPath = path.dirname(
-    require.resolve(path.join(__dirname, '..', 'package.json'))
-  );
+  const ownPath = path.dirname(require.resolve(path.join(__dirname, '..', 'package.json')));
   const appPackage = require(path.join(appPath, 'package.json'));
   const useYarn = fs.existsSync(path.join(appPath, 'yarn.lock'));
 
@@ -120,10 +112,7 @@ module.exports = async function(
 
   const readmeExists = fs.existsSync(path.join(appPath, 'README.md'));
   if (readmeExists) {
-    fs.renameSync(
-      path.join(appPath, 'README.md'),
-      path.join(appPath, 'README.old.md')
-    );
+    fs.renameSync(path.join(appPath, 'README.md'), path.join(appPath, 'README.old.md'));
   }
 
   // Copy the files for the user
@@ -133,20 +122,14 @@ module.exports = async function(
   if (fs.existsSync(templatePath)) {
     fs.copySync(templatePath, appPath);
   } else {
-    console.error(
-      `Could not locate supplied template: ${chalk.green(templatePath)}`
-    );
+    console.error(`Could not locate supplied template: ${chalk.green(templatePath)}`);
     return;
   }
 
   // Rename gitignore after the fact to prevent npm from renaming it to .npmignore
   // See: https://github.com/npm/npm/issues/1862
   try {
-    fs.moveSync(
-      path.join(appPath, 'gitignore'),
-      path.join(appPath, '.gitignore'),
-      []
-    );
+    fs.moveSync(path.join(appPath, 'gitignore'), path.join(appPath, '.gitignore'), []);
   } catch (err) {
     // Append if there's already a `.gitignore` file there
     if (err.code === 'EEXIST') {
@@ -171,10 +154,7 @@ module.exports = async function(
   args.push('react', 'react-dom');
 
   // Install additional template dependencies, if present
-  const templateDependenciesPath = path.join(
-    appPath,
-    '.template.dependencies.json'
-  );
+  const templateDependenciesPath = path.join(appPath, '.template.dependencies.json');
   if (fs.existsSync(templateDependenciesPath)) {
     const templateDependencies = require(templateDependenciesPath).dependencies;
     args = args.concat(
@@ -199,7 +179,7 @@ module.exports = async function(
     }
   }
 
-  frontierInit.installFrontierDependencies(appPath, answers, useYarn, ownPath);
+  frontierInit.installFrontierDependencies(appPath, answers, ownPath);
 
   if (useTypeScript) {
     verifyTypeScriptSetup();
@@ -223,44 +203,30 @@ module.exports = async function(
   // Change displayed command to yarn instead of yarnpkg
   const displayedCommand = useYarn ? 'yarn' : 'npm';
 
-  frontierInit.cleanupFrontierCode(appPath);
-
   console.log();
   console.log(`Success! Created ${appName} at ${appPath}`);
   console.log('Inside that directory, you can run several commands:');
   console.log();
   console.log(chalk.cyan(`  ${displayedCommand} start`));
   console.log('    Starts the development server.');
   console.log();
-  console.log(
-    chalk.cyan(`  ${displayedCommand} ${useYarn ? '' : 'run '}build`)
-  );
+  console.log(chalk.cyan(`  ${displayedCommand} ${useYarn ? '' : 'run '}build`));
   console.log('    Bundles the app into static files for production.');
   console.log();
   console.log(chalk.cyan(`  ${displayedCommand} test`));
   console.log('    Starts the test runner.');
   console.log();
-  console.log(
-    chalk.cyan(`  ${displayedCommand} ${useYarn ? '' : 'run '}eject`)
-  );
-  console.log(
-    '    Removes this tool and copies build dependencies, configuration files'
-  );
-  console.log(
-    '    and scripts into the app directory. If you do this, you can’t go back!'
-  );
+  console.log(chalk.cyan(`  ${displayedCommand} ${useYarn ? '' : 'run '}eject`));
+  console.log('    Removes this tool and copies build dependencies, configuration files');
+  console.log('    and scripts into the app directory. If you do this, you can’t go back!');
   console.log();
   console.log('We suggest that you begin by typing:');
   console.log();
   console.log(chalk.cyan('  cd'), cdpath);
   console.log(`  ${chalk.cyan(`${displayedCommand} start`)}`);
   if (readmeExists) {
     console.log();
-    console.log(
-      chalk.yellow(
-        'You had a `README.md` file, we renamed it to `README.old.md`'
-      )
-    );
+    console.log(chalk.yellow('You had a `README.md` file, we renamed it to `README.old.md`'));
   }
   console.log();
   console.log('Happy hacking!');
@@ -270,7 +236,6 @@ function isReactInstalled(appPackage) {
   const dependencies = appPackage.dependencies || {};
 
   return (
-    typeof dependencies.react !== 'undefined' &&
-    typeof dependencies['react-dom'] !== 'undefined'
+    typeof dependencies.react !== 'undefined' && typeof dependencies['react-dom'] !== 'undefined'
   );
 }

packages/react-scripts/scripts/utils/frontierInit.js

@@ -11,7 +11,6 @@ module.exports = {
   installFrontierDependencies,
   promptForConfig,
   packageJsonWritten,
-  cleanupFrontierCode,
 };
 
 async function promptForConfig() {
@@ -44,19 +43,18 @@ async function promptForConfig() {
 
 function packageJsonWritten() {}
 
-function installFrontierDependencies(appPath, answers, useYarn, ownPath) {
+function installFrontierDependencies(appPath, answers, ownPath) {
   const { additionalFeatures } = answers;
 
   if (additionalFeatures.includes('polymer')) {
-    configurePolymer(appPath, useYarn);
+    configurePolymer(appPath);
   }
   if (additionalFeatures.includes('electric-flow')) {
-    configureEF(appPath, useYarn, ownPath);
+    configureEF(appPath, ownPath);
   }
   if (additionalFeatures.includes('header-footer')) {
-    configureHF(appPath, useYarn, ownPath);
+    configureHF(appPath, ownPath);
   }
-  injectPolymerCode(appPath);
 
   const defaultModules = ['http-proxy-middleware@0.19.0', 'fs-webdev/exo'];
 
@@ -67,8 +65,8 @@ function installFrontierDependencies(appPath, answers, useYarn, ownPath) {
     'webpack@4.19.1',
   ];
 
-  installModulesSync(defaultModules, useYarn);
-  installModulesSync(defaultDevModules, useYarn, true);
+  installModulesSync(defaultModules);
+  installModulesSync(defaultDevModules, true);
 
   alterPackageJsonFile(appPath, appPackage => {
     const packageJson = { ...appPackage };
@@ -81,7 +79,7 @@ function installFrontierDependencies(appPath, answers, useYarn, ownPath) {
     };
     packageJson.scripts = { ...packageJson.scripts, ...additionalScripts };
     packageJson.eslintConfig = {
-      extends: ['frontier/recommended'],
+      extends: ['@fs/eslint-config-frontier-react'],
     };
     return packageJson;
   });
@@ -95,7 +93,7 @@ function alterPackageJsonFile(appPath, extendFunction) {
   );
 }
 
-function configurePolymer(appPath, useYarn) {
+function configurePolymer(appPath) {
   alterPackageJsonFile(appPath, appPackage => {
     const packageJson = { ...appPackage };
     packageJson.vendorCopy = [
@@ -112,8 +110,9 @@ function configurePolymer(appPath, useYarn) {
     return packageJson;
   });
 
+  injectPolymerCode(appPath);
   const polymerModules = ['vendor-copy@2.0.0', '@webcomponents/webcomponentsjs@2.1.3'];
-  installModulesSync(polymerModules, useYarn, true);
+  installModulesSync(polymerModules, true);
 }
 
 function injectPolymerCode(appPath) {
@@ -129,7 +128,7 @@ function injectPolymerCode(appPath) {
   fs.writeFileSync(indexPath, indexHtml);
 }
 
-function configureEF(appPath, useYarn, ownPath) {
+function configureEF(appPath, ownPath) {
   // TODO - modify package.json to make sure name is correct for blueprint
   // TODO - use blueprint.yml as a template
 
@@ -139,68 +138,54 @@ function configureEF(appPath, useYarn, ownPath) {
   alterPackageJsonFile(appPath, appPackage => {
     const packageJson = { ...appPackage };
     const additionalScripts = {
-      "heroku-prebuild": "./heroku-prebuild.sh"
+      'heroku-prebuild': './heroku-prebuild.sh',
     };
     packageJson.scripts = sortScripts({ ...packageJson.scripts, ...additionalScripts });
     return packageJson;
   });
 }
 
-function configureHF(appPath, useYarn, ownPath) {
-
+function configureHF(appPath, ownPath) {
   const templatePath = path.join(ownPath, 'template-hf');
   fs.copySync(templatePath, appPath, { overwrite: true });
 
   alterPackageJsonFile(appPath, appPackage => {
     const packageJson = { ...appPackage };
     const additionalScripts = {
-      "build:prod": "PUBLIC_URL=https://edge.fscdn.org/assets/ react-scripts build",
-      "heroku-postbuild": "npm run build:prod"
+      'build:prod': 'PUBLIC_URL=https://edge.fscdn.org/assets/ react-scripts build',
+      'heroku-postbuild': 'npm run build:prod',
     };
     packageJson.scripts = sortScripts({ ...packageJson.scripts, ...additionalScripts });
-    packageJson.main = "./server.js";
+    packageJson.main = './server.js';
 
     return packageJson;
   });
 
+  createLocalEnvFile();
   let modules = [
     'github:fs-webdev/hf#cra',
     'github:fs-webdev/snow#cra',
     'github:fs-webdev/startup',
-  ]
-  installModulesSync(modules, useYarn);
+  ];
+  installModulesSync(modules);
 }
 
-function cleanupFrontierCode(appPath) {}
-
-function installModulesSync(modules, useYarn, saveDev = false) {
-  const { command, args } = buildInstallCommandAndArgs(useYarn, saveDev);
-  osUtils.runExternalCommandSync(command, args.concat(modules));
+function installModulesSync(modules, saveDev = false) {
+  const command = 'npm';
+  const args = ['install', `--save${saveDev ? '-dev' : ''}`].concat(modules);
+  osUtils.runExternalCommandSync(command, args);
 }
 
-function buildInstallCommandAndArgs(useYarn, saveDev = false) {
-  let command;
-  let args;
-  if (useYarn) {
-    command = 'yarnpkg';
-    args = ['add'];
-    if (saveDev) {
-      args.push('--dev');
-    }
-  } else {
-    command = 'npm';
-    args = ['install', '--save'];
-    if (saveDev) {
-      args[1] = '--save-dev';
-    }
-  }
-  return { command, args };
+function createLocalEnvFile() {
+  osUtils.runExternalCommandSync('npx', ['@fs/fr-cli', 'env', 'local']);
 }
 
-function sortScripts(scripts){
+function sortScripts(scripts) {
   const sortedScripts = {};
-  Object.keys(scripts).sort().forEach(function(key) {
-    sortedScripts[key] = scripts[key];
-  });
+  Object.keys(scripts)
+    .sort()
+    .forEach(function(key) {
+      sortedScripts[key] = scripts[key];
+    });
   return sortedScripts;
 }