Skip to content

Commit 9e4a35f

Browse files
kitzekitze
committed
# By Ville Immonen (11) and others # Via Dan Abramov * 'master' of https://github.com/facebookincubator/create-react-app: (39 commits) Remove redundant `function` from export statement (facebook#996) Add Gatsby to alternatives (facebook#995) Allow webpack 2 as peerDependency in react-dev-utils (facebook#963) Remove custom babel-loader cache dir config (facebook#983) Check for presence of folders before continuing eject. Closes facebook#939. (facebook#951) Fixes facebook#952 (facebook#953) Always build before deploying to gh-pages (facebook#959) Add collectCoverageFrom option to collect coverage on files without any tests. (facebook#961) Catch and noop call to open web browser. (facebook#964) Gently nudge users towards https by default (facebook#974) Enable compression on webpack-dev-server (facebook#966) (facebook#968) Add next.js to Alternatives Point people to npm Windows instructions Encourage people to try recent npm Fix an attribution link in 0.7.0 changelog Update CLI version in changelog Publish Update eslint-config-react-app version in the guide Update changelog for 0.7.0 Revert "Temporarily remove 0.7.0 changelog as it's not out yet" ... Conflicts: packages/babel-preset-react-app/package.json packages/create-react-app/package.json packages/eslint-config-react-app/package.json packages/react-dev-utils/package.json packages/react-scripts/config/webpack.config.dev.js packages/react-scripts/config/webpack.config.prod.js packages/react-scripts/package.json
2 parents e6bac43 + bee627a commit 9e4a35f

File tree

9 files changed

+113
-77
lines changed

9 files changed

+113
-77
lines changed

Diff for: ‎config/paths.js

+15-14
Original file line numberDiff line numberDiff line change
@@ -70,17 +70,18 @@ module.exports = {
7070
};
7171
// @remove-on-eject-end
7272

73-
// @remove-on-publish-begin
74-
module.exports = {
75-
appBuild: resolveOwn('../../../build'),
76-
appPublic: resolveOwn('../template/public'),
77-
appHtml: resolveOwn('../template/public/index.html'),
78-
appIndexJs: resolveOwn('../template/src/index.js'),
79-
appPackageJson: resolveOwn('../package.json'),
80-
appSrc: resolveOwn('../template/src'),
81-
testsSetup: resolveOwn('../template/src/setupTests.js'),
82-
appNodeModules: resolveOwn('../node_modules'),
83-
ownNodeModules: resolveOwn('../node_modules'),
84-
nodePaths: nodePaths
85-
};
86-
// @remove-on-publish-end
73+
// config before publish: we're in ./packages/react-scripts/config/
74+
if (__dirname.indexOf(path.join('packages', 'react-scripts', 'config')) !== -1) {
75+
module.exports = {
76+
appBuild: resolveOwn('../../../build'),
77+
appPublic: resolveOwn('../template/public'),
78+
appHtml: resolveOwn('../template/public/index.html'),
79+
appIndexJs: resolveOwn('../template/src/index.js'),
80+
appPackageJson: resolveOwn('../package.json'),
81+
appSrc: resolveOwn('../template/src'),
82+
testsSetup: resolveOwn('../template/src/setupTests.js'),
83+
appNodeModules: resolveOwn('../node_modules'),
84+
ownNodeModules: resolveOwn('../node_modules'),
85+
nodePaths: nodePaths
86+
};
87+
}

Diff for: ‎config/webpack.config.dev.js

+5-9
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
var path = require('path');
1313
var autoprefixer = require('autoprefixer');
1414
var webpack = require('webpack');
15-
var findCacheDir = require('find-cache-dir');
1615
var HtmlWebpackPlugin = require('html-webpack-plugin');
1716
var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
1817
var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
@@ -126,12 +125,9 @@ module.exports = {
126125
plugins: [].concat(customConfig.babelPlugins),
127126
// @remove-on-eject-end
128127
// This is a feature of `babel-loader` for webpack (not Babel itself).
129-
// It enables caching results in ./node_modules/.cache/react-scripts/
130-
// directory for faster rebuilds. We use findCacheDir() because of:
131-
// https://github.com/facebookincubator/create-react-app/issues/483
132-
cacheDirectory: findCacheDir({
133-
name: 'react-scripts'
134-
})
128+
// It enables caching results in ./node_modules/.cache/babel-loader/
129+
// directory for faster rebuilds.
130+
cacheDirectory: true
135131
}
136132
},
137133
// "postcss" loader applies autoprefixer to our CSS.
@@ -141,7 +137,7 @@ module.exports = {
141137
// in development "style" loader enables hot editing of CSS.
142138
{
143139
test: /\.css$/,
144-
loader: customConfig.values.CSS_MODULES ? customConfig.values.CSS_MODULES.dev : 'style!css!postcss'
140+
loader: customConfig.values.CSS_MODULES ? customConfig.values.CSS_MODULES.dev : 'style!css?importLoaders=1!postcss'
145141
},
146142
// JSON is not enabled by default in Webpack but both Node and Browserify
147143
// allow it implicitly so we also enable it.
@@ -179,7 +175,7 @@ module.exports = {
179175
},
180176
// @remove-on-eject-end
181177
// We use PostCSS for autoprefixing only.
182-
postcss: function () {
178+
postcss: function() {
183179
return [
184180
autoprefixer({
185181
browsers: [

Diff for: ‎config/webpack.config.prod.js

+10-4
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ var autoprefixer = require('autoprefixer');
1414
var webpack = require('webpack');
1515
var HtmlWebpackPlugin = require('html-webpack-plugin');
1616
var ExtractTextPlugin = require('extract-text-webpack-plugin');
17+
var ManifestPlugin = require('webpack-manifest-plugin');
1718
var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
1819
var url = require('url');
1920
var paths = require('./paths');
@@ -153,10 +154,9 @@ module.exports = {
153154
// Webpack 1.x uses Uglify plugin as a signal to minify *all* the assets
154155
// including CSS. This is confusing and will be removed in Webpack 2:
155156
// https://github.com/webpack/webpack/issues/283
156-
loader: ExtractTextPlugin.extract(customConfig.values.CSS_MODULES ? 'style!css?modules&-autoprefixer&importLoaders=1!postcss' : 'style!css?-autoprefixer!postcss')
157+
loader: ExtractTextPlugin.extract(customConfig.values.CSS_MODULES ? 'style!css?modules&-autoprefixer&importLoaders=1!postcss' : 'style!css?importLoaders=1&-autoprefixer!postcss')
157158
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
158159
},
159-
160160
// JSON is not enabled by default in Webpack but both Node and Browserify
161161
// allow it implicitly so we also enable it.
162162
{
@@ -194,7 +194,7 @@ module.exports = {
194194
},
195195
// @remove-on-eject-end
196196
// We use PostCSS for autoprefixing only.
197-
postcss: function () {
197+
postcss: function() {
198198
return [
199199
autoprefixer({
200200
browsers: [
@@ -255,7 +255,13 @@ module.exports = {
255255
}
256256
}),
257257
// Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
258-
new ExtractTextPlugin('static/css/[name].[contenthash:8].css')
258+
new ExtractTextPlugin('static/css/[name].[contenthash:8].css'),
259+
// Generate a manifest file which contains a mapping of all asset filenames
260+
// to their corresponding output file so that tools can pick it up without
261+
// having to parse `index.html`.
262+
new ManifestPlugin({
263+
fileName: 'asset-manifest.json'
264+
})
259265
].concat(customConfig.plugins),
260266
// Some libraries import Node modules but don't use them in the browser.
261267
// Tell Webpack to provide empty mocks for them so importing them works.

Diff for: ‎package.json

+25-24
Original file line numberDiff line numberDiff line change
@@ -23,46 +23,45 @@
2323
"react-scripts": "./bin/react-scripts.js"
2424
},
2525
"dependencies": {
26-
"autoprefixer": "6.4.1",
27-
"babel-core": "6.14.0",
28-
"babel-eslint": "6.1.2",
29-
"babel-jest": "15.0.0",
30-
"babel-loader": "6.2.5",
31-
"babel-plugin-transform-decorators-legacy": "^1.3.4",
32-
"babel-preset-react-app": "^0.2.1",
26+
"autoprefixer": "6.5.1",
27+
"babel-core": "6.17.0",
28+
"babel-eslint": "7.0.0",
29+
"babel-jest": "16.0.0",
30+
"babel-loader": "6.2.7",
31+
"babel-preset-react-app": "^1.0.0",
3332
"babel-preset-stage-0": "^6.5.0",
33+
"babel-plugin-transform-decorators-legacy": "^1.3.4",
3434
"case-sensitive-paths-webpack-plugin": "1.1.4",
3535
"chalk": "1.1.3",
3636
"connect-history-api-fallback": "1.3.0",
37-
"cross-spawn": "4.0.0",
38-
"css-loader": "0.24.0",
39-
"detect-port": "1.0.0",
37+
"cross-spawn": "4.0.2",
38+
"css-loader": "0.25.0",
39+
"detect-port": "1.0.1",
4040
"dotenv": "2.0.0",
41-
"eslint": "3.5.0",
42-
"eslint-config-react-app": "^0.2.1",
43-
"eslint-loader": "1.5.0",
44-
"eslint-plugin-flowtype": "2.18.1",
45-
"eslint-plugin-import": "1.12.0",
46-
"eslint-plugin-jsx-a11y": "2.2.2",
47-
"eslint-plugin-react": "6.3.0",
41+
"eslint": "3.8.1",
42+
"eslint-config-react-app": "^0.3.0",
43+
"eslint-loader": "1.6.0",
44+
"eslint-plugin-flowtype": "2.21.0",
45+
"eslint-plugin-import": "2.0.1",
46+
"eslint-plugin-jsx-a11y": "2.2.3",
47+
"eslint-plugin-react": "6.4.1",
4848
"extract-text-webpack-plugin": "1.0.1",
4949
"file-loader": "0.9.0",
5050
"filesize": "3.3.0",
51-
"find-cache-dir": "0.1.1",
5251
"fs-extra": "0.30.0",
5352
"gzip-size": "3.0.0",
54-
"html-webpack-plugin": "2.22.0",
55-
"http-proxy-middleware": "0.17.1",
56-
"jest": "15.1.1",
53+
"html-webpack-plugin": "2.24.0",
54+
"http-proxy-middleware": "0.17.2",
55+
"jest": "16.0.2",
5756
"json-loader": "0.5.4",
5857
"less": "^2.7.1",
5958
"less-loader": "^2.2.3",
6059
"node-sass": "^3.10.0",
6160
"object-assign": "4.1.0",
6261
"path-exists": "2.1.0",
63-
"postcss-loader": "0.13.0",
62+
"postcss-loader": "1.0.0",
6463
"promise": "7.1.1",
65-
"react-dev-utils": "^0.2.1",
64+
"react-dev-utils": "^0.3.0",
6665
"recursive-readdir": "2.1.0",
6766
"rimraf": "2.5.4",
6867
"sass-loader": "^4.0.2",
@@ -72,7 +71,8 @@
7271
"stylus-loader": "^2.3.1",
7372
"url-loader": "0.5.7",
7473
"webpack": "1.13.2",
75-
"webpack-dev-server": "1.16.1",
74+
"webpack-dev-server": "1.16.2",
75+
"webpack-manifest-plugin": "1.1.0",
7676
"whatwg-fetch": "1.0.0"
7777
},
7878
"devDependencies": {
@@ -134,6 +134,7 @@
134134
"url-loader",
135135
"webpack",
136136
"webpack-dev-server",
137+
"webpack-manifest-plugin",
137138
"whatwg-fetch"
138139
]
139140
}

Diff for: ‎scripts/build.js

+16-2
Original file line numberDiff line numberDiff line change
@@ -118,13 +118,27 @@ function printFileSizes(stats, previousSizeMap) {
118118
});
119119
}
120120

121+
// Print out errors
122+
function printErrors(summary, errors) {
123+
console.log(chalk.red(summary));
124+
console.log();
125+
errors.forEach(err => {
126+
console.log(err.message || err);
127+
console.log();
128+
});
129+
}
130+
121131
// Create the production build and print the deployment instructions.
122132
function build(previousSizeMap) {
123133
console.log('Creating an optimized production build...');
124134
webpack(config).run((err, stats) => {
125135
if (err) {
126-
console.error('Failed to create a production build. Reason:');
127-
console.error(err.message || err);
136+
printErrors('Failed to compile.', [err]);
137+
process.exit(1);
138+
}
139+
140+
if (stats.compilation.errors.length) {
141+
printErrors('Failed to compile.', stats.compilation.errors);
128142
process.exit(1);
129143
}
130144

Diff for: ‎scripts/eject.js

+24-14
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,25 @@ prompt(
3030

3131
var ownPath = path.join(__dirname, '..');
3232
var appPath = path.join(ownPath, '..', '..');
33+
34+
function verifyAbsent(file) {
35+
if (fs.existsSync(path.join(appPath, file))) {
36+
console.error(
37+
'`' + file + '` already exists in your app folder. We cannot ' +
38+
'continue as you would lose all the changes in that file or directory. ' +
39+
'Please move or delete it (maybe make a copy for backup) and run this ' +
40+
'command again.'
41+
);
42+
process.exit(1);
43+
}
44+
}
45+
46+
var folders = [
47+
'config',
48+
path.join('config', 'jest'),
49+
'scripts'
50+
];
51+
3352
var files = [
3453
path.join('config', 'customizers.js'),
3554
path.join('config', 'env.js'),
@@ -46,22 +65,13 @@ prompt(
4665
];
4766

4867
// Ensure that the app folder is clean and we won't override any files
49-
files.forEach(function(file) {
50-
if (fs.existsSync(path.join(appPath, file))) {
51-
console.error(
52-
'`' + file + '` already exists in your app folder. We cannot ' +
53-
'continue as you would lose all the changes in that file or directory. ' +
54-
'Please delete it (maybe make a copy for backup) and run this ' +
55-
'command again.'
56-
);
57-
process.exit(1);
58-
}
59-
});
68+
folders.forEach(verifyAbsent);
69+
files.forEach(verifyAbsent);
6070

6171
// Copy the files over
62-
fs.mkdirSync(path.join(appPath, 'config'));
63-
fs.mkdirSync(path.join(appPath, 'config', 'jest'));
64-
fs.mkdirSync(path.join(appPath, 'scripts'));
72+
folders.forEach(function(folder) {
73+
fs.mkdirSync(path.join(appPath, folder))
74+
});
6575

6676
console.log();
6777
console.log(cyan('Copying files into ' + appPath));

Diff for: ‎scripts/start.js

+2
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,8 @@ function addMiddleware(devServer) {
195195

196196
function runDevServer(host, port, protocol) {
197197
var devServer = new WebpackDevServer(compiler, {
198+
// Enable gzip compression of generated files.
199+
compress: true,
198200
// Silence WebpackDevServer's own logs since they're generally not useful.
199201
// It will still show compile warnings and errors with this setting.
200202
clientLogLevel: 'none',

Diff for: ‎template/README.md

+14-8
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ Then add this block to the `package.json` file of your project:
174174
Finally, you will need to install some packages *globally*:
175175

176176
```sh
177-
npm install -g eslint-config-react-app@0.2.1 eslint@3.5.0 babel-eslint@6.1.2 eslint-plugin-react@6.3.0 eslint-plugin-import@1.12.0 [email protected].2 eslint-plugin-flowtype@2.18.1
177+
npm install -g eslint-config-react-app@0.3.0 eslint@3.8.1 babel-eslint@7.0.0 eslint-plugin-react@6.4.1 eslint-plugin-import@2.0.1 [email protected].3 eslint-plugin-flowtype@2.21.0
178178
```
179179

180180
We recognize that this is suboptimal, but it is currently required due to the way we hide the ESLint dependency. The ESLint team is already [working on a solution to this](https://github.com/eslint/eslint/issues/3458) so this may become unnecessary in a couple of months.
@@ -320,7 +320,7 @@ function Header() {
320320
return <img src={logo} alt="Logo" />;
321321
}
322322

323-
export default function Header;
323+
export default Header;
324324
```
325325

326326
This ensures that when the project is built, Webpack will correctly move the images into the build folder, and provide us with correct paths.
@@ -444,6 +444,8 @@ default you will have `NODE_ENV` defined for you, and any other environment vari
444444
variable named `REACT_APP_SECRET_CODE` will be exposed in your JS as `process.env.REACT_APP_SECRET_CODE`, in addition
445445
to `process.env.NODE_ENV`.
446446
447+
>Note: Changing any environment variables will require you to restart the development server if it is running.
448+
447449
These environment variables can be useful for displaying information conditionally based on where the project is
448450
deployed or consuming sensitive data that lives outside of version control.
449451
@@ -800,8 +802,8 @@ node_js:
800802
- 6
801803
cache:
802804
directories:
803-
- node_modules
804-
script
805+
- node_modules
806+
script:
805807
- npm test
806808
```
807809
1. Trigger your first build with a git push.
@@ -879,15 +881,15 @@ This will let Create React App correctly infer the root path to use in the gener
879881
Open your `package.json` and add a `homepage` field:
880882
881883
```js
882-
"homepage": "http://myusername.github.io/my-app",
884+
"homepage": "https://myusername.github.io/my-app",
883885
```
884886
885887
**The above step is important!**<br>
886888
Create React App uses the `homepage` field to determine the root URL in the built HTML file.
887889
888-
Now, whenever you run `npm run build`, you will see a cheat sheet with instructions on how to deploy to GitHub pages.
890+
Now, whenever you run `npm run build`, you will see a cheat sheet with instructions on how to deploy to GitHub Pages.
889891
890-
To publish it at [http://myusername.github.io/my-app](http://myusername.github.io/my-app), run:
892+
To publish it at [https://myusername.github.io/my-app](https://myusername.github.io/my-app), run:
891893
892894
```sh
893895
npm install --save-dev gh-pages
@@ -899,16 +901,20 @@ Add the following script in your `package.json`:
899901
// ...
900902
"scripts": {
901903
// ...
902-
"deploy": "gh-pages -d build"
904+
"deploy": "npm run build&&gh-pages -d build"
903905
}
904906
```
905907
908+
(Note: the lack of whitespace is intentional.)
909+
906910
Then run:
907911
908912
```sh
909913
npm run deploy
910914
```
911915
916+
You can configure a custom domain with GitHub Pages by adding a `CNAME` file to the `public/` folder.
917+
912918
Note that GitHub Pages doesn't support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
913919
* You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#histories) about different history implementations in React Router.
914920
* Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a special redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages).

Diff for: ‎utils/createJestConfig.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,16 @@ module.exports = (resolve, rootDir, isEjecting) => {
1818
const setupTestsFile = pathExists.sync(paths.testsSetup) ? '<rootDir>/src/setupTests.js' : undefined;
1919

2020
const config = {
21+
collectCoverageFrom: ['src/**/*.{js,jsx}'],
2122
moduleFileExtensions: ['jsx', 'js', 'json'],
2223
moduleNameMapper: {
23-
'^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': resolve('config/jest/FileStub.js'),
24+
'^.+\\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': resolve('config/jest/FileStub.js'),
2425
'^.+\\.css$': resolve('config/jest/CSSStub.js')
2526
},
2627
setupFiles: [resolve('config/polyfills.js')],
2728
setupTestFrameworkScriptFile: setupTestsFile,
2829
testPathIgnorePatterns: ['<rootDir>/(build|docs|node_modules)/'],
2930
testEnvironment: 'node',
30-
testRegex: '(/__tests__/.*|\\.(test|spec))\\.(js|jsx)$',
3131
};
3232
if (rootDir) {
3333
config.rootDir = rootDir;

0 commit comments

Comments
 (0)