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
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 8a1175c99ea..5be161ea789 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),
@@ -46,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/package.json b/packages/react-scripts/package.json
index 3e951ab9ad3..e773fb783d5 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
new file mode 100644
index 00000000000..1def53f4408
--- /dev/null
+++ b/packages/react-scripts/scripts/generate-component.js
@@ -0,0 +1,85 @@
+// @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 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;
+
+// component name is required
+if (process.argv.length < 3) {
+ console.log(
+ `Usage: ${useYarn ? 'yarn' : 'npm run'} generate-component <component-name> [containing-directory]`
+ );
+ process.exit(1);
+} else {
+ name = process.argv[2];
+ 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(
+ `Component directory src/${directory} exists. Cannot create component.`
+ );
+ process.exit(1);
+}
+
+// if component name exists, respectfully bow out
+if (fs.existsSync(componentPath) || fs.existsSync(componentTestPath)) {
+ console.log(
+ `Component/test file with name \`${name}\` exists. Cannot create component.`
+ );
+ process.exit(1);
+}
+
+// create directory and set copyPath
+let copyPath = path.join(paths.appPath, 'src');
+if (directory) {
+ copyPath = path.join(copyPath, directory);
+ fs.mkdirSync(copyPath);
+}
+
+// copy files to copyPath
+const templatePath = path.join(
+ paths.appNodeModules,
+ ownPackageName,
+ '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/scripts/init.js b/packages/react-scripts/scripts/init.js
index 87d87e621e7..e41c51e4fcb 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 {
@@ -174,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-name> [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);
diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/templates/app/README.md
similarity index 99%
rename from packages/react-scripts/template/README.md
rename to packages/react-scripts/templates/app/README.md
index 147c9280e24..47197792627 100644
--- a/packages/react-scripts/template/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/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..9629b795655
--- /dev/null
+++ b/packages/react-scripts/templates/component/component.js
@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+export default class __component__ extends Component {
+ render() {
+ return (
+ <div>
+ <h1>Welcome to your new React Component</h1>
+ </div>
+ );
+ }
+}
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);
+});
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!