Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Feb 22, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bdc7d86
minor fixes, and auto setup of .env file for hf template
joeycozza Feb 22, 2019
3b8dc39
removing console.logs
joeycozza Feb 22, 2019
ab9445f
keeping the default .env in case the hf option isnt selected
joeycozza Feb 22, 2019
a5af82e
changing function name
joeycozza Feb 22, 2019
ff9527e
removing the useYarn option from frontierInit code.
joeycozza Feb 22, 2019
cb0ab51
going to let `fr env` handle setting the SKIP_PREFLIGHT_CKECK=true
joeycozza Feb 22, 2019
ba7b1d0
removing .env file with the SKIP_PREFLIGHT_CHECK flag
joeycozza Feb 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 13 additions & 48 deletions packages/react-scripts/scripts/init.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'));

Expand Down Expand Up @@ -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
Expand All @@ -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') {
Expand All @@ -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(
Expand All @@ -199,7 +179,7 @@ module.exports = async function(
}
}

frontierInit.installFrontierDependencies(appPath, answers, useYarn, ownPath);
frontierInit.installFrontierDependencies(appPath, answers, ownPath);

if (useTypeScript) {
verifyTypeScriptSetup();
Expand All @@ -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!');
Expand All @@ -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'
);
}
77 changes: 31 additions & 46 deletions packages/react-scripts/scripts/utils/frontierInit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ module.exports = {
installFrontierDependencies,
promptForConfig,
packageJsonWritten,
cleanupFrontierCode,
};

async function promptForConfig() {
Expand Down Expand Up @@ -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'];

Expand All @@ -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 };
Expand All @@ -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;
});
Expand All @@ -95,7 +93,7 @@ function alterPackageJsonFile(appPath, extendFunction) {
);
}

function configurePolymer(appPath, useYarn) {
function configurePolymer(appPath) {
alterPackageJsonFile(appPath, appPackage => {
const packageJson = { ...appPackage };
packageJson.vendorCopy = [
Expand All @@ -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) {
Expand All @@ -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

Expand All @@ -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;
}
2 changes: 0 additions & 2 deletions packages/react-scripts/template/.env
View file
Open in desktop

This file was deleted.