Skip to content

Commit 4c0c819

Browse files
mrmckebiansu
mrmckeb
authored and
iansu
committed
Add template support (#7716)
* Add template support * Update templates version check * Update TypeScript template README
1 parent e92db94 commit 4c0c819

File tree

158 files changed

+1819
-1550
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

158 files changed

+1819
-1550
lines changed

Diff for: ‎azure-pipelines.yml

+79-78
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,79 @@
1-
#
2-
# Azure Pipelines configuration for building and testing create-react-app on Linux, Windows, and macOS.
3-
#
4-
5-
trigger:
6-
- master
7-
8-
variables:
9-
CI: true
10-
# Overrides the Yarn and NPM cache directories so they are on the same drive as the source. This helps improve build performance on Windows hosted agents.
11-
YARN_CACHE_FOLDER: $(Build.SourcesDirectory)/../yarn-cache
12-
NPM_CONFIG_CACHE: $(Build.SourcesDirectory)/../npm-cache
13-
# Sets TEMP to be on the same drive as the cloned source on Windows. This avoids test scripts that "cd" into a directory under TEMP from failing because this directory is on a different drive from the current directory.
14-
VSTS_OVERWRITE_TEMP: True
15-
# Override Verdaccio package to use. This is temporary and is needed to avoid socket timeouts on hosted Windows agent (on Azure). This also changes Verdaccio to return a 503 (service unavailable) instead of a 404 (not found) when the connection to the uplink timesout.
16-
VERDACCIO_PACKAGE: https://github.com/willsmythe/verdaccio/releases/download/create-react-app/verdaccio-4.0.0-alpha.8.tgz
17-
18-
# ******************************************************************************
19-
# Simple test suite
20-
# ******************************************************************************
21-
jobs:
22-
- template: azure-pipelines-test-job.yml
23-
parameters:
24-
name: Simple
25-
testScript: tasks/e2e-simple.sh
26-
27-
# ******************************************************************************
28-
# Installs test suite
29-
# ******************************************************************************
30-
- template: azure-pipelines-test-job.yml
31-
parameters:
32-
name: Installs
33-
testScript: tasks/e2e-installs.sh
34-
35-
# ******************************************************************************
36-
# Kitchensink test suite
37-
# ******************************************************************************
38-
- template: azure-pipelines-test-job.yml
39-
parameters:
40-
name: Kitchensink
41-
testScript: tasks/e2e-kitchensink.sh
42-
43-
# ******************************************************************************
44-
# Kitchensink Eject test suite
45-
# ******************************************************************************
46-
- template: azure-pipelines-test-job.yml
47-
parameters:
48-
name: KitchensinkEject
49-
testScript: tasks/e2e-kitchensink-eject.sh
50-
51-
# ******************************************************************************
52-
# Behavior test suite
53-
# ******************************************************************************
54-
- template: azure-pipelines-test-job.yml
55-
parameters:
56-
name: Behavior
57-
testScript: tasks/e2e-behavior.sh
58-
configurations:
59-
LinuxNode8: { vmImage: 'ubuntu-16.04', nodeVersion: 8.x }
60-
LinuxNode10: { vmImage: 'ubuntu-16.04', nodeVersion: 10.x }
61-
# WindowsNode8: { vmImage: 'vs2017-win2016', nodeVersion: 8.x }
62-
# WindowsNode10: { vmImage: 'vs2017-win2016', nodeVersion: 10.x }
63-
MacNode8: { vmImage: 'macOS-10.13', nodeVersion: 8.x }
64-
MacNode10: { vmImage: 'macOS-10.13', nodeVersion: 10.x }
65-
66-
# ******************************************************************************
67-
# Old Node test suite
68-
# ******************************************************************************
69-
- job: OldNode
70-
pool:
71-
vmImage: ubuntu-16.04
72-
steps:
73-
- task: NodeTool@0
74-
inputs:
75-
versionSpec: 6.x
76-
displayName: 'Install Node.js 6.x'
77-
- bash: tasks/e2e-old-node.sh
78-
displayName: 'Run tests'
1+
#
2+
# Azure Pipelines configuration for building and testing create-react-app on Linux, Windows, and macOS.
3+
#
4+
5+
trigger:
6+
- master
7+
8+
variables:
9+
CI: true
10+
# Overrides the Yarn and NPM cache directories so they are on the same drive as the source. This helps improve build performance on Windows hosted agents.
11+
YARN_CACHE_FOLDER: $(Build.SourcesDirectory)/../yarn-cache
12+
NPM_CONFIG_CACHE: $(Build.SourcesDirectory)/../npm-cache
13+
# Sets TEMP to be on the same drive as the cloned source on Windows. This avoids test scripts that "cd" into a directory under TEMP from failing because this directory is on a different drive from the current directory.
14+
VSTS_OVERWRITE_TEMP: True
15+
# Override Verdaccio package to use. This is temporary and is needed to avoid socket timeouts on hosted Windows agent (on Azure). This also changes Verdaccio to return a 503 (service unavailable) instead of a 404 (not found) when the connection to the uplink timesout.
16+
VERDACCIO_PACKAGE: https://github.com/willsmythe/verdaccio/releases/download/create-react-app/verdaccio-4.0.0-alpha.8.tgz
17+
CRA_INTERNAL_TEST: true
18+
19+
# ******************************************************************************
20+
# Simple test suite
21+
# ******************************************************************************
22+
jobs:
23+
- template: azure-pipelines-test-job.yml
24+
parameters:
25+
name: Simple
26+
testScript: tasks/e2e-simple.sh
27+
28+
# ******************************************************************************
29+
# Installs test suite
30+
# ******************************************************************************
31+
- template: azure-pipelines-test-job.yml
32+
parameters:
33+
name: Installs
34+
testScript: tasks/e2e-installs.sh
35+
36+
# ******************************************************************************
37+
# Kitchensink test suite
38+
# ******************************************************************************
39+
- template: azure-pipelines-test-job.yml
40+
parameters:
41+
name: Kitchensink
42+
testScript: tasks/e2e-kitchensink.sh
43+
44+
# ******************************************************************************
45+
# Kitchensink Eject test suite
46+
# ******************************************************************************
47+
- template: azure-pipelines-test-job.yml
48+
parameters:
49+
name: KitchensinkEject
50+
testScript: tasks/e2e-kitchensink-eject.sh
51+
52+
# ******************************************************************************
53+
# Behavior test suite
54+
# ******************************************************************************
55+
- template: azure-pipelines-test-job.yml
56+
parameters:
57+
name: Behavior
58+
testScript: tasks/e2e-behavior.sh
59+
configurations:
60+
LinuxNode8: { vmImage: 'ubuntu-16.04', nodeVersion: 8.x }
61+
LinuxNode10: { vmImage: 'ubuntu-16.04', nodeVersion: 10.x }
62+
# WindowsNode8: { vmImage: 'vs2017-win2016', nodeVersion: 8.x }
63+
# WindowsNode10: { vmImage: 'vs2017-win2016', nodeVersion: 10.x }
64+
MacNode8: { vmImage: 'macOS-10.13', nodeVersion: 8.x }
65+
MacNode10: { vmImage: 'macOS-10.13', nodeVersion: 10.x }
66+
67+
# ******************************************************************************
68+
# Old Node test suite
69+
# ******************************************************************************
70+
- job: OldNode
71+
pool:
72+
vmImage: ubuntu-16.04
73+
steps:
74+
- task: NodeTool@0
75+
inputs:
76+
versionSpec: 6.x
77+
displayName: 'Install Node.js 6.x'
78+
- bash: tasks/e2e-old-node.sh
79+
displayName: 'Run tests'

Diff for: ‎docusaurus/docs/adding-typescript.md

+4-3
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,16 @@ title: Adding TypeScript
1212
To start a new Create React App project with [TypeScript](https://www.typescriptlang.org/), you can run:
1313

1414
```sh
15-
npx create-react-app my-app --typescript
15+
npx create-react-app my-app --template typescript
1616

1717
# or
1818

19-
yarn create react-app my-app --typescript
19+
yarn create react-app my-app --template typescript
2020
```
2121

2222
> If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` to ensure that `npx` always uses the latest version.
23+
>
24+
> Global installs of `create-react-app` are no longer supported.
2325
2426
To add [TypeScript](https://www.typescriptlang.org/) to a Create React App project, first install it:
2527

@@ -49,5 +51,4 @@ If your project is not created with TypeScript enabled, npx may be using a cache
4951

5052
If you are currently using [create-react-app-typescript](https://github.com/wmonk/create-react-app-typescript/), see [this blog post](https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/) for instructions on how to migrate to Create React App.
5153

52-
5354
Constant enums and namespaces are not supported, you can learn about the constraints of [using Babel with TypeScript here](https://babeljs.io/docs/en/babel-plugin-transform-typescript#caveats).

Diff for: ‎docusaurus/docs/advanced-configuration.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ You can adjust various development and production settings by setting environmen
1111
| :---------------------- | :---------: | :--------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1212
| BROWSER | ✅ Used | 🚫 Ignored | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a [browser](https://github.com/sindresorhus/open#app) to override this behavior, or set it to `none` to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to `npm start` will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the `.js` extension. |
1313
| BROWSER_ARGS | ✅ Used | 🚫 Ignored | When the `BROWSER` environment variable is specified, any arguments that you set to this environment variable will be passed to the browser instance. Multiple arguments are supported as a space separated list. By default, no arguments are passed through to browsers. |
14-
| HOST | ✅ Used | 🚫 Ignored | By default, the development web server binds to all hostnames on the device (`localhost`, LAN network address, etc.). You may use this variable to specify a different host. |
14+
| HOST | ✅ Used | 🚫 Ignored | By default, the development web server binds to all hostnames on the device (`localhost`, LAN network address, etc.). You may use this variable to specify a different host. |
1515
| PORT | ✅ Used | 🚫 Ignored | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. |
1616
| HTTPS | ✅ Used | 🚫 Ignored | When set to `true`, Create React App will run the development server in `https` mode. |
1717
| PUBLIC_URL | 🚫 Ignored | ✅ Used | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](deployment#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. |

Diff for: ‎docusaurus/docs/getting-started.md

+23-3
Original file line numberDiff line numberDiff line change
@@ -62,13 +62,33 @@ yarn create react-app my-app
6262

6363
_`yarn create` is available in Yarn 0.25+_
6464

65-
### Creating a TypeScript app
65+
### Selecting a template
6666

67-
Follow our [Adding TypeScript](adding-typescript.md) documentation to create a TypeScript app.
67+
You can now optionally start a new app from a template by appending `--template [template-name]` to the creation command.
68+
69+
If you don't select a template, we'll create your project with our base template.
70+
71+
Templates are always named in the format `cra-template-[template-name]`, however you only need to provide the `[template-name]` to the creation command.
72+
73+
```sh
74+
npx create-react-app my-app --template [template-name]
75+
```
76+
77+
> You can find a a list of available templates by searching for ["cra-template-\*"](https://www.npmjs.com/search?q=cra-template-*) on npm.
78+
79+
#### Creating a TypeScript app
80+
81+
You can start a new TypeScript app using templates. To use our provided TypeScript template, append `--template typescript` to the creation command.
82+
83+
```sh
84+
npx create-react-app my-app --template typescript
85+
```
86+
87+
If you already have a project and would like to add TypeScript, see our [Adding TypeScript](adding-typescript.md) documentation.
6888

6989
### Selecting a package manager
7090

71-
When you create a new app, the CLI will use [Yarn](https://yarnpkg.com/) to install dependencies (when available). If you have Yarn installed, but would prefer to use npm, you can append --use-npm to the creation command. For example:
91+
When you create a new app, the CLI will use [Yarn](https://yarnpkg.com/) to install dependencies (when available). If you have Yarn installed, but would prefer to use npm, you can append `--use-npm` to the creation command. For example:
7292

7393
```sh
7494
npx create-react-app my-app --use-npm

Diff for: ‎packages/cra-template-typescript/README.md

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# cra-template-typescript
2+
3+
This is the official TypeScript template for [Create React App](https://github.com/facebook/create-react-app).
4+
5+
To use this template, add `--template typescript` when creating a new app.
6+
7+
For example:
8+
9+
```sh
10+
npx create-react-app my-app --template typescript
11+
12+
# or
13+
14+
yarn create react-app my-app --template typescript
15+
```
16+
17+
For more information, please refer to:
18+
19+
- [Getting Started](https://create-react-app.dev/docs/getting-started) – How to create a new app.
20+
- [User Guide](https://create-react-app.dev) – How to develop apps bootstrapped with Create React App.

Diff for: ‎packages/cra-template-typescript/package.json

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "cra-template-typescript",
3+
"version": "1.0.0",
4+
"keywords": [
5+
"react",
6+
"create-react-app",
7+
"template",
8+
"typescript"
9+
],
10+
"description": "The base TypeScript template for Create React App.",
11+
"main": "template.json",
12+
"repository": {
13+
"type": "git",
14+
"url": "https://github.com/facebook/create-react-app.git",
15+
"directory": "packages/cra-template-typescript"
16+
},
17+
"license": "MIT",
18+
"engines": {
19+
"node": ">=8.10"
20+
},
21+
"bugs": {
22+
"url": "https://github.com/facebook/create-react-app/issues"
23+
},
24+
"files": [
25+
"template",
26+
"template.json"
27+
]
28+
}

Diff for: ‎packages/cra-template-typescript/template.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"dependencies": {
3+
"@types/node": "^12.0.0",
4+
"@types/react": "^16.9.0",
5+
"@types/react-dom": "^16.9.0",
6+
"@types/jest": "^24.0.0",
7+
"typescript": "^3.6.0"
8+
}
9+
}

Diff for: ‎packages/react-scripts/template-typescript/README.md renamed to ‎packages/cra-template-typescript/template/README.md

File renamed without changes.

Diff for: ‎packages/react-scripts/template-typescript/gitignore renamed to ‎packages/cra-template-typescript/template/gitignore

File renamed without changes.

Diff for: ‎packages/react-scripts/template-typescript/public/favicon.ico renamed to ‎packages/cra-template-typescript/template/public/favicon.ico

File renamed without changes.

Diff for: ‎packages/react-scripts/template-typescript/public/index.html renamed to ‎packages/cra-template-typescript/template/public/index.html

File renamed without changes.

Diff for: ‎packages/react-scripts/template-typescript/public/logo192.png renamed to ‎packages/cra-template-typescript/template/public/logo192.png

File renamed without changes.

Diff for: ‎packages/react-scripts/template-typescript/public/logo512.png renamed to ‎packages/cra-template-typescript/template/public/logo512.png

File renamed without changes.

Diff for: ‎packages/react-scripts/template-typescript/public/manifest.json renamed to ‎packages/cra-template-typescript/template/public/manifest.json

File renamed without changes.

Diff for: ‎packages/react-scripts/template-typescript/public/robots.txt renamed to ‎packages/cra-template-typescript/template/public/robots.txt

File renamed without changes.

Diff for: ‎packages/react-scripts/template-typescript/src/App.css renamed to ‎packages/cra-template-typescript/template/src/App.css

File renamed without changes.

Diff for: ‎packages/react-scripts/template-typescript/src/App.test.tsx renamed to ‎packages/cra-template-typescript/template/src/App.test.tsx

File renamed without changes.

Diff for: ‎packages/react-scripts/template-typescript/src/App.tsx renamed to ‎packages/cra-template-typescript/template/src/App.tsx

File renamed without changes.

Diff for: ‎packages/react-scripts/template-typescript/src/index.css renamed to ‎packages/cra-template-typescript/template/src/index.css

File renamed without changes.

Diff for: ‎packages/react-scripts/template-typescript/src/index.tsx renamed to ‎packages/cra-template-typescript/template/src/index.tsx

File renamed without changes.

Diff for: ‎packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/logo.svg renamed to ‎packages/cra-template-typescript/template/src/logo.svg

File renamed without changes.

Diff for: ‎packages/react-scripts/template-typescript/src/serviceWorker.ts renamed to ‎packages/cra-template-typescript/template/src/serviceWorker.ts

File renamed without changes.

Diff for: ‎packages/cra-template/README.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# cra-template
2+
3+
This is the official base template for [Create React App](https://github.com/facebook/create-react-app).
4+
5+
If you don't specify a template (for example, `--template typescript`), this template will be used by default.
6+
7+
For more information, please refer to:
8+
9+
- [Getting Started](https://create-react-app.dev/docs/getting-started) – How to create a new app.
10+
- [User Guide](https://create-react-app.dev) – How to develop apps bootstrapped with Create React App.

Diff for: ‎packages/cra-template/package.json

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "cra-template",
3+
"version": "1.0.0",
4+
"keywords": [
5+
"react",
6+
"create-react-app",
7+
"template"
8+
],
9+
"description": "The base template for Create React App.",
10+
"main": "template.json",
11+
"repository": {
12+
"type": "git",
13+
"url": "https://github.com/facebook/create-react-app.git",
14+
"directory": "packages/cra-template"
15+
},
16+
"license": "MIT",
17+
"engines": {
18+
"node": ">=8"
19+
},
20+
"bugs": {
21+
"url": "https://github.com/facebook/create-react-app/issues"
22+
},
23+
"files": [
24+
"template",
25+
"template.json"
26+
]
27+
}

Diff for: ‎packages/cra-template/template.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"dependencies": {}
3+
}

Diff for: ‎packages/react-scripts/template/README.md renamed to ‎packages/cra-template/template/README.md

File renamed without changes.

Diff for: ‎packages/react-scripts/template/gitignore renamed to ‎packages/cra-template/template/gitignore

File renamed without changes.

Diff for: ‎packages/react-scripts/template/public/favicon.ico renamed to ‎packages/cra-template/template/public/favicon.ico

File renamed without changes.

Diff for: ‎packages/react-scripts/template/public/index.html renamed to ‎packages/cra-template/template/public/index.html

File renamed without changes.

Diff for: ‎packages/react-scripts/template/public/logo192.png renamed to ‎packages/cra-template/template/public/logo192.png

File renamed without changes.

Diff for: ‎packages/react-scripts/template/public/logo512.png renamed to ‎packages/cra-template/template/public/logo512.png

File renamed without changes.

Diff for: ‎packages/react-scripts/template/public/manifest.json renamed to ‎packages/cra-template/template/public/manifest.json

File renamed without changes.

Diff for: ‎packages/react-scripts/template/public/robots.txt renamed to ‎packages/cra-template/template/public/robots.txt

File renamed without changes.

Diff for: ‎packages/react-scripts/template/src/App.css renamed to ‎packages/cra-template/template/src/App.css

File renamed without changes.

Diff for: ‎packages/react-scripts/template/src/App.js renamed to ‎packages/cra-template/template/src/App.js

File renamed without changes.

Diff for: ‎packages/react-scripts/template/src/App.test.js renamed to ‎packages/cra-template/template/src/App.test.js

File renamed without changes.

Diff for: ‎packages/cra-template/template/src/index.css

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
body {
2+
margin: 0;
3+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5+
sans-serif;
6+
-webkit-font-smoothing: antialiased;
7+
-moz-osx-font-smoothing: grayscale;
8+
}
9+
10+
code {
11+
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12+
monospace;
13+
}

Diff for: ‎packages/react-scripts/template/src/index.js renamed to ‎packages/cra-template/template/src/index.js

File renamed without changes.

Diff for: ‎packages/react-scripts/template-typescript/src/logo.svg renamed to ‎packages/cra-template/template/src/logo.svg

File renamed without changes.

Diff for: ‎packages/react-scripts/template/src/serviceWorker.js renamed to ‎packages/cra-template/template/src/serviceWorker.js

File renamed without changes.

0 commit comments

Comments
 (0)