From d81a1481da9cbb05f7d1bc2247c0a3804ad1874a Mon Sep 17 00:00:00 2001 From: bttf Date: Tue, 21 Mar 2017 22:05:29 -0700 Subject: [PATCH 1/5] introduce generate-component script; rename template into templates --- packages/react-scripts/bin/react-scripts.js | 1 + .../scripts/generate-component.js | 31 ++++++++++++++++++ packages/react-scripts/scripts/init.js | 3 +- .../{template => templates/app}/README.md | 0 .../{template => templates/app}/gitignore | 0 .../app}/public/favicon.ico | Bin .../app}/public/index.html | 0 .../{template => templates/app}/src/App.css | 0 .../{template => templates/app}/src/App.js | 0 .../app}/src/App.test.js | 0 .../{template => templates/app}/src/index.css | 0 .../{template => templates/app}/src/index.js | 0 .../{template => templates/app}/src/logo.svg | 0 .../templates/component/__component__.js | 14 ++++++++ .../templates/component/__component__.test.js | 8 +++++ 15 files changed, 56 insertions(+), 1 deletion(-) create mode 100644 packages/react-scripts/scripts/generate-component.js rename packages/react-scripts/{template => templates/app}/README.md (100%) rename packages/react-scripts/{template => templates/app}/gitignore (100%) rename packages/react-scripts/{template => templates/app}/public/favicon.ico (100%) rename packages/react-scripts/{template => templates/app}/public/index.html (100%) rename packages/react-scripts/{template => templates/app}/src/App.css (100%) rename packages/react-scripts/{template => templates/app}/src/App.js (100%) rename packages/react-scripts/{template => templates/app}/src/App.test.js (100%) rename packages/react-scripts/{template => templates/app}/src/index.css (100%) rename packages/react-scripts/{template => templates/app}/src/index.js (100%) rename packages/react-scripts/{template => templates/app}/src/logo.svg (100%) create mode 100644 packages/react-scripts/templates/component/__component__.js create mode 100644 packages/react-scripts/templates/component/__component__.test.js diff --git a/packages/react-scripts/bin/react-scripts.js b/packages/react-scripts/bin/react-scripts.js index 8a1175c99ea..2042825064a 100755 --- a/packages/react-scripts/bin/react-scripts.js +++ b/packages/react-scripts/bin/react-scripts.js @@ -19,6 +19,7 @@ switch (script) { case 'eject': case 'start': case 'test': + case 'generate-component': var result = spawn.sync( 'node', [require.resolve('../scripts/' + script)].concat(args), diff --git a/packages/react-scripts/scripts/generate-component.js b/packages/react-scripts/scripts/generate-component.js new file mode 100644 index 00000000000..47b19329d19 --- /dev/null +++ b/packages/react-scripts/scripts/generate-component.js @@ -0,0 +1,31 @@ +// @remove-on-eject-begin +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ +// @remove-on-eject-end +'use strict'; + +const name = process.argv[2]; +const directory = process.arg[3]; +const useYarn = fs.existsSync(paths.yarnLockFile); + +// component name is required +if (!name) { + console.log( + `Usage: ${useYarn ? 'yarn' : 'npm'} run generate-component [containing-directory]` + ); + process.exit(1); +} + +// create directory in src/ if directory is set +if (directory) { +} + +// copy files from templates/component to src/[directory/] + +// replace all instances of __component__ inside component.js and component.test.js with name diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js index 87d87e621e7..e19918abf03 100644 --- a/packages/react-scripts/scripts/init.js +++ b/packages/react-scripts/scripts/init.js @@ -47,6 +47,7 @@ module.exports = function( build: 'react-scripts build', test: 'react-scripts test --env=jsdom', eject: 'react-scripts eject', + 'generate-component': 'react-scripts generate-component', }; fs.writeFileSync( @@ -65,7 +66,7 @@ module.exports = function( // Copy the files for the user const templatePath = template ? path.resolve(originalDirectory, template) - : path.join(ownPath, 'template'); + : path.join(ownPath, 'templates/app'); if (fs.existsSync(templatePath)) { fs.copySync(templatePath, appPath); } else { diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/templates/app/README.md similarity index 100% rename from packages/react-scripts/template/README.md rename to packages/react-scripts/templates/app/README.md diff --git a/packages/react-scripts/template/gitignore b/packages/react-scripts/templates/app/gitignore similarity index 100% rename from packages/react-scripts/template/gitignore rename to packages/react-scripts/templates/app/gitignore diff --git a/packages/react-scripts/template/public/favicon.ico b/packages/react-scripts/templates/app/public/favicon.ico similarity index 100% rename from packages/react-scripts/template/public/favicon.ico rename to packages/react-scripts/templates/app/public/favicon.ico diff --git a/packages/react-scripts/template/public/index.html b/packages/react-scripts/templates/app/public/index.html similarity index 100% rename from packages/react-scripts/template/public/index.html rename to packages/react-scripts/templates/app/public/index.html diff --git a/packages/react-scripts/template/src/App.css b/packages/react-scripts/templates/app/src/App.css similarity index 100% rename from packages/react-scripts/template/src/App.css rename to packages/react-scripts/templates/app/src/App.css diff --git a/packages/react-scripts/template/src/App.js b/packages/react-scripts/templates/app/src/App.js similarity index 100% rename from packages/react-scripts/template/src/App.js rename to packages/react-scripts/templates/app/src/App.js diff --git a/packages/react-scripts/template/src/App.test.js b/packages/react-scripts/templates/app/src/App.test.js similarity index 100% rename from packages/react-scripts/template/src/App.test.js rename to packages/react-scripts/templates/app/src/App.test.js diff --git a/packages/react-scripts/template/src/index.css b/packages/react-scripts/templates/app/src/index.css similarity index 100% rename from packages/react-scripts/template/src/index.css rename to packages/react-scripts/templates/app/src/index.css diff --git a/packages/react-scripts/template/src/index.js b/packages/react-scripts/templates/app/src/index.js similarity index 100% rename from packages/react-scripts/template/src/index.js rename to packages/react-scripts/templates/app/src/index.js diff --git a/packages/react-scripts/template/src/logo.svg b/packages/react-scripts/templates/app/src/logo.svg similarity index 100% rename from packages/react-scripts/template/src/logo.svg rename to packages/react-scripts/templates/app/src/logo.svg diff --git a/packages/react-scripts/templates/component/__component__.js b/packages/react-scripts/templates/component/__component__.js new file mode 100644 index 00000000000..5493e23ce9c --- /dev/null +++ b/packages/react-scripts/templates/component/__component__.js @@ -0,0 +1,14 @@ +import React, { Component } from 'react'; + +export default class __component__ extends Component { + render() { + return ( +
+

Welcome to your new React Component

+

+ To get started, open up __componentDir__/__component__.js and start hacking! +

+
+ ); + } +} diff --git a/packages/react-scripts/templates/component/__component__.test.js b/packages/react-scripts/templates/component/__component__.test.js new file mode 100644 index 00000000000..627686fbcca --- /dev/null +++ b/packages/react-scripts/templates/component/__component__.test.js @@ -0,0 +1,8 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import __component__ from './__component__'; + +it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(<__component__ />, div); +}); From 8488823faec59d7d3cf1202e29c2b79a6f146898 Mon Sep 17 00:00:00 2001 From: bttf Date: Wed, 22 Mar 2017 07:59:50 -0700 Subject: [PATCH 2/5] Implement component generation --- .../scripts/generate-component.js | 62 +++++++++++++++++-- .../{__component__.js => component.js} | 3 - ..._component__.test.js => component.test.js} | 0 3 files changed, 57 insertions(+), 8 deletions(-) rename packages/react-scripts/templates/component/{__component__.js => component.js} (65%) rename packages/react-scripts/templates/component/{__component__.test.js => component.test.js} (100%) diff --git a/packages/react-scripts/scripts/generate-component.js b/packages/react-scripts/scripts/generate-component.js index 47b19329d19..4f1cb6d1f4c 100644 --- a/packages/react-scripts/scripts/generate-component.js +++ b/packages/react-scripts/scripts/generate-component.js @@ -10,22 +10,74 @@ // @remove-on-eject-end 'use strict'; -const name = process.argv[2]; -const directory = process.arg[3]; +const fs = require('fs-extra'); +const path = require('path'); +const paths = require('../config/paths'); const useYarn = fs.existsSync(paths.yarnLockFile); +let name; +let directory; + // component name is required -if (!name) { +if (process.argv.length < 3) { console.log( `Usage: ${useYarn ? 'yarn' : 'npm'} run generate-component [containing-directory]` ); process.exit(1); +} else { + name = process.argv[2]; + directory = process.argv.length > 3 ? process.argv[3] : ''; +} + +// if directory exists, respectfully bow out +if (directory && fs.existsSync(path.join(paths.appPath, 'src', directory))) { + console.log( + `Component directory src/${directory} exists. Cannot create component.` + ); + process.exit(1); +} + +// if component name exists, respectfully bow out +const componentPath = path.join(paths.appPath, 'src', directory, `${name}.js`); +const componentTestPath = path.join( + paths.appPath, + 'src', + directory, + `${name}.test.js` +); +if (fs.existsSync(componentPath) || fs.existsSync(componentTestPath)) { + console.log( + `Component/test file with name \`${name}\` exists. Cannot create component.` + ); + process.exit(1); } -// create directory in src/ if directory is set +// create directory and set copyPath +let copyPath = path.join(paths.appPath, 'src'); if (directory) { + copyPath = path.join(copyPath, directory); + fs.mkdirSync(copyPath); } -// copy files from templates/component to src/[directory/] +// copy files to copyPath +const templatePath = path.join( + paths.appNodeModules, + 'react-scripts', + 'templates', + 'component' +); +const componentTemplatePath = path.join(templatePath, 'component.js'); +const componentTestTemplatePath = path.join(templatePath, 'component.test.js'); +fs.copySync(componentTemplatePath, componentPath); +fs.copySync(componentTestTemplatePath, componentTestPath); // replace all instances of __component__ inside component.js and component.test.js with name +const componentFile = fs.readFileSync(componentPath, { encoding: 'utf8' }); +const componentTestFile = fs.readFileSync(componentTestPath, { + encoding: 'utf8', +}); +fs.writeFileSync(componentPath, componentFile.replace(/__component__/g, name)); +fs.writeFileSync( + componentTestPath, + componentTestFile.replace(/__component__/g, name) +); diff --git a/packages/react-scripts/templates/component/__component__.js b/packages/react-scripts/templates/component/component.js similarity index 65% rename from packages/react-scripts/templates/component/__component__.js rename to packages/react-scripts/templates/component/component.js index 5493e23ce9c..9629b795655 100644 --- a/packages/react-scripts/templates/component/__component__.js +++ b/packages/react-scripts/templates/component/component.js @@ -5,9 +5,6 @@ export default class __component__ extends Component { return (

Welcome to your new React Component

-

- To get started, open up __componentDir__/__component__.js and start hacking! -

); } diff --git a/packages/react-scripts/templates/component/__component__.test.js b/packages/react-scripts/templates/component/component.test.js similarity index 100% rename from packages/react-scripts/templates/component/__component__.test.js rename to packages/react-scripts/templates/component/component.test.js From 2276a7106a5d539b9722b98b5086b21e883da249 Mon Sep 17 00:00:00 2001 From: bttf Date: Thu, 23 Mar 2017 06:33:50 -0700 Subject: [PATCH 3/5] Fix template paths; tweak string output --- packages/react-scripts/package.json | 2 +- .../scripts/generate-component.js | 20 ++++++++++--------- packages/react-scripts/scripts/init.js | 7 +++++++ 3 files changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index b2cb03bb972..0ebc1bf9c44 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -14,7 +14,7 @@ "bin", "config", "scripts", - "template", + "templates", "utils" ], "bin": { diff --git a/packages/react-scripts/scripts/generate-component.js b/packages/react-scripts/scripts/generate-component.js index 4f1cb6d1f4c..1def53f4408 100644 --- a/packages/react-scripts/scripts/generate-component.js +++ b/packages/react-scripts/scripts/generate-component.js @@ -14,6 +14,7 @@ const fs = require('fs-extra'); const path = require('path'); const paths = require('../config/paths'); const useYarn = fs.existsSync(paths.yarnLockFile); +const ownPackageName = require(path.join(__dirname, '..', 'package.json')).name; let name; let directory; @@ -21,7 +22,7 @@ let directory; // component name is required if (process.argv.length < 3) { console.log( - `Usage: ${useYarn ? 'yarn' : 'npm'} run generate-component [containing-directory]` + `Usage: ${useYarn ? 'yarn' : 'npm run'} generate-component [containing-directory]` ); process.exit(1); } else { @@ -29,6 +30,14 @@ if (process.argv.length < 3) { directory = process.argv.length > 3 ? process.argv[3] : ''; } +const componentPath = path.join(paths.appPath, 'src', directory, `${name}.js`); +const componentTestPath = path.join( + paths.appPath, + 'src', + directory, + `${name}.test.js` +); + // if directory exists, respectfully bow out if (directory && fs.existsSync(path.join(paths.appPath, 'src', directory))) { console.log( @@ -38,13 +47,6 @@ if (directory && fs.existsSync(path.join(paths.appPath, 'src', directory))) { } // if component name exists, respectfully bow out -const componentPath = path.join(paths.appPath, 'src', directory, `${name}.js`); -const componentTestPath = path.join( - paths.appPath, - 'src', - directory, - `${name}.test.js` -); if (fs.existsSync(componentPath) || fs.existsSync(componentTestPath)) { console.log( `Component/test file with name \`${name}\` exists. Cannot create component.` @@ -62,7 +64,7 @@ if (directory) { // copy files to copyPath const templatePath = path.join( paths.appNodeModules, - 'react-scripts', + ownPackageName, 'templates', 'component' ); diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js index e19918abf03..e41c51e4fcb 100644 --- a/packages/react-scripts/scripts/init.js +++ b/packages/react-scripts/scripts/init.js @@ -175,6 +175,13 @@ module.exports = function( ' and scripts into the app directory. If you do this, you can’t go back!' ); console.log(); + console.log( + chalk.cyan( + ` ${displayedCommand} ${useYarn ? '' : 'run '}generate-component [component-directory]` + ) + ); + console.log(' Scaffolds a skeleton component with an accompanying test'); + console.log(); console.log('We suggest that you begin by typing:'); console.log(); console.log(chalk.cyan(' cd'), cdpath); From 01b711f66bc2f03bd4a6644bff8e5f92ec98d67a Mon Sep 17 00:00:00 2001 From: bttf Date: Thu, 23 Mar 2017 07:18:17 -0700 Subject: [PATCH 4/5] Add templates/ to .eslintignore --- .eslintignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintignore b/.eslintignore index 4eaf46c6d7d..d39b400c632 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,5 +1,5 @@ node_modules/ build my-app* -packages/react-scripts/template +packages/react-scripts/templates packages/react-scripts/fixtures From 89c1eddd7bb5638cb41286b135ba5863c6d9fc04 Mon Sep 17 00:00:00 2001 From: bttf Date: Thu, 23 Mar 2017 07:33:51 -0700 Subject: [PATCH 5/5] Update template paths everywhere --- CHANGELOG.md | 18 ++--- README.md | 74 +++++++++---------- packages/babel-preset-react-app/README.md | 2 +- packages/create-react-app/README.md | 2 +- packages/eslint-config-react-app/README.md | 2 +- packages/react-dev-utils/README.md | 4 +- packages/react-scripts/README.md | 2 +- packages/react-scripts/bin/react-scripts.js | 2 +- packages/react-scripts/config/paths.js | 12 +-- .../react-scripts/templates/app/README.md | 4 +- tasks/cra.sh | 2 +- tasks/e2e-simple.sh | 4 +- template/README.md | 2 +- 13 files changed, 65 insertions(+), 65 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b96fd76db7d..e202467e89e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -342,21 +342,21 @@ Thanks to [@Timer](https://github.com/timer) for cutting this release. * [#1489](https://github.com/facebookincubator/create-react-app/pull/1489) Support setting `"homepage"` to `"."` to generate relative asset paths. ([@tibdex](https://github.com/tibdex)) - Applications that don’t use the HTML5 `pushState` API can now be built to be served from any relative URL. To enable this, specify `"."` as your `homepage` setting in `package.json`. It used to be possible before with a few known bugs, but they should be fixed now. See [Serving the Same Build from Different Paths](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-the-same-build-from-different-paths). + Applications that don’t use the HTML5 `pushState` API can now be built to be served from any relative URL. To enable this, specify `"."` as your `homepage` setting in `package.json`. It used to be possible before with a few known bugs, but they should be fixed now. See [Serving the Same Build from Different Paths](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#serving-the-same-build-from-different-paths). * [#937](https://github.com/facebookincubator/create-react-app/pull/1504) Add `PUBLIC_URL` environment variable for advanced use. ([@EnoahNetzach](https://github.com/EnoahNetzach)) - If you use a CDN to serve the app, you can now specify `PUBLIC_URL` environment variable to override the base URL (including the hostname) for resources referenced from the built code. This new variable is mentioned in the new [Advanced Configuration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration) section. + If you use a CDN to serve the app, you can now specify `PUBLIC_URL` environment variable to override the base URL (including the hostname) for resources referenced from the built code. This new variable is mentioned in the new [Advanced Configuration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#advanced-configuration) section. * [#1440](https://github.com/facebookincubator/create-react-app/pull/1440) Make all `REACT_APP_*` environment variables accessible in `index.html`. ([@jihchi](https://github.com/jihchi)) - This makes all environment variables previously available in JS, also available in the HTML file, for example `%REACT_APP_MY_VARIABLE%`. See [Referencing Environment Variables in HTML](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#referencing-environment-variables-in-the-html). + This makes all environment variables previously available in JS, also available in the HTML file, for example `%REACT_APP_MY_VARIABLE%`. See [Referencing Environment Variables in HTML](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#referencing-environment-variables-in-the-html). * `react-dev-utils` * [#1148](https://github.com/facebookincubator/create-react-app/pull/1148) Configure which browser to open with `npm start`. ([@GAumala](https://github.com/GAumala)) - You can now disable the automatic browser launching by setting the `BROWSER` environment variable to `none`. You can also specify a different browser (or an arbitrary script) to open by default, [as supported by `opn` command](https://github.com/sindresorhus/opn#app) that we use under the hood. See [Advanced Configuration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration). + You can now disable the automatic browser launching by setting the `BROWSER` environment variable to `none`. You can also specify a different browser (or an arbitrary script) to open by default, [as supported by `opn` command](https://github.com/sindresorhus/opn#app) that we use under the hood. See [Advanced Configuration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#advanced-configuration). #### :boom: Breaking Change @@ -372,7 +372,7 @@ Thanks to [@Timer](https://github.com/timer) for cutting this release. * [#1264](https://github.com/facebookincubator/create-react-app/pull/1264) Remove interactive shell check when opening browser on start. ([@CaryLandholt](https://github.com/CaryLandholt)) - Non-interactive terminals no longer automatically disable launching of the browser. Instead, you need to [specify `none` as `BROWSER` environment variable](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration) if you wish to disable it. + Non-interactive terminals no longer automatically disable launching of the browser. Instead, you need to [specify `none` as `BROWSER` environment variable](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#advanced-configuration) if you wish to disable it. #### :bug: Bug Fix @@ -775,7 +775,7 @@ Thanks to [@fson](https://github.com/fson) for cutting this release. * `react-scripts` * [#944](https://github.com/facebookincubator/create-react-app/pull/944) Crash the build during CI whenever linter warnings are encountered. ([@excitement-engineer](https://github.com/excitement-engineer)) - Linter warnings and errors are now checked during a continuous integration build (set by the `CI` environment variable) and the build will fail if any issues are found. See [Continuous Integration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#continuous-integration) for more information. + Linter warnings and errors are now checked during a continuous integration build (set by the `CI` environment variable) and the build will fail if any issues are found. See [Continuous Integration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#continuous-integration) for more information. * [#1090](https://github.com/facebookincubator/create-react-app/pull/1090) Enable proxying of WebSockets. ([@dceddia](https://github.com/dceddia)) @@ -1044,8 +1044,8 @@ npm install --save-dev --save-exact react-scripts@0.5.1 ### Build Dependency (`react-scripts`) -* Adds [support for `public` folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) with arbitrary assets. ([@gaearon](https://github.com/gaearon) in [#703](https://github.com/facebookincubator/create-react-app/pull/703)) -* You can now [specify defaults](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for environment variables with `.env` file. ([@ayrton](https://github.com/ayrton) in [#695](https://github.com/facebookincubator/create-react-app/pull/695)) +* Adds [support for `public` folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#using-the-public-folder) with arbitrary assets. ([@gaearon](https://github.com/gaearon) in [#703](https://github.com/facebookincubator/create-react-app/pull/703)) +* You can now [specify defaults](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#adding-development-environment-variables-in-env) for environment variables with `.env` file. ([@ayrton](https://github.com/ayrton) in [#695](https://github.com/facebookincubator/create-react-app/pull/695)) * Ejecting now generates proper `.babelrc` and `.eslintrc`. ([@fson](https://github.com/fson) in [#689](https://github.com/facebookincubator/create-react-app/pull/689), [@gaearon](https://github.com/gaearon) in [#705](https://github.com/facebookincubator/create-react-app/pull/705)) * Some React warnings now [include the component stacktrace](https://twitter.com/dan_abramov/status/779308833399332864). ([@gaearon](https://github.com/gaearon) in [#716](https://github.com/facebookincubator/create-react-app/pull/716)) * `npm start` doesn’t fail in a composed Docker container. ([@arekkas](https://github.com/arekkas) in [#711](https://github.com/facebookincubator/create-react-app/issues/711)) @@ -1101,7 +1101,7 @@ You would need to move both `index.html` and `src/favicon.ico` into the `public` ``` -This ensures it become a part of the build output, and resolves correctly both with client-side routing and non-root `homepage` in `package.json`. Read more about [using the `public` folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) and [why these changes were made](https://github.com/facebookincubator/create-react-app/pull/703). +This ensures it become a part of the build output, and resolves correctly both with client-side routing and non-root `homepage` in `package.json`. Read more about [using the `public` folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#using-the-public-folder) and [why these changes were made](https://github.com/facebookincubator/create-react-app/pull/703). ## 0.4.3 (September 18, 2016) diff --git a/README.md b/README.md index ec24d939774..ec801dd88c0 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ Create React apps with no build configuration. * [Getting Started](#getting-started) – How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md) – How to develop apps bootstrapped with Create React App. Create React App works on macOS, Windows, and Linux.
If something doesn’t work please [file an issue](https://github.com/facebookincubator/create-react-app/issues/new). @@ -94,7 +94,7 @@ You will see the build errors and lint warnings in the console. Runs the test watcher in an interactive mode.
By default, runs tests related to files changes since the last commit. -[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) +[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#running-tests) ### `npm run build` or `yarn build` @@ -106,45 +106,45 @@ Your app is ready to be deployed! ## User Guide -The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: - -- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) -- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) -- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) -- [Supported Language Features and Polyfills](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#supported-language-features-and-polyfills) -- [Syntax Highlighting in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#syntax-highlighting-in-the-editor) -- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) -- [Debugging in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#debugging-in-the-editor) -- [Changing the Page ``](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#changing-the-page-title) -- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) -- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) -- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) -- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) -- [Adding a CSS Preprocessor (Sass, Less etc.)](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc) -- [Adding Images, Fonts, and Files](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-fonts-and-files) -- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) -- [Using Global Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-global-variables) -- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) -- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) -- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) -- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) -- [Integrating with an API Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-an-api-backend) -- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) -- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) -- [Generating Dynamic `<meta>` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) -- [Pre-Rendering into Static HTML Files](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#pre-rendering-into-static-html-files) -- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) -- [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation) -- [Making a Progressive Web App](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) -- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) -- [Advanced Configuration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration) -- [Troubleshooting](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#troubleshooting) +The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md) includes information on different topics, such as: + +- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#updating-to-new-releases) +- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#folder-structure) +- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#available-scripts) +- [Supported Language Features and Polyfills](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#supported-language-features-and-polyfills) +- [Syntax Highlighting in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#syntax-highlighting-in-the-editor) +- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#displaying-lint-output-in-the-editor) +- [Debugging in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#debugging-in-the-editor) +- [Changing the Page `<title>`](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#changing-the-page-title) +- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#installing-a-dependency) +- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#importing-a-component) +- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#adding-a-stylesheet) +- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#post-processing-css) +- [Adding a CSS Preprocessor (Sass, Less etc.)](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#adding-a-css-preprocessor-sass-less-etc) +- [Adding Images, Fonts, and Files](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#adding-images-fonts-and-files) +- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#using-the-public-folder) +- [Using Global Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#using-global-variables) +- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#adding-bootstrap) +- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#adding-flow) +- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#adding-custom-environment-variables) +- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#can-i-use-decorators) +- [Integrating with an API Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#integrating-with-an-api-backend) +- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#proxying-api-requests-in-development) +- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#using-https-in-development) +- [Generating Dynamic `<meta>` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#generating-dynamic-meta-tags-on-the-server) +- [Pre-Rendering into Static HTML Files](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#pre-rendering-into-static-html-files) +- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#running-tests) +- [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#developing-components-in-isolation) +- [Making a Progressive Web App](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#making-a-progressive-web-app) +- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#deployment) +- [Advanced Configuration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#advanced-configuration) +- [Troubleshooting](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#troubleshooting) A copy of the user guide will be created as `README.md` in your project folder. ## How to Update to New Versions? -Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) for this and other information. +Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#updating-to-new-releases) for this and other information. ## Philosophy @@ -186,7 +186,7 @@ Some features are currently **not supported**: * Server rendering. * Some experimental syntax extensions (e.g. decorators). * CSS Modules. -* Importing LESS or Sass directly ([but you still can use them](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc)). +* Importing LESS or Sass directly ([but you still can use them](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#adding-a-css-preprocessor-sass-less-etc)). * Hot reloading of components. Some of them might get added in the future if they are stable, are useful to majority of React apps, don’t conflict with existing tools, and don’t introduce additional configuration. diff --git a/packages/babel-preset-react-app/README.md b/packages/babel-preset-react-app/README.md index 4dc9fb9b168..99f33356889 100644 --- a/packages/babel-preset-react-app/README.md +++ b/packages/babel-preset-react-app/README.md @@ -4,7 +4,7 @@ This package includes the Babel preset used by [Create React App](https://github Please refer to its documentation: * [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md) – How to develop apps bootstrapped with Create React App. ## Usage in Create React App Projects diff --git a/packages/create-react-app/README.md b/packages/create-react-app/README.md index c8fed06489f..6c360752e2b 100644 --- a/packages/create-react-app/README.md +++ b/packages/create-react-app/README.md @@ -4,4 +4,4 @@ This package includes the global command for [Create React App](https://github.c Please refer to its documentation: * [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md) – How to develop apps bootstrapped with Create React App. diff --git a/packages/eslint-config-react-app/README.md b/packages/eslint-config-react-app/README.md index 8eace6efffc..f893f3c0190 100644 --- a/packages/eslint-config-react-app/README.md +++ b/packages/eslint-config-react-app/README.md @@ -4,7 +4,7 @@ This package includes the shareable ESLint configuration used by [Create React A Please refer to its documentation: * [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md) – How to develop apps bootstrapped with Create React App. ## Usage in Create React App Projects diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md index 26d762c3597..282ee28b451 100644 --- a/packages/react-dev-utils/README.md +++ b/packages/react-dev-utils/README.md @@ -4,7 +4,7 @@ This package includes some utilities used by [Create React App](https://github.c Please refer to its documentation: * [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md) – How to develop apps bootstrapped with Create React App. ## Usage in Create React App Projects @@ -12,7 +12,7 @@ These utilities come by default with [Create React App](https://github.com/faceb ## Usage Outside of Create React App -If you don’t use Create React App, or if you [ejected](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject), you may keep using these utilities. Their development will be aligned with Create React App, so major versions of these utilities may come out relatively often. Feel free to fork or copy and paste them into your projects if you’d like to have more control over them, or feel free to use the old versions. Not all of them are React-specific, but we might make some of them more React-specific in the future. +If you don’t use Create React App, or if you [ejected](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#npm-run-eject), you may keep using these utilities. Their development will be aligned with Create React App, so major versions of these utilities may come out relatively often. Feel free to fork or copy and paste them into your projects if you’d like to have more control over them, or feel free to use the old versions. Not all of them are React-specific, but we might make some of them more React-specific in the future. ### Entry Points diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index 8004b887004..8f8c186f777 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -4,4 +4,4 @@ This package includes scripts and configuration used by [Create React App](https Please refer to its documentation: * [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md) – How to develop apps bootstrapped with Create React App. diff --git a/packages/react-scripts/bin/react-scripts.js b/packages/react-scripts/bin/react-scripts.js index 2042825064a..5be161ea789 100755 --- a/packages/react-scripts/bin/react-scripts.js +++ b/packages/react-scripts/bin/react-scripts.js @@ -47,7 +47,7 @@ switch (script) { console.log('Unknown script "' + script + '".'); console.log('Perhaps you need to update react-scripts?'); console.log( - 'See: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases' + 'See: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md#updating-to-new-releases' ); break; } diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js index 76397756040..61899ee0b45 100644 --- a/packages/react-scripts/config/paths.js +++ b/packages/react-scripts/config/paths.js @@ -126,13 +126,13 @@ if ( module.exports = { appPath: resolveApp('.'), appBuild: resolveOwn('../../build'), - appPublic: resolveOwn('template/public'), - appHtml: resolveOwn('template/public/index.html'), - appIndexJs: resolveOwn('template/src/index.js'), + appPublic: resolveOwn('templates/app/public'), + appHtml: resolveOwn('templates/app/public/index.html'), + appIndexJs: resolveOwn('templates/app/src/index.js'), appPackageJson: resolveOwn('package.json'), - appSrc: resolveOwn('template/src'), - yarnLockFile: resolveOwn('template/yarn.lock'), - testsSetup: resolveOwn('template/src/setupTests.js'), + appSrc: resolveOwn('templates/app/src'), + yarnLockFile: resolveOwn('templates/app/yarn.lock'), + testsSetup: resolveOwn('templates/app/src/setupTests.js'), appNodeModules: resolveOwn('node_modules'), nodePaths: nodePaths, publicUrl: getPublicUrl(resolveOwn('package.json')), diff --git a/packages/react-scripts/templates/app/README.md b/packages/react-scripts/templates/app/README.md index 147c9280e24..47197792627 100644 --- a/packages/react-scripts/templates/app/README.md +++ b/packages/react-scripts/templates/app/README.md @@ -1,7 +1,7 @@ This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app). Below you will find some information on how to perform common tasks.<br> -You can find the most recent version of this guide [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md). +You can find the most recent version of this guide [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md). ## Table of Contents @@ -1613,4 +1613,4 @@ Please refer to [this section](#resolving-heroku-deployment-errors). ## Something Missing? -If you have ideas for more “How To” recipes that should be on this page, [let us know](https://github.com/facebookincubator/create-react-app/issues) or [contribute some!](https://github.com/facebookincubator/create-react-app/edit/master/packages/react-scripts/template/README.md) +If you have ideas for more “How To” recipes that should be on this page, [let us know](https://github.com/facebookincubator/create-react-app/issues) or [contribute some!](https://github.com/facebookincubator/create-react-app/edit/master/packages/react-scripts/templates/app/README.md) diff --git a/tasks/cra.sh b/tasks/cra.sh index c94559406d2..462d779c8ac 100755 --- a/tasks/cra.sh +++ b/tasks/cra.sh @@ -17,7 +17,7 @@ cd "$(dirname "$0")" function cleanup { echo 'Cleaning up.' # Uncomment when snapshot testing is enabled by default: - # rm ./template/src/__snapshots__/App.test.js.snap + # rm ./templates/app/src/__snapshots__/App.test.js.snap } # Error messages are redirected to stderr diff --git a/tasks/e2e-simple.sh b/tasks/e2e-simple.sh index d733656d866..af91460ac0d 100755 --- a/tasks/e2e-simple.sh +++ b/tasks/e2e-simple.sh @@ -23,7 +23,7 @@ function cleanup { echo 'Cleaning up.' cd "$root_path" # Uncomment when snapshot testing is enabled by default: - # rm ./packages/react-scripts/template/src/__snapshots__/App.test.js.snap + # rm ./packages/react-scripts/templates/app/src/__snapshots__/App.test.js.snap rm -rf "$temp_cli_path" $temp_app_path } @@ -116,7 +116,7 @@ exists build/favicon.ico # Run tests with CI flag CI=true npm test # Uncomment when snapshot testing is enabled by default: -# exists template/src/__snapshots__/App.test.js.snap +# exists templates/app/src/__snapshots__/App.test.js.snap # Test local start command npm start -- --smoke-test diff --git a/template/README.md b/template/README.md index 32efd00ff82..f595fe72bed 100644 --- a/template/README.md +++ b/template/README.md @@ -1,4 +1,4 @@ This page has moved!<br> -Please update your link to point [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) instead. +Please update your link to point [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/templates/app/README.md) instead. Sorry for the inconvenience!