From 9037c5604791394fb4ecfbf7e83fd7336082fa13 Mon Sep 17 00:00:00 2001 From: Tyler Graf Date: Fri, 22 Feb 2019 10:42:16 -0700 Subject: [PATCH] Add template files for hf. --- .../scripts/utils/frontierInit.js | 60 +++++++++++++++++-- .../react-scripts/template-ef/.buildpacks | 1 + .../template-ef/heroku-prebuild.sh | 9 +++ packages/react-scripts/template-hf/Procfile | 1 + .../template-hf/public/index.html | 1 + packages/react-scripts/template-hf/server.js | 28 +++++++++ .../react-scripts/template-hf/snow.config.js | 27 +++++++++ .../template-hf/src/setupProxy.js | 24 ++++++++ .../react-scripts/template-hf/views/index.ejs | 9 +++ packages/react-scripts/template/gitignore | 4 ++ 10 files changed, 159 insertions(+), 5 deletions(-) create mode 100644 packages/react-scripts/template-ef/heroku-prebuild.sh create mode 100644 packages/react-scripts/template-hf/Procfile create mode 100644 packages/react-scripts/template-hf/public/index.html create mode 100644 packages/react-scripts/template-hf/server.js create mode 100644 packages/react-scripts/template-hf/snow.config.js create mode 100644 packages/react-scripts/template-hf/src/setupProxy.js create mode 100644 packages/react-scripts/template-hf/views/index.ejs diff --git a/packages/react-scripts/scripts/utils/frontierInit.js b/packages/react-scripts/scripts/utils/frontierInit.js index bad5731f537..868b946e4b1 100644 --- a/packages/react-scripts/scripts/utils/frontierInit.js +++ b/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; +} diff --git a/packages/react-scripts/template-ef/.buildpacks b/packages/react-scripts/template-ef/.buildpacks index 96d0a9ddcec..6d8401b9e54 100644 --- a/packages/react-scripts/template-ef/.buildpacks +++ b/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 diff --git a/packages/react-scripts/template-ef/heroku-prebuild.sh b/packages/react-scripts/template-ef/heroku-prebuild.sh new file mode 100644 index 00000000000..74b86dd0803 --- /dev/null +++ b/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 diff --git a/packages/react-scripts/template-hf/Procfile b/packages/react-scripts/template-hf/Procfile new file mode 100644 index 00000000000..83b4f82cae1 --- /dev/null +++ b/packages/react-scripts/template-hf/Procfile @@ -0,0 +1 @@ +web: npx startup start -w ${WEB_CONCURRENCY:-4} diff --git a/packages/react-scripts/template-hf/public/index.html b/packages/react-scripts/template-hf/public/index.html new file mode 100644 index 00000000000..cd0a893db6f --- /dev/null +++ b/packages/react-scripts/template-hf/public/index.html @@ -0,0 +1 @@ + diff --git a/packages/react-scripts/template-hf/server.js b/packages/react-scripts/template-hf/server.js new file mode 100644 index 00000000000..9fb9e6b1031 --- /dev/null +++ b/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' + }) + }); +}); diff --git a/packages/react-scripts/template-hf/snow.config.js b/packages/react-scripts/template-hf/snow.config.js new file mode 100644 index 00000000000..42ab453e6ef --- /dev/null +++ b/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 +} diff --git a/packages/react-scripts/template-hf/src/setupProxy.js b/packages/react-scripts/template-hf/src/setupProxy.js new file mode 100644 index 00000000000..d0674c44bec --- /dev/null +++ b/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' + }); + }); + +}; diff --git a/packages/react-scripts/template-hf/views/index.ejs b/packages/react-scripts/template-hf/views/index.ejs new file mode 100644 index 00000000000..65271e15d00 --- /dev/null +++ b/packages/react-scripts/template-hf/views/index.ejs @@ -0,0 +1,9 @@ +<% + page.secondaryNav = [ + {"href": appPath("/"), title: 'Stuff', "text": 'Stuff'}, + ]; + page.showHelper = true; +%> +

hi

+
+<%- include(indexPath) %> diff --git a/packages/react-scripts/template/gitignore b/packages/react-scripts/template/gitignore index 4d29575de80..2d3d50b8418 100644 --- a/packages/react-scripts/template/gitignore +++ b/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