Merge pull request #42 from fs-webdev/hf

Add template files for hf.

Author: joeycozza

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

@@ -20,16 +20,21 @@ async function promptForConfig() {
     {
       type: 'checkbox',
       name: 'additionalFeatures',
-      message: 'What additional features does your app require',
+      message: 'What additional features does your app require (these are checkboxes)',
+      default: ['electric-flow', 'header-footer'],
       choices: [
-        {
-          name: 'Using a shared Polymer Component within your React App?',
-          value: 'polymer',
-        },
         {
           name: `Configure app for Electric Flow`,
           value: 'electric-flow',
         },
+        {
+          name: `Include hf (header/footer)`,
+          value: 'header-footer',
+        },
+        {
+          name: 'Using a shared Polymer Component within your React App?',
+          value: 'polymer',
+        },
       ],
     },
   ];
@@ -48,6 +53,9 @@ function installFrontierDependencies(appPath, answers, useYarn, ownPath) {
   if (additionalFeatures.includes('electric-flow')) {
     configureEF(appPath, useYarn, ownPath);
   }
+  if (additionalFeatures.includes('header-footer')) {
+    configureHF(appPath, useYarn, ownPath);
+  }
   injectPolymerCode(appPath);
 
   const defaultModules = ['http-proxy-middleware@0.19.0', 'fs-webdev/exo'];
@@ -127,6 +135,40 @@ function configureEF(appPath, useYarn, ownPath) {
 
   const templatePath = path.join(ownPath, 'template-ef');
   fs.copySync(templatePath, appPath, { overwrite: true });
+
+  alterPackageJsonFile(appPath, appPackage => {
+    const packageJson = { ...appPackage };
+    const additionalScripts = {
+      "heroku-prebuild": "./heroku-prebuild.sh"
+    };
+    packageJson.scripts = sortScripts({ ...packageJson.scripts, ...additionalScripts });
+    return packageJson;
+  });
+}
+
+function configureHF(appPath, useYarn, 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"
+    };
+    packageJson.scripts = sortScripts({ ...packageJson.scripts, ...additionalScripts });
+    packageJson.main = "./server.js";
+
+    return packageJson;
+  });
+
+  let modules = [
+    'github:fs-webdev/hf#cra',
+    'github:fs-webdev/snow#cra',
+    'github:fs-webdev/startup',
+  ]
+  installModulesSync(modules, useYarn);
 }
 
 function cleanupFrontierCode(appPath) {}
@@ -154,3 +196,11 @@ function buildInstallCommandAndArgs(useYarn, saveDev = false) {
   }
   return { command, args };
 }
+
+function sortScripts(scripts){
+  const sortedScripts = {};
+  Object.keys(scripts).sort().forEach(function(key) {
+    sortedScripts[key] = scripts[key];
+  });
+  return sortedScripts;
+}

packages/react-scripts/template-ef/.buildpacks

@@ -1 +1,2 @@
 https://github.com/heroku/heroku-buildpack-nodejs.git
+https://github.com/fs-webdev/heroku-buildpack-upload-static-assets-to-s3.git

packages/react-scripts/template-ef/heroku-prebuild.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+
+if [ "$NODE_ENV" == "production" ]; then
+  echo "-----> Building .npmrc and .netrc"
+
+  echo "//code.lds.org/artifactory/api/npm/npm-fhd/:_authToken=${NPM_TOKEN}" > .npmrc
+  echo "@fs:registry=https://code.lds.org/artifactory/api/npm/npm-fhd/" >> .npmrc
+  echo -e "machine github.com\n  login $GITHUB_AUTH_TOKEN" > ~/.netrc
+fi

packages/react-scripts/template-hf/Procfile

@@ -0,0 +1 @@
+web: npx startup start -w ${WEB_CONCURRENCY:-4}

packages/react-scripts/template-hf/public/index.html

@@ -0,0 +1 @@
+<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

packages/react-scripts/template-hf/server.js

@@ -0,0 +1,28 @@
+const setProxies = require('exo/proxy');
+const snow = require('snow');
+const setWebpackManifest = require('snow/lib/utils/webpackManifest.js');
+const snowConfig = require('./snow.config.js');
+const hf = require('hf');
+
+/**
+ * Expose the app
+ */
+const app = module.exports = snow(__dirname, hf, snowConfig);
+
+setWebpackManifest(app,'build');
+
+if (app.get('env') === 'development') {
+  app.stack.front(function () {
+    setProxies(app);
+  });
+}
+
+
+app.stack.postRoute(function () {
+  app.get('/',(req,res)=>{
+    res.render('index', {
+      indexPath: '../build/_index.html',
+      // _layoutFile: './async_layout'
+    })
+  });
+});

packages/react-scripts/template-hf/snow.config.js

@@ -0,0 +1,27 @@
+var urlLookup = {
+  'cas-public-api.cas.ident.service': process.env.BASE_URL + '/cas-public-api',
+  'cis-public-api.cis.ident.service': process.env.BASE_URL + '/cis-public-api',
+};
+
+var serviceLocatorOptions = {
+  fallbackFunction: function (serviceName) {
+    if (urlLookup[serviceName]) {
+      return urlLookup[serviceName];
+    }
+    throw new Error(`${serviceName} was not found in binding registry or urlLookup`);
+  }
+};
+
+module.exports = {
+  experiments : [
+    {
+      // Author/Owner: Tyler Graf
+      name: 'coolExperiment',
+      description: 'The coolest experiment',
+      default: true
+    }
+  ],
+  proxyUser: true,
+  cacheEncryption: true,
+  serviceLocatorOptions
+}

packages/react-scripts/template-hf/src/setupProxy.js

@@ -0,0 +1,24 @@
+const setProxies = require('exo/proxy');
+const hf = require('hf');
+const snow = require('snow');
+const path = require('path');
+const waitForWebpack = require('snow/lib/utils/waitForWebpack.js');
+
+const initiatedDirectory = process.env.INIT_CWD;
+const snowConfig = require(path.join(initiatedDirectory, 'snow.config.js'));
+
+module.exports = app => {
+  setProxies(app);
+  waitForWebpack(app);
+
+  snowConfig.app = app;
+  snow(initiatedDirectory, hf, snowConfig);
+
+  app.get('/', (req, res, next) => {
+    res.render('index', {
+      indexPath: '../dist/_index.html',
+      // _layoutFile: './async_layout'
+    });
+  });
+
+};

packages/react-scripts/template-hf/views/index.ejs

@@ -0,0 +1,9 @@
+<%
+  page.secondaryNav = [
+    {"href": appPath("/"), title: 'Stuff', "text": 'Stuff'},
+  ];
+  page.showHelper = true;
+%>
+<h1>hi</h1>
+<div id="root"></div>
+<%- include(indexPath) %>

packages/react-scripts/template/gitignore

@@ -11,8 +11,12 @@
 # production
 /build
 
+# development
+/dist
+
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local