Skip to content

Commit c82c4f0

Browse files
gaearongaearon
authored
Refactor and improve build output (facebook#2202)
1 parent 68f95d4 commit c82c4f0

File tree

5 files changed

+191
-143
lines changed

5 files changed

+191
-143
lines changed

‎packages/react-dev-utils/README.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -252,6 +252,19 @@ if (openBrowser('http://localhost:3000')) {
252252
}
253253
```
254254

255+
#### `printHostingInstructions(appPackage: Object, publicUrl: string, publicPath: string, buildFolder: string, useYarn: boolean): void`
256+
257+
Prints hosting instructions after the project is built.
258+
259+
Pass your parsed `package.json` object as `appPackage`, your the URL where you plan to host the app as `publicUrl`, `output.publicPath` from your Webpack configuration as `publicPath`, the `buildFolder` name, and whether to `useYarn` in instructions.
260+
261+
```js
262+
const appPackage = require(paths.appPackageJson);
263+
const publicUrl = paths.publicUrl;
264+
const publicPath = config.output.publicPath;
265+
printHostingInstructions(appPackage, publicUrl, publicPath, 'build', true);
266+
```
267+
255268
#### `webpackHotDevClient.js`
256269

257270
This is an alternative client for [WebpackDevServer](https://github.com/webpack/webpack-dev-server) that shows a syntax error overlay.

‎packages/react-dev-utils/eslintFormatter.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ function isError(message) {
1313
function formatter(results) {
1414
let output = '\n';
1515
let hasErrors = false;
16+
let reportContainsErrorRuleIDs = false;
1617

1718
results.forEach(result => {
1819
let messages = result.messages;
@@ -25,6 +26,9 @@ function formatter(results) {
2526
if (isError(message)) {
2627
messageType = 'error';
2728
hasErrors = true;
29+
if (message.ruleId) {
30+
reportContainsErrorRuleIDs = true;
31+
}
2832
} else {
2933
messageType = 'warn';
3034
}
@@ -61,7 +65,7 @@ function formatter(results) {
6165
output += `${outputTable}\n\n`;
6266
});
6367

64-
if (hasErrors) {
68+
if (reportContainsErrorRuleIDs) {
6569
// Unlike with warnings, we have to do it here.
6670
// We have similar code in react-scripts for warnings,
6771
// but warnings can appear in multiple files so we only

‎packages/react-dev-utils/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"openBrowser.js",
2626
"openChrome.applescript",
2727
"prepareProxy.js",
28+
"printHostingInstructions.js",
2829
"WatchMissingNodeModulesPlugin.js",
2930
"webpackHotDevClient.js"
3031
],

‎packages/react-dev-utils/printHostingInstructions.js‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
/**
2+
* Copyright (c) 2015-present, Facebook, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the BSD-style license found in the
6+
* LICENSE file in the root directory of this source tree. An additional grant
7+
* of patent rights can be found in the PATENTS file in the same directory.
8+
*/
9+
10+
'use strict';
11+
12+
const chalk = require('chalk');
13+
const url = require('url');
14+
15+
function printHostingInstructions(
16+
appPackage,
17+
publicUrl,
18+
publicPath,
19+
buildFolder,
20+
useYarn
21+
) {
22+
const publicPathname = url.parse(publicPath).pathname;
23+
if (publicUrl && publicUrl.indexOf('.github.io/') !== -1) {
24+
// "homepage": "http://user.github.io/project"
25+
console.log(
26+
`The project was built assuming it is hosted at ${chalk.green(publicPathname)}.`
27+
);
28+
console.log(
29+
`You can control this with the ${chalk.green('homepage')} field in your ${chalk.cyan('package.json')}.`
30+
);
31+
console.log();
32+
console.log(`The ${chalk.cyan('build')} folder is ready to be deployed.`);
33+
console.log(`To publish it at ${chalk.green(publicUrl)}, run:`);
34+
// If script deploy has been added to package.json, skip the instructions
35+
if (typeof appPackage.scripts.deploy === 'undefined') {
36+
console.log();
37+
if (useYarn) {
38+
console.log(` ${chalk.cyan('yarn')} add --dev gh-pages`);
39+
} else {
40+
console.log(` ${chalk.cyan('npm')} install --save-dev gh-pages`);
41+
}
42+
console.log();
43+
console.log(
44+
`Add the following script in your ${chalk.cyan('package.json')}.`
45+
);
46+
console.log();
47+
console.log(` ${chalk.dim('// ...')}`);
48+
console.log(` ${chalk.yellow('"scripts"')}: {`);
49+
console.log(` ${chalk.dim('// ...')}`);
50+
console.log(
51+
` ${chalk.yellow('"predeploy"')}: ${chalk.yellow('"npm run build",')}`
52+
);
53+
console.log(
54+
` ${chalk.yellow('"deploy"')}: ${chalk.yellow('"gh-pages -d build"')}`
55+
);
56+
console.log(' }');
57+
console.log();
58+
console.log('Then run:');
59+
}
60+
console.log();
61+
console.log(` ${chalk.cyan(useYarn ? 'yarn' : 'npm')} run deploy`);
62+
console.log();
63+
} else if (publicPath !== '/') {
64+
// "homepage": "http://mywebsite.com/project"
65+
console.log(
66+
`The project was built assuming it is hosted at ${chalk.green(publicPath)}.`
67+
);
68+
console.log(
69+
`You can control this with the ${chalk.green('homepage')} field in your ${chalk.cyan('package.json')}.`
70+
);
71+
console.log();
72+
console.log(`The ${chalk.cyan('build')} folder is ready to be deployed.`);
73+
console.log();
74+
} else {
75+
if (publicUrl) {
76+
// "homepage": "http://mywebsite.com"
77+
console.log(
78+
`The project was built assuming it is hosted at ${chalk.green(publicUrl)}.`
79+
);
80+
console.log(
81+
`You can control this with the ${chalk.green('homepage')} field in your ${chalk.cyan('package.json')}.`
82+
);
83+
console.log();
84+
} else {
85+
// no homepage
86+
console.log(
87+
'The project was built assuming it is hosted at the server root.'
88+
);
89+
console.log(
90+
`To override this, specify the ${chalk.green('homepage')} in your ${chalk.cyan('package.json')}.`
91+
);
92+
console.log('For example, add this to build it for GitHub Pages:');
93+
console.log();
94+
console.log(
95+
` ${chalk.green('"homepage"')} ${chalk.cyan(':')} ${chalk.green('"http://myname.github.io/myapp"')}${chalk.cyan(',')}`
96+
);
97+
console.log();
98+
}
99+
console.log(
100+
`The ${chalk.cyan(buildFolder)} folder is ready to be deployed.`
101+
);
102+
console.log('You may serve it with a static server:');
103+
console.log();
104+
if (useYarn) {
105+
console.log(` ${chalk.cyan('yarn')} global add serve`);
106+
} else {
107+
console.log(` ${chalk.cyan('npm')} install -g serve`);
108+
}
109+
console.log(` ${chalk.cyan('serve')} -s build`);
110+
console.log();
111+
}
112+
}
113+
114+
module.exports = printHostingInstructions;

0 commit comments

Comments
 (0)