diff --git a/.alexignore b/.alexignore new file mode 100644 index 00000000000..0167c31e931 --- /dev/null +++ b/.alexignore @@ -0,0 +1,4 @@ +build + +CHANGELOG* +CODE_OF_CONDUCT.md diff --git a/.alexrc b/.alexrc new file mode 100644 index 00000000000..8cda2010b9d --- /dev/null +++ b/.alexrc @@ -0,0 +1,18 @@ +{ + "allow": [ + "attacks", + "colors", + "conservative", + "crashes", + "executed", + "executes", + "execution", + "failed", + "hook", + "host-hostess", + "hostesses-hosts", + "invalid", + "remain", + "watchman-watchwoman" + ] +} diff --git a/.eslintignore b/.eslintignore index 27c694cea55..2628bc87bab 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,6 +1,4 @@ node_modules/ -build -my-app* -packages/react-scripts/template -packages/react-scripts/fixtures -fixtures/ +build/ +test/fixtures/webpack-message-formatting/src/AppBabel.js +packages/react-error-overlay/lib/ diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index b642bbc5c14..00000000000 --- a/.eslintrc +++ /dev/null @@ -1,17 +0,0 @@ -{ - "extends": "eslint:recommended", - "env": { - "browser": true, - "commonjs": true, - "node": true, - "es6": true - }, - "parserOptions": { - "ecmaVersion": 2018 - }, - "rules": { - "no-console": "off", - "strict": ["error", "global"], - "curly": "warn" - } -} diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 00000000000..7d6e9efcca0 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,52 @@ +{ + "extends": "eslint:recommended", + "env": { + "browser": true, + "commonjs": true, + "node": true, + "es6": true, + "jest": true + }, + "parserOptions": { + "ecmaVersion": 2018 + }, + "rules": { + "no-console": "off", + "strict": ["error", "global"], + "curly": "warn" + }, + "overrides": [ + { + "files": [ + "docusaurus/website/src/**/*.js", + "packages/cra-template/**/*.js", + "packages/react-error-overlay/**/*.js", + "packages/react-scripts/fixtures/kitchensink/template/{src,integration}/**/*.js", + "test/fixtures/*/src/*.js" + ], + "excludedFiles": ["packages/react-error-overlay/*.js"], + "extends": ["react-app", "react-app/jest"] + }, + { + "files": [ + "test/fixtures/webpack-message-formatting/src/{AppLintError,AppLintWarning,AppUnknownFile}.js" + ], + "rules": { + "no-unused-vars": "off", + "no-undef": "off" + } + }, + { + "files": ["test/fixtures/webpack-message-formatting/src/Export5.js"], + "rules": { + "import/no-anonymous-default-export": "off" + } + }, + { + "files": ["test/fixtures/issue-5176-flow-class-properties/src/App.js"], + "rules": { + "no-dupe-class-members": "off" + } + } + ] +} diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 00000000000..6313b56c578 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +* text=auto eol=lf diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS new file mode 100644 index 00000000000..77ceec87b2b --- /dev/null +++ b/.github/CODEOWNERS @@ -0,0 +1,2 @@ +packages/ @iansu @mrmckeb +docusaurus/ @iansu @mrmckeb diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 00000000000..7c05e921500 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1 @@ +open_collective: create-react-app diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE/bug_report.md similarity index 85% rename from .github/ISSUE_TEMPLATE.md rename to .github/ISSUE_TEMPLATE/bug_report.md index d2612759e2f..0f391681bef 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -1,29 +1,26 @@ - - -### Is this a bug report? - -(write your answer here) +--- +name: Bug report +about: Create a report to help us improve +labels: 'issue: bug report, needs triage' +--- +### Describe the bug + +(Write your answer here.) + ### Did you try recovering your dependencies? (Write your answer here if relevant.) - ### Environment -(paste the output of the command here) +(paste the output of the command here.) -### Steps to Reproduce +### Steps to reproduce + +(Write your answer here.) + +### Describe the solution you'd like + + + +(Describe your proposed solution here.) + +### Describe alternatives you've considered + + + +(Write your answer here.) + +### Additional context + + + +(Write your answer here.) diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md new file mode 100644 index 00000000000..e547baf9d3f --- /dev/null +++ b/.github/ISSUE_TEMPLATE/question.md @@ -0,0 +1,13 @@ +--- +name: Question +about: Get help with Create React App +labels: 'needs triage' +--- + +If you have a general question about Create React App or about building an app with Create React App we encourage you to post in GitHub Discussions instead of this issue tracker. The maintainers and other community members can provide help and answer your questions there: https://github.com/facebook/create-react-app/discussions + +If you're looking for general information on using React, the React docs have a list of resources: https://reactjs.org/community/support.html + +If you've discovered a bug or would like to propose a change please use one of the other issue templates. + +Thanks! diff --git a/.github/lock.yml b/.github/lock.yml new file mode 100644 index 00000000000..1815cbffcec --- /dev/null +++ b/.github/lock.yml @@ -0,0 +1,11 @@ +# Configuration for lock-threads - https://github.com/dessant/lock-threads + +# Number of days of inactivity before a closed issue or pull request is locked +daysUntilLock: 5 + +# Issues and pull requests with these labels will not be locked. Set to `[]` to disable +exemptLabels: [] + +# Do not comment when locking +setLockReason: false +lockComment: false diff --git a/.github/stale.yml b/.github/stale.yml new file mode 100644 index 00000000000..91807e989b9 --- /dev/null +++ b/.github/stale.yml @@ -0,0 +1,61 @@ +# Configuration for probot-stale - https://github.com/probot/stale + +# Number of days of inactivity before an Issue or Pull Request becomes stale +daysUntilStale: 30 + +# Number of days of inactivity before a stale Issue or Pull Request is closed. +# Set to false to disable. If disabled, issues still need to be closed manually, but will remain marked as stale. +daysUntilClose: 5 + +# Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable +exemptLabels: + - 'contributions: claimed' + - 'contributions: up for grabs!' + - 'good first issue' + - 'issue: announcement' + - 'issue: bug' + - 'issue: needs investigation' + - 'issue: proposal' + - 'tag: breaking change' + - 'tag: bug fix' + - 'tag: documentation' + - 'tag: enhancement' + - 'tag: internal' + - 'tag: new feature' + - 'tag: underlying tools' + +# Set to true to ignore issues in a project (defaults to false) +exemptProjects: true + +# Set to true to ignore issues in a milestone (defaults to false) +exemptMilestones: true + +# Label to use when marking as stale +staleLabel: stale + +# Limit the number of actions per hour, from 1-30. Default is 30 +limitPerRun: 30 + +issues: + # Comment to post when marking Issues as stale. + markComment: > + This issue has been automatically marked as stale because it has not had any + recent activity. It will be closed in 5 days if no further activity occurs. + + # Comment to post when closing a stale Issue. + closeComment: > + This issue has been automatically closed because it has not had any recent + activity. If you have a question or comment, please open a new issue. + +pulls: + # Comment to post when marking Pull Request as stale. + markComment: > + This pull request has been automatically marked as stale because it has not + had any recent activity. It will be closed in 5 days if no further activity + occurs. + + # Comment to post when closing a stale Pull Request. + closeComment: > + This pull request has been automatically closed because it has not had any + recent activity. If you have a question or comment, please open a new + issue. Thank you for your contribution! diff --git a/.github/workflows/build-and-test.yml b/.github/workflows/build-and-test.yml new file mode 100644 index 00000000000..ed41799251d --- /dev/null +++ b/.github/workflows/build-and-test.yml @@ -0,0 +1,76 @@ +name: 'Build & Test' + +on: + push: + branches: + - main + pull_request: + branches: + - main + +jobs: + build: + name: 'Build (${{ matrix.os }}, Node ${{ matrix.node }})' + runs-on: ${{ matrix.os }} + strategy: + fail-fast: false + matrix: + os: + - 'ubuntu-latest' + node: + - '16' + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: ${{ matrix.node }} + cache: 'npm' + - name: Install dependencies + run: npm ci --prefer-offline + - name: Build + run: npm run build + + integration: + name: 'Integration Tests (${{ matrix.os }}, Node ${{ matrix.node }})' + runs-on: ${{ matrix.os }} + strategy: + fail-fast: false + matrix: + os: + - 'ubuntu-latest' + - 'macos-latest' + - 'windows-latest' + node: + - '16' + steps: + - uses: actions/checkout@v3 + - name: Setup node + uses: actions/setup-node@v3 + with: + node-version: ${{ matrix.node }} + cache: 'npm' + - name: Install dependencies + run: npm ci --prefer-offline + # The integration tests are run with yarn, so we need to install it. + - name: Install yarn + run: npm i -g yarn + - name: Run integration tests + run: npm run test:integration + + e2e-simple: + name: E2E Simple + uses: ./.github/workflows/e2e-base.yml + with: + testScript: 'tasks/e2e-simple.sh' + + e2e-installs: + name: E2E Installs + uses: ./.github/workflows/e2e-base.yml + with: + testScript: 'tasks/e2e-installs.sh' + + e2e-kitchensink: + name: E2E Kitchensink + uses: ./.github/workflows/e2e-base.yml + with: + testScript: 'tasks/e2e-kitchensink.sh' diff --git a/.github/workflows/e2e-base.yml b/.github/workflows/e2e-base.yml new file mode 100644 index 00000000000..d79a43b8676 --- /dev/null +++ b/.github/workflows/e2e-base.yml @@ -0,0 +1,35 @@ +on: + workflow_call: + inputs: + testScript: + required: true + type: string + +name: E2E + +jobs: + test: + name: 'Test (${{ matrix.os }}, Node ${{ matrix.node }})' + runs-on: ${{ matrix.os }} + strategy: + fail-fast: false + matrix: + os: + - 'ubuntu-latest' + node: + - '16' + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: ${{ matrix.node }} + cache: 'npm' + - name: Install + run: npm ci --prefer-offline + - name: Initialize Global Git config + run: | + git config --global core.autocrlf false + git config --global user.name "Create React App" + git config --global user.email "cra@email.com" + - name: Run tests + run: ${{ inputs.testScript }} diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml new file mode 100644 index 00000000000..47bd841572e --- /dev/null +++ b/.github/workflows/lint.yml @@ -0,0 +1,21 @@ +name: Lint + +on: [push, pull_request] + +jobs: + lint: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: '16' + cache: 'npm' + - name: Install + run: npm ci --prefer-offline + - name: Alex + run: npm run alex + - name: Prettier + run: npm run prettier -- --list-different + - name: Eslint + run: npm run eslint -- --max-warnings 0 diff --git a/.gitignore b/.gitignore index ffa71fafc6d..3ae88f84d8b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,7 @@ .idea/ .vscode/ node_modules/ -build +build/ .DS_Store *.tgz my-app* diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000000..18a58d393ef --- /dev/null +++ b/.prettierignore @@ -0,0 +1,9 @@ +build/ +package-lock.json +test/fixtures/webpack-message-formatting/src/AppBabel.js +test/fixtures/webpack-message-formatting/src/AppCss.css +packages/react-error-overlay/fixtures/bundle* +packages/react-error-overlay/fixtures/inline* +packages/react-error-overlay/fixtures/junk* +packages/react-error-overlay/lib/ +packages/react-error-overlay/coverage/ diff --git a/.prettierrc b/.prettierrc index 8ff820d3bc0..7a7fd85ee2a 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,5 @@ { - "trailingComma": "es5", + "arrowParens": "avoid", "singleQuote": true, "semi": true } diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 846a8143750..00000000000 --- a/.travis.yml +++ /dev/null @@ -1,35 +0,0 @@ ---- -dist: trusty -language: node_js -node_js: - - 8 - - 10 -cache: - yarn: true - directories: - - .npm -before_install: - - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --nightly - - export PATH="$HOME/.yarn/bin:$PATH" -install: true -script: - - 'if [ $TEST_SUITE = "simple" ]; then tasks/e2e-simple.sh; fi' - - 'if [ $TEST_SUITE = "installs" ]; then tasks/e2e-installs.sh; fi' - - 'if [ $TEST_SUITE = "kitchensink" ]; then tasks/e2e-kitchensink.sh; fi' - - 'if [ $TEST_SUITE = "kitchensink-eject" ]; then tasks/e2e-kitchensink-eject.sh; fi' - - 'if [ $TEST_SUITE = "old-node" ]; then tasks/e2e-old-node.sh; fi' - - 'if [ $TEST_SUITE = "behavior" ]; then tasks/e2e-behavior.sh; fi' -env: - matrix: - - TEST_SUITE=simple - - TEST_SUITE=installs - - TEST_SUITE=kitchensink - - TEST_SUITE=kitchensink-eject - - TEST_SUITE=behavior -matrix: - include: - - os: osx - node_js: 8 - env: TEST_SUITE=behavior - - node_js: 6 - env: TEST_SUITE=old-node diff --git a/CHANGELOG-0.x.md b/CHANGELOG-0.x.md index 10893488cd5..5463a61a4e9 100644 --- a/CHANGELOG-0.x.md +++ b/CHANGELOG-0.x.md @@ -6,33 +6,34 @@ #### :bug: Bug Fix -* `react-scripts` +- `react-scripts` - * [#1783](https://github.com/facebook/create-react-app/pull/1783) **Work around Node 7.7.2 bug that crashes `npm start`.** ([@ryanwalters](https://github.com/ryanwalters)) + - [#1783](https://github.com/facebook/create-react-app/pull/1783) **Work around Node 7.7.2 bug that crashes `npm start`.** ([@ryanwalters](https://github.com/ryanwalters)) #### :nail_care: Enhancement -* `eslint-config-react-app` +- `eslint-config-react-app` - * [#1773](https://github.com/facebook/create-react-app/pull/1773) Remove `guard-for-in` lint rule. ([@spicyj](https://github.com/spicyj)) + - [#1773](https://github.com/facebook/create-react-app/pull/1773) Remove `guard-for-in` lint rule. ([@spicyj](https://github.com/spicyj)) -* `react-scripts` - * [#1760](https://github.com/facebook/create-react-app/pull/1760) Suggest `serve` for running in production. ([@leo](https://github.com/leo)) - * [#1747](https://github.com/facebook/create-react-app/pull/1747) Display `yarn` instead of `yarnpkg` when creating a new app. ([@lpalmes](https://github.com/lpalmes)) +- `react-scripts` + - [#1760](https://github.com/facebook/create-react-app/pull/1760) Suggest `serve` for running in production. ([@leo](https://github.com/leo)) + - [#1747](https://github.com/facebook/create-react-app/pull/1747) Display `yarn` instead of `yarnpkg` when creating a new app. ([@lpalmes](https://github.com/lpalmes)) #### :memo: Documentation -* `react-scripts` +- `react-scripts` - * [#1756](https://github.com/facebook/create-react-app/pull/1756) Add Yarn steps for adding Flow. ([@zertosh](https://github.com/zertosh)) + - [#1756](https://github.com/facebook/create-react-app/pull/1756) Add Yarn steps for adding Flow. ([@zertosh](https://github.com/zertosh)) #### :house: Internal -* `babel-preset-react-app` +- `babel-preset-react-app` - * [#1742](https://github.com/facebook/create-react-app/pull/1742) Switch to `babel-preset-env` to remove the deprecation warning. ([@Timer](https://github.com/Timer)) + - [#1742](https://github.com/facebook/create-react-app/pull/1742) Switch to `babel-preset-env` to remove the deprecation warning. ([@Timer](https://github.com/Timer)) #### Committers: 6 + - Andres Suarez ([zertosh](https://github.com/zertosh)) - Ben Alpert ([spicyj](https://github.com/spicyj)) - Joe Haddad ([Timer](https://github.com/Timer)) @@ -44,76 +45,81 @@ Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.9.5 ``` ## 0.9.4 (March 6, 2017) #### :bug: Bug Fix -* `create-react-app` - * [#1706](https://github.com/facebook/create-react-app/pull/1706) Extract compressed package for package name. ([@Timer](https://github.com/Timer)) +- `create-react-app` + + - [#1706](https://github.com/facebook/create-react-app/pull/1706) Extract compressed package for package name. ([@Timer](https://github.com/Timer)) You may now specify a scoped package for `--scripts-version` and obtain a working installation. - * [#1695](https://github.com/facebook/create-react-app/pull/1695) Print why installation was aborted. ([@tgig](https://github.com/tgig)) + - [#1695](https://github.com/facebook/create-react-app/pull/1695) Print why installation was aborted. ([@tgig](https://github.com/tgig)) -* `react-scripts` +- `react-scripts` - * [#1727](https://github.com/facebook/create-react-app/pull/1727) Fix ejecting from a scoped fork. ([@gaearon](https://github.com/gaearon)) + - [#1727](https://github.com/facebook/create-react-app/pull/1727) Fix ejecting from a scoped fork. ([@gaearon](https://github.com/gaearon)) Ejecting now works within a scoped fork. - * [#1721](https://github.com/facebook/create-react-app/pull/1721) Fix hot reloading for WebpackDevServer after eject. ([@gaearon](https://github.com/gaearon)) + - [#1721](https://github.com/facebook/create-react-app/pull/1721) Fix hot reloading for WebpackDevServer after eject. ([@gaearon](https://github.com/gaearon)) -* `react-dev-utils` +- `react-dev-utils` - * [#1690](https://github.com/facebook/create-react-app/pull/1690) Fix `openBrowser()` when `BROWSER=open` on macOS. ([@bpierre](https://github.com/bpierre)) + - [#1690](https://github.com/facebook/create-react-app/pull/1690) Fix `openBrowser()` when `BROWSER=open` on macOS. ([@bpierre](https://github.com/bpierre)) - * [#1696](https://github.com/facebook/create-react-app/pull/1696) Improve reliability of port detection. ([@chrisdrackett](https://github.com/chrisdrackett)) + - [#1696](https://github.com/facebook/create-react-app/pull/1696) Improve reliability of port detection. ([@chrisdrackett](https://github.com/chrisdrackett)) #### :nail_care: Enhancement -* `eslint-config-react-app`, `react-scripts` - * [#1705](https://github.com/facebook/create-react-app/pull/1705) Add support for `ignoreRestSiblings` in `no-unused-vars`. ([@chrisdrackett](https://github.com/chrisdrackett)) +- `eslint-config-react-app`, `react-scripts` + + - [#1705](https://github.com/facebook/create-react-app/pull/1705) Add support for `ignoreRestSiblings` in `no-unused-vars`. ([@chrisdrackett](https://github.com/chrisdrackett)) Linter no longer warns when using rest properties to remove variables from an object. - * [#1542](https://github.com/facebook/create-react-app/pull/1542) Bump `jsx-a11y` version. ([@bondz](https://github.com/bondz)) + - [#1542](https://github.com/facebook/create-react-app/pull/1542) Bump `jsx-a11y` version. ([@bondz](https://github.com/bondz)) -* `react-dev-utils`, `react-scripts` +- `react-dev-utils`, `react-scripts` - * [#1726](https://github.com/facebook/create-react-app/pull/1726) Extract generic build functions into `react-dev-utils`. ([@viankakrisna](https://github.com/viankakrisna)) + - [#1726](https://github.com/facebook/create-react-app/pull/1726) Extract generic build functions into `react-dev-utils`. ([@viankakrisna](https://github.com/viankakrisna)) -* Other +- Other - * [#1402](https://github.com/facebook/create-react-app/pull/1402) Stub `package.json` for e2e test. ([@matoilic](https://github.com/matoilic)) + - [#1402](https://github.com/facebook/create-react-app/pull/1402) Stub `package.json` for e2e test. ([@matoilic](https://github.com/matoilic)) #### :memo: Documentation -* `react-scripts` - * [#1710](https://github.com/facebook/create-react-app/pull/1710) Update now.sh deployment instructions. ([@replaid](https://github.com/replaid)) - * [#1717](https://github.com/facebook/create-react-app/pull/1717) Add docs for Apache client side routing. ([@viankakrisna](https://github.com/viankakrisna)) - * [#1698](https://github.com/facebook/create-react-app/pull/1698) Suggest to use `.env` for enabling polling mode. ([@gaearon](https://github.com/gaearon)) - * [#1687](https://github.com/facebook/create-react-app/pull/1687) Fixed missing `--recursive` flag in first `npm run watch-css` command. ([@mklemme](https://github.com/mklemme)) + +- `react-scripts` + - [#1710](https://github.com/facebook/create-react-app/pull/1710) Update now.sh deployment instructions. ([@replaid](https://github.com/replaid)) + - [#1717](https://github.com/facebook/create-react-app/pull/1717) Add docs for Apache client side routing. ([@viankakrisna](https://github.com/viankakrisna)) + - [#1698](https://github.com/facebook/create-react-app/pull/1698) Suggest to use `.env` for enabling polling mode. ([@gaearon](https://github.com/gaearon)) + - [#1687](https://github.com/facebook/create-react-app/pull/1687) Fixed missing `--recursive` flag in first `npm run watch-css` command. ([@mklemme](https://github.com/mklemme)) #### :house: Internal -* `react-scripts` - * [#1736](https://github.com/facebook/create-react-app/pull/1736) Fix eject for linked react-scripts. ([@tuchk4](https://github.com/tuchk4)) - * [#1741](https://github.com/facebook/create-react-app/pull/1741) Fix internal linting setup. ([@gaearon](https://github.com/gaearon)) - * [#1730](https://github.com/facebook/create-react-app/pull/1730) Fix Node 4 e2e tests. ([@Timer](https://github.com/Timer)) -* `eslint-config-react-app` - * [#1740](https://github.com/facebook/create-react-app/pull/1740) Relax ESLint config peerDependency. ([@gaearon](https://github.com/gaearon)) -* `eslint-config-react-app`, `react-dev-utils`, `react-scripts` - * [#1729](https://github.com/facebook/create-react-app/pull/1729) Lint internal scripts with `eslint:recommended`. ([@gaearon](https://github.com/gaearon)) -* `react-dev-utils` - * [#1724](https://github.com/facebook/create-react-app/pull/1724) Don't use ES6 in a file that should run on Node 4. ([@gaearon](https://github.com/gaearon)) -* Other - * [#1723](https://github.com/facebook/create-react-app/pull/1723) Skip AppVeyor CI builds for Markdown changes. ([@gaearon](https://github.com/gaearon)) - * [#1707](https://github.com/facebook/create-react-app/pull/1707) Add double quotes to escape spaces in paths in e2e. ([@viankakrisna](https://github.com/viankakrisna)) - * [#1688](https://github.com/facebook/create-react-app/pull/1688) Upgrade `lerna` version. ([@viankakrisna](https://github.com/viankakrisna)) + +- `react-scripts` + - [#1736](https://github.com/facebook/create-react-app/pull/1736) Fix eject for linked react-scripts. ([@tuchk4](https://github.com/tuchk4)) + - [#1741](https://github.com/facebook/create-react-app/pull/1741) Fix internal linting setup. ([@gaearon](https://github.com/gaearon)) + - [#1730](https://github.com/facebook/create-react-app/pull/1730) Fix Node 4 e2e tests. ([@Timer](https://github.com/Timer)) +- `eslint-config-react-app` + - [#1740](https://github.com/facebook/create-react-app/pull/1740) Relax ESLint config peerDependency. ([@gaearon](https://github.com/gaearon)) +- `eslint-config-react-app`, `react-dev-utils`, `react-scripts` + - [#1729](https://github.com/facebook/create-react-app/pull/1729) Lint internal scripts with `eslint:recommended`. ([@gaearon](https://github.com/gaearon)) +- `react-dev-utils` + - [#1724](https://github.com/facebook/create-react-app/pull/1724) Don't use ES6 in a file that should run on Node 4. ([@gaearon](https://github.com/gaearon)) +- Other + - [#1723](https://github.com/facebook/create-react-app/pull/1723) Skip AppVeyor CI builds for Markdown changes. ([@gaearon](https://github.com/gaearon)) + - [#1707](https://github.com/facebook/create-react-app/pull/1707) Add double quotes to escape spaces in paths in e2e. ([@viankakrisna](https://github.com/viankakrisna)) + - [#1688](https://github.com/facebook/create-react-app/pull/1688) Upgrade `lerna` version. ([@viankakrisna](https://github.com/viankakrisna)) #### Committers: 11 + - Ade Viankakrisna Fadlil ([viankakrisna](https://github.com/viankakrisna)) - Bond ([bondz](https://github.com/bondz)) - Chris Drackett ([chrisdrackett](https://github.com/chrisdrackett)) @@ -130,53 +136,59 @@ npm install --save-dev --save-exact react-scripts@0.9.5 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.9.4 ``` You may also optionally update the global command-line utility for scoped package support: -``` +```sh npm install -g create-react-app@1.3.0 ``` ## 0.9.3 (February 28, 2017) #### :rocket: New Feature -* `create-react-app` - * [#1423](https://github.com/facebook/create-react-app/pull/1423) **Fall back to Yarn offline cache when creating a new project.** ([@voxsim](https://github.com/voxsim)) + +- `create-react-app` + + - [#1423](https://github.com/facebook/create-react-app/pull/1423) **Fall back to Yarn offline cache when creating a new project.** ([@voxsim](https://github.com/voxsim)) If you are using Yarn, and you have created at least one app previously, Create React App now works offline. - Yarn offline installation demo + Yarn offline installation demo #### :bug: Bug Fix -* `react-scripts` +- `react-scripts` - * [#1665](https://github.com/facebook/create-react-app/pull/1665) Temporarily disable ESLint caching because of a bug. ([@gaearon](https://github.com/gaearon)) + - [#1665](https://github.com/facebook/create-react-app/pull/1665) Temporarily disable ESLint caching because of a bug. ([@gaearon](https://github.com/gaearon)) -* `create-react-app` - * [#1675](https://github.com/facebook/create-react-app/pull/1675) Delete project folder on failed installation on Windows. ([@johann-sonntagbauer](https://github.com/johann-sonntagbauer)) - * [#1662](https://github.com/facebook/create-react-app/pull/1662) Validate project name before creating a project. ([@johann-sonntagbauer](https://github.com/johann-sonntagbauer)) - * [#1669](https://github.com/facebook/create-react-app/pull/1669) Make sure React dependencies aren’t pinned in new projects. ([@johann-sonntagbauer](https://github.com/johann-sonntagbauer)) +- `create-react-app` + - [#1675](https://github.com/facebook/create-react-app/pull/1675) Delete project folder on failed installation on Windows. ([@johann-sonntagbauer](https://github.com/johann-sonntagbauer)) + - [#1662](https://github.com/facebook/create-react-app/pull/1662) Validate project name before creating a project. ([@johann-sonntagbauer](https://github.com/johann-sonntagbauer)) + - [#1669](https://github.com/facebook/create-react-app/pull/1669) Make sure React dependencies aren’t pinned in new projects. ([@johann-sonntagbauer](https://github.com/johann-sonntagbauer)) #### :nail_care: Enhancement -* `react-scripts` - * [#1677](https://github.com/facebook/create-react-app/pull/1677) Add `X-FORWARDED` headers for proxy requests. ([@johann-sonntagbauer](https://github.com/johann-sonntagbauer)) +- `react-scripts` + + - [#1677](https://github.com/facebook/create-react-app/pull/1677) Add `X-FORWARDED` headers for proxy requests. ([@johann-sonntagbauer](https://github.com/johann-sonntagbauer)) #### :memo: Documentation -* `react-scripts` - * [#1657](https://github.com/facebook/create-react-app/pull/1657) Tweak the Visual Studio Code debugging guide. ([@ryansully](https://github.com/ryansully)) +- `react-scripts` + + - [#1657](https://github.com/facebook/create-react-app/pull/1657) Tweak the Visual Studio Code debugging guide. ([@ryansully](https://github.com/ryansully)) #### :house: Internal -* End-to-end Tests - * [#1648](https://github.com/facebook/create-react-app/pull/1648) Add Windows CI tests for better stability. ([@Timer](https://github.com/Timer)) +- End-to-end Tests + + - [#1648](https://github.com/facebook/create-react-app/pull/1648) Add Windows CI tests for better stability. ([@Timer](https://github.com/Timer)) #### Committers: 5 + - Dan Abramov ([gaearon](https://github.com/gaearon)) - Joe Haddad ([Timer](https://github.com/Timer)) - Johann Hubert Sonntagbauer ([johann-sonntagbauer](https://github.com/johann-sonntagbauer)) @@ -187,13 +199,13 @@ npm install -g create-react-app@1.3.0 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.9.3 ``` You may also optionally update the global command-line utility for offline Yarn cache support: -``` +```sh npm install -g create-react-app@1.2.1 ``` @@ -201,84 +213,89 @@ npm install -g create-react-app@1.2.1 #### :nail_care: Enhancement -* `create-react-app` - * [#1253](https://github.com/facebook/create-react-app/pull/1253) **Install time optimization.** ([@n3tr](https://github.com/n3tr)) +- `create-react-app` + + - [#1253](https://github.com/facebook/create-react-app/pull/1253) **Install time optimization.** ([@n3tr](https://github.com/n3tr)) React, ReactDOM, and `react-scripts` are now installed in the same install instead of two different installs. This reduces app creation time by a noticeable amount. - * [#1512](https://github.com/facebook/create-react-app/pull/1512) **Graceful error handling.** ([@chitchu](https://github.com/chitchu)) + - [#1512](https://github.com/facebook/create-react-app/pull/1512) **Graceful error handling.** ([@chitchu](https://github.com/chitchu)) If an error occurs while `create-react-app` is running, it will now clean up and not leave a broken project to reduce confusion. - * [#1193](https://github.com/facebook/create-react-app/pull/1193) Suggest upgrading to NPM >= 3 for faster install times. ([@mobinni](https://github.com/mobinni)) + - [#1193](https://github.com/facebook/create-react-app/pull/1193) Suggest upgrading to NPM >= 3 for faster install times. ([@mobinni](https://github.com/mobinni)) + + - [#1603](https://github.com/facebook/create-react-app/pull/1603) Allow app creation in a WebStorm project. ([@driquelme](https://github.com/driquelme)) - * [#1603](https://github.com/facebook/create-react-app/pull/1603) Allow app creation in a WebStorm project. ([@driquelme](https://github.com/driquelme)) + - [#1570](https://github.com/facebook/create-react-app/pull/1570) Allow git urls in `--scripts-version`. ([@tomconroy](https://github.com/tomconroy)) - * [#1570](https://github.com/facebook/create-react-app/pull/1570) Allow git urls in `--scripts-version`. ([@tomconroy](https://github.com/tomconroy)) +- `react-scripts` -* `react-scripts` - * [#1578](https://github.com/facebook/create-react-app/pull/1578) Enable lint caching in development. ([@viankakrisna](https://github.com/viankakrisna)) + - [#1578](https://github.com/facebook/create-react-app/pull/1578) Enable lint caching in development. ([@viankakrisna](https://github.com/viankakrisna)) - * [#1478](https://github.com/facebook/create-react-app/pull/1478) Update the build script message to show the correct port. ([@chyipin](https://github.com/chyipin)) + - [#1478](https://github.com/facebook/create-react-app/pull/1478) Update the build script message to show the correct port. ([@chyipin](https://github.com/chyipin)) - * [#1567](https://github.com/facebook/create-react-app/pull/1567) Remove .bin files after eject. ([@tuchk4](https://github.com/tuchk4)) + - [#1567](https://github.com/facebook/create-react-app/pull/1567) Remove .bin files after eject. ([@tuchk4](https://github.com/tuchk4)) - * [#1560](https://github.com/facebook/create-react-app/pull/1560) Bump `recursive-readdir`. ([@wtgtybhertgeghgtwtg](https://github.com/wtgtybhertgeghgtwtg)) + - [#1560](https://github.com/facebook/create-react-app/pull/1560) Bump `recursive-readdir`. ([@wtgtybhertgeghgtwtg](https://github.com/wtgtybhertgeghgtwtg)) #### :bug: Bug Fix -* `react-scripts` - * [#1635](https://github.com/facebook/create-react-app/pull/1635) **Fix Jest configuration.** ([@Timer](https://github.com/Timer)) +- `react-scripts` + + - [#1635](https://github.com/facebook/create-react-app/pull/1635) **Fix Jest configuration.** ([@Timer](https://github.com/Timer)) Fixes ejecting on Windows for macOS and Linux machines. - * [#1356](https://github.com/facebook/create-react-app/pull/1356) Fix workflow if react-scripts package is linked via npm-link. ([@tuchk4](https://github.com/tuchk4)) + - [#1356](https://github.com/facebook/create-react-app/pull/1356) Fix workflow if react-scripts package is linked via npm-link. ([@tuchk4](https://github.com/tuchk4)) Advanced users may opt to fork `react-scripts` instead of ejecting so they still receive upstream updates.
`react-scripts` will now function as expected when linking to a development version.
Previously, you could not test changes with an existing application via linking. - * [#1585](https://github.com/facebook/create-react-app/pull/1585) Ensure PORT environment variable is an integer. ([@matoilic](https://github.com/matoilic)) + - [#1585](https://github.com/facebook/create-react-app/pull/1585) Ensure PORT environment variable is an integer. ([@matoilic](https://github.com/matoilic)) - * [#1628](https://github.com/facebook/create-react-app/pull/1628) Show correct port for pushstate-server URL text. ([@mattccrampton](https://github.com/mattccrampton)) - - * [#1647](https://github.com/facebook/create-react-app/pull/1647) Fix `npm test` on Windows ([@gaearon](https://github.com/gaearon)) + - [#1628](https://github.com/facebook/create-react-app/pull/1628) Show correct port for pushstate-server URL text. ([@mattccrampton](https://github.com/mattccrampton)) + - [#1647](https://github.com/facebook/create-react-app/pull/1647) Fix `npm test` on Windows ([@gaearon](https://github.com/gaearon)) #### :memo: Documentation -* User Guides - * [#1391](https://github.com/facebook/create-react-app/pull/1391) Add note how to resolve missing required files for Heroku. ([@sbritoig](https://github.com/sbritoig)) - * [#1577](https://github.com/facebook/create-react-app/pull/1577) Add a how-to on `react-snapshot`. ([@superhighfives](https://github.com/superhighfives)) - * [#1121](https://github.com/facebook/create-react-app/pull/1121) Add documentation for customizing Bootstrap theme. ([@myappincome](https://github.com/myappincome)) - * [#1540](https://github.com/facebook/create-react-app/pull/1540) Document debugging in Visual Studio Code. ([@bondz](https://github.com/bondz)) - * [#1618](https://github.com/facebook/create-react-app/pull/1618) Add note about when to import Bootstrap CSS. ([@joewoodhouse](https://github.com/joewoodhouse)) - * [#1518](https://github.com/facebook/create-react-app/pull/1518) Update flow configuration documentation. ([@SBrown52](https://github.com/SBrown52)) - * [#1625](https://github.com/facebook/create-react-app/pull/1625) Specify that NODE_ENV is set to 'production' during the build step. ([@mderazon](https://github.com/mderazon)) - * [#1573](https://github.com/facebook/create-react-app/pull/1573) Update Jest documentation links. ([@mkermani144](https://github.com/mkermani144)) - * [#1564](https://github.com/facebook/create-react-app/pull/1564) Add --recursive to Sass watch script. ([@aleburato](https://github.com/aleburato)) - * [#1561](https://github.com/facebook/create-react-app/pull/1561) Use https in link in documentation. ([@dariocravero](https://github.com/dariocravero)) - * [#1562](https://github.com/facebook/create-react-app/pull/1562) Update `jest-enzyme` documentation. ([@kiranps](https://github.com/kiranps)) - * [#1543](https://github.com/facebook/create-react-app/pull/1543) Update CSS preprocessor instructions. ([@aleburato](https://github.com/aleburato)) - * [#1338](https://github.com/facebook/create-react-app/pull/1338) Add link to Azure deployment tutorial. ([@tpetrina](https://github.com/tpetrina)) - * [#1320](https://github.com/facebook/create-react-app/pull/1320) Document how to disable autoprefix feature. ([@rrubas](https://github.com/rrubas)) - * [#1313](https://github.com/facebook/create-react-app/pull/1313) List features beyond ES6 supported by create-react-app. ([@jonathanconway](https://github.com/jonathanconway)) - * [#1008](https://github.com/facebook/create-react-app/pull/1008) Add Saas support documentation. ([@tsironis](https://github.com/tsironis)) - * [#994](https://github.com/facebook/create-react-app/pull/994) Suggest `jest-enzyme` for simplifying test matchers. ([@blainekasten](https://github.com/blainekasten)) - * [#1608](https://github.com/facebook/create-react-app/pull/1608) Add note for using CHOKIDAR_USEPOLLING in virtual machines to enable HMR. ([@AJamesPhillips](https://github.com/AJamesPhillips)) - * [#1495](https://github.com/facebook/create-react-app/pull/1495) Add useful link to react-scripts. ([@pd4d10](https://github.com/pd4d10)) -* READMEs - * [#1576](https://github.com/facebook/create-react-app/pull/1576) Switch from Neo to Neutrino. ([@eliperelman](https://github.com/eliperelman)) - * [#1275](https://github.com/facebook/create-react-app/pull/1275) Suggest yarn commands in addition to npm. ([@lifez](https://github.com/lifez)) + +- User Guides + - [#1391](https://github.com/facebook/create-react-app/pull/1391) Add note how to resolve missing required files for Heroku. ([@sbritoig](https://github.com/sbritoig)) + - [#1577](https://github.com/facebook/create-react-app/pull/1577) Add a how-to on `react-snapshot`. ([@superhighfives](https://github.com/superhighfives)) + - [#1121](https://github.com/facebook/create-react-app/pull/1121) Add documentation for customizing Bootstrap theme. ([@myappincome](https://github.com/myappincome)) + - [#1540](https://github.com/facebook/create-react-app/pull/1540) Document debugging in Visual Studio Code. ([@bondz](https://github.com/bondz)) + - [#1618](https://github.com/facebook/create-react-app/pull/1618) Add note about when to import Bootstrap CSS. ([@joewoodhouse](https://github.com/joewoodhouse)) + - [#1518](https://github.com/facebook/create-react-app/pull/1518) Update flow configuration documentation. ([@SBrown52](https://github.com/SBrown52)) + - [#1625](https://github.com/facebook/create-react-app/pull/1625) Specify that NODE_ENV is set to 'production' during the build step. ([@mderazon](https://github.com/mderazon)) + - [#1573](https://github.com/facebook/create-react-app/pull/1573) Update Jest documentation links. ([@mkermani144](https://github.com/mkermani144)) + - [#1564](https://github.com/facebook/create-react-app/pull/1564) Add --recursive to Sass watch script. ([@aleburato](https://github.com/aleburato)) + - [#1561](https://github.com/facebook/create-react-app/pull/1561) Use https in link in documentation. ([@dariocravero](https://github.com/dariocravero)) + - [#1562](https://github.com/facebook/create-react-app/pull/1562) Update `jest-enzyme` documentation. ([@kiranps](https://github.com/kiranps)) + - [#1543](https://github.com/facebook/create-react-app/pull/1543) Update CSS preprocessor instructions. ([@aleburato](https://github.com/aleburato)) + - [#1338](https://github.com/facebook/create-react-app/pull/1338) Add link to Azure deployment tutorial. ([@tpetrina](https://github.com/tpetrina)) + - [#1320](https://github.com/facebook/create-react-app/pull/1320) Document how to disable autoprefix feature. ([@rrubas](https://github.com/rrubas)) + - [#1313](https://github.com/facebook/create-react-app/pull/1313) List features beyond ES6 supported by create-react-app. ([@jonathanconway](https://github.com/jonathanconway)) + - [#1008](https://github.com/facebook/create-react-app/pull/1008) Add Saas support documentation. ([@tsironis](https://github.com/tsironis)) + - [#994](https://github.com/facebook/create-react-app/pull/994) Suggest `jest-enzyme` for simplifying test matchers. ([@blainekasten](https://github.com/blainekasten)) + - [#1608](https://github.com/facebook/create-react-app/pull/1608) Add note for using CHOKIDAR_USEPOLLING in virtual machines to enable HMR. ([@AJamesPhillips](https://github.com/AJamesPhillips)) + - [#1495](https://github.com/facebook/create-react-app/pull/1495) Add useful link to react-scripts. ([@pd4d10](https://github.com/pd4d10)) +- READMEs + - [#1576](https://github.com/facebook/create-react-app/pull/1576) Switch from Neo to Neutrino. ([@eliperelman](https://github.com/eliperelman)) + - [#1275](https://github.com/facebook/create-react-app/pull/1275) Suggest yarn commands in addition to npm. ([@lifez](https://github.com/lifez)) #### :house: Internal -* `babel-preset-react-app` - * [#1598](https://github.com/facebook/create-react-app/pull/1598) Remove redundant babel-plugin-transform-es2015-parameters. ([@christophehurpeau](https://github.com/christophehurpeau)) -* Other - * [#1534](https://github.com/facebook/create-react-app/pull/1534) Use yarn@latest in e2e. ([@gaearon](https://github.com/gaearon)) - * [#1295](https://github.com/facebook/create-react-app/pull/1295) Make node version check more robust in e2e. ([@pugnascotia](https://github.com/pugnascotia)) - * [#1503](https://github.com/facebook/create-react-app/pull/1503) Fix `test -e` in e2e. ([@igetgames](https://github.com/igetgames)) + +- `babel-preset-react-app` + - [#1598](https://github.com/facebook/create-react-app/pull/1598) Remove redundant babel-plugin-transform-es2015-parameters. ([@christophehurpeau](https://github.com/christophehurpeau)) +- Other + - [#1534](https://github.com/facebook/create-react-app/pull/1534) Use yarn@latest in e2e. ([@gaearon](https://github.com/gaearon)) + - [#1295](https://github.com/facebook/create-react-app/pull/1295) Make node version check more robust in e2e. ([@pugnascotia](https://github.com/pugnascotia)) + - [#1503](https://github.com/facebook/create-react-app/pull/1503) Fix `test -e` in e2e. ([@igetgames](https://github.com/igetgames)) #### Committers: 36 + - Ade Viankakrisna Fadlil ([viankakrisna](https://github.com/viankakrisna)) - Alessandro Burato ([aleburato](https://github.com/aleburato)) - Alexander James Phillips ([AJamesPhillips](https://github.com/AJamesPhillips)) @@ -322,13 +339,13 @@ npm install -g create-react-app@1.2.1 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.9.2 ``` You may also optionally update the global command-line utility for more efficient installs (thanks [@n3tr](https://github.com/n3tr)): -``` +```sh npm install -g create-react-app@1.1.0 ``` @@ -342,118 +359,118 @@ Thanks to [@Timer](https://github.com/timer) for cutting this release. #### :rocket: New Feature -* `react-scripts` +- `react-scripts` - * [#1489](https://github.com/facebook/create-react-app/pull/1489) Support setting `"homepage"` to `"."` to generate relative asset paths. ([@tibdex](https://github.com/tibdex)) + - [#1489](https://github.com/facebook/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/facebook/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/facebook/create-react-app/blob/main/packages/react-scripts/template/README.md#serving-the-same-build-from-different-paths). - * [#937](https://github.com/facebook/create-react-app/pull/1504) Add `PUBLIC_URL` environment variable for advanced use. ([@EnoahNetzach](https://github.com/EnoahNetzach)) + - [#937](https://github.com/facebook/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/facebook/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/facebook/create-react-app/blob/main/packages/react-scripts/template/README.md#advanced-configuration) section. - * [#1440](https://github.com/facebook/create-react-app/pull/1440) Make all `REACT_APP_*` environment variables accessible in `index.html`. ([@jihchi](https://github.com/jihchi)) + - [#1440](https://github.com/facebook/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/facebook/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/facebook/create-react-app/blob/main/packages/react-scripts/template/README.md#referencing-environment-variables-in-the-html). -* `react-dev-utils` +- `react-dev-utils` - * [#1148](https://github.com/facebook/create-react-app/pull/1148) Configure which browser to open with `npm start`. ([@GAumala](https://github.com/GAumala)) + - [#1148](https://github.com/facebook/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/facebook/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/facebook/create-react-app/blob/main/packages/react-scripts/template/README.md#advanced-configuration). #### :boom: Breaking Change -* `react-scripts` +- `react-scripts` - * [#1522](https://github.com/facebook/create-react-app/pull/1522) Upgrade dependencies. ([@Timer](https://github.com/Timer)) - * [#1432](https://github.com/facebook/create-react-app/pull/1432) Bump Jest version. ([@gaearon](https://github.com/gaearon)) - * [#1311](https://github.com/facebook/create-react-app/pull/1311) Updated `babel-jest` and `jest` packages to 18.0.0. ([@lopezator](https://github.com/lopezator)) + - [#1522](https://github.com/facebook/create-react-app/pull/1522) Upgrade dependencies. ([@Timer](https://github.com/Timer)) + - [#1432](https://github.com/facebook/create-react-app/pull/1432) Bump Jest version. ([@gaearon](https://github.com/gaearon)) + - [#1311](https://github.com/facebook/create-react-app/pull/1311) Updated `babel-jest` and `jest` packages to 18.0.0. ([@lopezator](https://github.com/lopezator)) Jest has been updated to 18 and has introduced some [breaking changes and new features](https://facebook.github.io/jest/blog/2016/12/15/2016-in-jest.html). -* `react-scripts`, `react-dev-utils` +- `react-scripts`, `react-dev-utils` - * [#1264](https://github.com/facebook/create-react-app/pull/1264) Remove interactive shell check when opening browser on start. ([@CaryLandholt](https://github.com/CaryLandholt)) + - [#1264](https://github.com/facebook/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/facebook/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/facebook/create-react-app/blob/main/packages/react-scripts/template/README.md#advanced-configuration) if you wish to disable it. #### :bug: Bug Fix -* `react-scripts` +- `react-scripts` - * [#1441](https://github.com/facebook/create-react-app/pull/1441) Added `babel-runtime` dependency to deduplicate dependencies when using Yarn. ([@jkimbo](https://github.com/jkimbo)) + - [#1441](https://github.com/facebook/create-react-app/pull/1441) Added `babel-runtime` dependency to deduplicate dependencies when using Yarn. ([@jkimbo](https://github.com/jkimbo)) This works around a bug in Yarn that caused newly created projects to be over 400MB. Now they are down to 126MB, just like with npm 3. - * [#1522](https://github.com/facebook/create-react-app/pull/1522) Upgrade dependencies. ([@Timer](https://github.com/Timer)) - * [#1458](https://github.com/facebook/create-react-app/pull/1458) Additionally remove `react-scripts` from dependencies on eject. ([@creynders](https://github.com/creynders)) - * [#1309](https://github.com/facebook/create-react-app/pull/1309) Bump `babel-loader` version (#1009). ([@frontsideair](https://github.com/frontsideair)) - * [#1267](https://github.com/facebook/create-react-app/pull/1267) Only gitignore directories in root, not deep. ([@jayphelps](https://github.com/jayphelps)) + - [#1522](https://github.com/facebook/create-react-app/pull/1522) Upgrade dependencies. ([@Timer](https://github.com/Timer)) + - [#1458](https://github.com/facebook/create-react-app/pull/1458) Additionally remove `react-scripts` from dependencies on eject. ([@creynders](https://github.com/creynders)) + - [#1309](https://github.com/facebook/create-react-app/pull/1309) Bump `babel-loader` version (#1009). ([@frontsideair](https://github.com/frontsideair)) + - [#1267](https://github.com/facebook/create-react-app/pull/1267) Only gitignore directories in root, not deep. ([@jayphelps](https://github.com/jayphelps)) -* `react-dev-utils` +- `react-dev-utils` - * [#1377](https://github.com/facebook/create-react-app/pull/1377) webpack-dev-server patch for 'still-ok' success status. ([@TheBlackBolt](https://github.com/TheBlackBolt)) - * [#1274](https://github.com/facebook/create-react-app/pull/1274) Downgrading to compatible version of SockJS-Client. ([@holloway](https://github.com/holloway)) - * [#1247](https://github.com/facebook/create-react-app/pull/1247) Only open Chrome tab if BROWSER is missing or is Chrome. ([@gaearon](https://github.com/gaearon)) + - [#1377](https://github.com/facebook/create-react-app/pull/1377) webpack-dev-server patch for 'still-ok' success status. ([@TheBlackBolt](https://github.com/TheBlackBolt)) + - [#1274](https://github.com/facebook/create-react-app/pull/1274) Downgrading to compatible version of SockJS-Client. ([@holloway](https://github.com/holloway)) + - [#1247](https://github.com/facebook/create-react-app/pull/1247) Only open Chrome tab if BROWSER is missing or is Chrome. ([@gaearon](https://github.com/gaearon)) #### :nail_care: Enhancement -* `react-scripts` +- `react-scripts` - * [#1496](https://github.com/facebook/create-react-app/pull/1496) Make build exit with error code when interrupted. ([@brandones](https://github.com/brandones)) - * [#1352](https://github.com/facebook/create-react-app/pull/1352) More descriptive error message for `env.CI = true` warnings causing failures. ([@jayphelps](https://github.com/jayphelps)) - * [#1264](https://github.com/facebook/create-react-app/pull/1264) Remove interactive shell check when opening browser on start. ([@CaryLandholt](https://github.com/CaryLandholt)) - * [#1311](https://github.com/facebook/create-react-app/pull/1311) Updated `babel-jest` and `jest` packages to 18.0.0. ([@lopezator](https://github.com/lopezator)) - * [#1432](https://github.com/facebook/create-react-app/pull/1432) Bump Jest version. ([@gaearon](https://github.com/gaearon)) - * [#1507](https://github.com/facebook/create-react-app/pull/1507) fix: add yarn gitignores. ([@adjohnson916](https://github.com/adjohnson916)) - * [#1510](https://github.com/facebook/create-react-app/pull/1510) Add missing `'\n'` to the end of `package.json` file. ([@pd4d10](https://github.com/pd4d10)) - * [#1324](https://github.com/facebook/create-react-app/pull/1324) Use npm script hooks to avoid `&&` in deploy script. ([@zpao](https://github.com/zpao)) + - [#1496](https://github.com/facebook/create-react-app/pull/1496) Make build exit with error code when interrupted. ([@brandones](https://github.com/brandones)) + - [#1352](https://github.com/facebook/create-react-app/pull/1352) More descriptive error message for `env.CI = true` warnings causing failures. ([@jayphelps](https://github.com/jayphelps)) + - [#1264](https://github.com/facebook/create-react-app/pull/1264) Remove interactive shell check when opening browser on start. ([@CaryLandholt](https://github.com/CaryLandholt)) + - [#1311](https://github.com/facebook/create-react-app/pull/1311) Updated `babel-jest` and `jest` packages to 18.0.0. ([@lopezator](https://github.com/lopezator)) + - [#1432](https://github.com/facebook/create-react-app/pull/1432) Bump Jest version. ([@gaearon](https://github.com/gaearon)) + - [#1507](https://github.com/facebook/create-react-app/pull/1507) fix: add yarn gitignores. ([@adjohnson916](https://github.com/adjohnson916)) + - [#1510](https://github.com/facebook/create-react-app/pull/1510) Add missing `'\n'` to the end of `package.json` file. ([@pd4d10](https://github.com/pd4d10)) + - [#1324](https://github.com/facebook/create-react-app/pull/1324) Use npm script hooks to avoid `&&` in deploy script. ([@zpao](https://github.com/zpao)) -* `create-react-app` - - * [#1270](https://github.com/facebook/create-react-app/pull/1270) gh-1269: Enabling nested folder paths for project name. ([@dinukadesilva](https://github.com/dinukadesilva)) +- `create-react-app` + - [#1270](https://github.com/facebook/create-react-app/pull/1270) gh-1269: Enabling nested folder paths for project name. ([@dinukadesilva](https://github.com/dinukadesilva)) #### :memo: Documentation -* User Guide +- User Guide - * [#1515](https://github.com/facebook/create-react-app/pull/1515) readme: Advanced Configuration. ([@Timer](https://github.com/Timer)) - * [#1513](https://github.com/facebook/create-react-app/pull/1513) clarifying the use of custom environment variables. ([@calweb](https://github.com/calweb)) - * [#1511](https://github.com/facebook/create-react-app/pull/1511) Change "OS X" references to "macOS". ([@RodrigoHahn](https://github.com/RodrigoHahn)) - * [#1482](https://github.com/facebook/create-react-app/pull/1482) Edit User Guide: Add ESLint config for VS Code users. ([@vulong23](https://github.com/vulong23)) - * [#1483](https://github.com/facebook/create-react-app/pull/1483) Reflect websocket proxy support on README (#1013). ([@frontsideair](https://github.com/frontsideair)) - * [#1453](https://github.com/facebook/create-react-app/pull/1453) Readme: Removes experimental from Jest snapshot. ([@frehner](https://github.com/frehner)) - * [#1437](https://github.com/facebook/create-react-app/pull/1437) Added links to tutorials for integrating cra with an api backend. ([@alexdriaguine](https://github.com/alexdriaguine)) - * [#1422](https://github.com/facebook/create-react-app/pull/1422) Add causes of dev server not detecting changes. ([@jetpackpony](https://github.com/jetpackpony)) - * [#1260](https://github.com/facebook/create-react-app/pull/1260) Heroku Deployment: Adds a note on how to resolve "File/Module Not Found Errors" . ([@MsUzoAgu](https://github.com/MsUzoAgu)) - * [#1256](https://github.com/facebook/create-react-app/pull/1256) Add "Changing the Page Title" to User Guide. ([@gaearon](https://github.com/gaearon)) - * [#1245](https://github.com/facebook/create-react-app/pull/1245) Replace the Flow documentation section. ([@gaearon](https://github.com/gaearon)) - * [#1514](https://github.com/facebook/create-react-app/pull/1514) corrected minor typo. ([@crowchirp](https://github.com/crowchirp)) - * [#1393](https://github.com/facebook/create-react-app/pull/1393) replace two space syntax with br tag. ([@carlsagan21](https://github.com/carlsagan21)) - * [#1384](https://github.com/facebook/create-react-app/pull/1384) Document Flow support. ([@dschep](https://github.com/dschep)) + - [#1515](https://github.com/facebook/create-react-app/pull/1515) readme: Advanced Configuration. ([@Timer](https://github.com/Timer)) + - [#1513](https://github.com/facebook/create-react-app/pull/1513) clarifying the use of custom environment variables. ([@calweb](https://github.com/calweb)) + - [#1511](https://github.com/facebook/create-react-app/pull/1511) Change "OS X" references to "macOS". ([@RodrigoHahn](https://github.com/RodrigoHahn)) + - [#1482](https://github.com/facebook/create-react-app/pull/1482) Edit User Guide: Add ESLint config for VS Code users. ([@vulong23](https://github.com/vulong23)) + - [#1483](https://github.com/facebook/create-react-app/pull/1483) Reflect websocket proxy support on README (#1013). ([@frontsideair](https://github.com/frontsideair)) + - [#1453](https://github.com/facebook/create-react-app/pull/1453) Readme: Removes experimental from Jest snapshot. ([@frehner](https://github.com/frehner)) + - [#1437](https://github.com/facebook/create-react-app/pull/1437) Added links to tutorials for integrating cra with an api backend. ([@alexdriaguine](https://github.com/alexdriaguine)) + - [#1422](https://github.com/facebook/create-react-app/pull/1422) Add causes of dev server not detecting changes. ([@jetpackpony](https://github.com/jetpackpony)) + - [#1260](https://github.com/facebook/create-react-app/pull/1260) Heroku Deployment: Adds a note on how to resolve "File/Module Not Found Errors" . ([@MsUzoAgu](https://github.com/MsUzoAgu)) + - [#1256](https://github.com/facebook/create-react-app/pull/1256) Add "Changing the Page Title" to User Guide. ([@gaearon](https://github.com/gaearon)) + - [#1245](https://github.com/facebook/create-react-app/pull/1245) Replace the Flow documentation section. ([@gaearon](https://github.com/gaearon)) + - [#1514](https://github.com/facebook/create-react-app/pull/1514) corrected minor typo. ([@crowchirp](https://github.com/crowchirp)) + - [#1393](https://github.com/facebook/create-react-app/pull/1393) replace two space syntax with br tag. ([@carlsagan21](https://github.com/carlsagan21)) + - [#1384](https://github.com/facebook/create-react-app/pull/1384) Document Flow support. ([@dschep](https://github.com/dschep)) -* READMEs +- READMEs - * [#1375](https://github.com/facebook/create-react-app/pull/1375) Change console.log for errors and warnings. ([@jimmyhmiller](https://github.com/jimmyhmiller)) - * [#1369](https://github.com/facebook/create-react-app/pull/1369) Add missing import in react-dev-utils README.md. ([@pedronauck](https://github.com/pedronauck)) + - [#1375](https://github.com/facebook/create-react-app/pull/1375) Change console.log for errors and warnings. ([@jimmyhmiller](https://github.com/jimmyhmiller)) + - [#1369](https://github.com/facebook/create-react-app/pull/1369) Add missing import in react-dev-utils README.md. ([@pedronauck](https://github.com/pedronauck)) #### :house: Internal -* Internal Test Suite +- Internal Test Suite - * [#1519](https://github.com/facebook/create-react-app/pull/1519) Add test cases for PUBLIC_URL and relative path. ([@Timer](https://github.com/Timer)) - * [#1484](https://github.com/facebook/create-react-app/pull/1484) Improve e2e-kitchensink and Jest coverage. ([@Timer](https://github.com/Timer)) - * [#1463](https://github.com/facebook/create-react-app/pull/1463) Minor code style and wrong expect. ([@tuchk4](https://github.com/tuchk4)) - * [#1470](https://github.com/facebook/create-react-app/pull/1470) E2e jsdom fix. ([@EnoahNetzach](https://github.com/EnoahNetzach)) - * [#1187](https://github.com/facebook/create-react-app/pull/1187) Use a more sophisticated template for end-to-end testing.. ([@EnoahNetzach](https://github.com/EnoahNetzach)) + - [#1519](https://github.com/facebook/create-react-app/pull/1519) Add test cases for PUBLIC_URL and relative path. ([@Timer](https://github.com/Timer)) + - [#1484](https://github.com/facebook/create-react-app/pull/1484) Improve e2e-kitchensink and Jest coverage. ([@Timer](https://github.com/Timer)) + - [#1463](https://github.com/facebook/create-react-app/pull/1463) Minor code style and wrong expect. ([@tuchk4](https://github.com/tuchk4)) + - [#1470](https://github.com/facebook/create-react-app/pull/1470) E2e jsdom fix. ([@EnoahNetzach](https://github.com/EnoahNetzach)) + - [#1187](https://github.com/facebook/create-react-app/pull/1187) Use a more sophisticated template for end-to-end testing.. ([@EnoahNetzach](https://github.com/EnoahNetzach)) -* Other +- Other - * [#1289](https://github.com/facebook/create-react-app/pull/1289) Remove path-exists from dependencies and replace it with fs.existsSync. ([@halfzebra](https://github.com/halfzebra)) + - [#1289](https://github.com/facebook/create-react-app/pull/1289) Remove path-exists from dependencies and replace it with fs.existsSync. ([@halfzebra](https://github.com/halfzebra)) #### Committers: 35 + - Alex Driaguine ([alexdriaguine](https://github.com/alexdriaguine)) - Anders D. Johnson ([adjohnson916](https://github.com/adjohnson916)) - Anthony F. ([frehner](https://github.com/frehner)) @@ -494,11 +511,11 @@ Thanks to [@Timer](https://github.com/timer) for cutting this release. Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.9.0 ``` -Then, run your tests. If you are affected by breaking changes from Jest 18, consult [blog post](https://facebook.github.io/jest/blog/2016/12/15/2016-in-jest.html), [changelog](https://github.com/facebook/jest/blob/master/CHANGELOG.md#jest-1800), and [documentation](http://facebook.github.io/jest/docs/getting-started.html). You might need to update any snapshots since their format might have changed. +Then, run your tests. If you are affected by breaking changes from Jest 18, consult [blog post](https://facebook.github.io/jest/blog/2016/12/15/2016-in-jest.html), [changelog](https://github.com/facebook/jest/blob/master/CHANGELOG.md#jest-1800), and [documentation](https://facebook.github.io/jest/docs/getting-started.html). You might need to update any snapshots since their format might have changed. If you relied on the browser not starting in non-interactive terminals, you now need to explicitly specify `BROWSER=none` as an environment variable to disable it. @@ -507,105 +524,113 @@ If you relied on the browser not starting in non-interactive terminals, you now Thanks to [@fson](https://github.com/fson) for cutting this release. #### :bug: Bug Fix -* `create-react-app`, `react-scripts` - * [#1365](https://github.com/facebook/create-react-app/pull/1365) Use yarnpkg alias to run Yarn. ([@fson](https://github.com/fson)) + +- `create-react-app`, `react-scripts` + + - [#1365](https://github.com/facebook/create-react-app/pull/1365) Use yarnpkg alias to run Yarn. ([@fson](https://github.com/fson)) Fixes an issue where running `create-react-app` failed on systems with Apache Hadoop installed because it falsely detected Hadoop YARN executable as Yarn package manager. #### Committers: 1 + - Ville Immonen ([fson](https://github.com/fson)) ### Migrating from 0.8.4 to 0.8.5 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.8.5 ``` You may also optionally update the global command-line utility: -``` +```sh npm install -g create-react-app@1.0.3 ``` ## 0.8.4 (December 11, 2016) #### :bug: Bug Fix -* `react-scripts` - * [#1233](https://github.com/facebook/create-react-app/pull/1233) Disable subresource integrity temporarily. ([@Timer](https://github.com/Timer)) +- `react-scripts` + + - [#1233](https://github.com/facebook/create-react-app/pull/1233) Disable subresource integrity temporarily. ([@Timer](https://github.com/Timer)) We added [Subresource Integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) checks to the build output in 0.8.2 but it turns out that they may fail in browsers using special compression proxies, such as Chrome on Android, when served over HTTP. We disabled the checks until we can find a safe way to add them. -* `react-dev-utils` +- `react-dev-utils` - * [#1226](https://github.com/facebook/create-react-app/pull/1226) Fix weird lint output. ([@n3tr](https://github.com/n3tr)) + - [#1226](https://github.com/facebook/create-react-app/pull/1226) Fix weird lint output. ([@n3tr](https://github.com/n3tr)) Fixes strange lint message formatting in some edge cases. - * [#1215](https://github.com/facebook/create-react-app/pull/1215) Fix - openChrome won't open default browser (using Canary). ([@n3tr](https://github.com/n3tr)) + - [#1215](https://github.com/facebook/create-react-app/pull/1215) Fix - openChrome won't open default browser (using Canary). ([@n3tr](https://github.com/n3tr)) Fixes a regression that caused stable Google Chrome to be opened even if you are using Canary as the default browser. -* `create-react-app` +- `create-react-app` - * [#1223](https://github.com/facebook/create-react-app/pull/1223) Clean up Yarn detection and install code. ([@fson](https://github.com/fson)) + - [#1223](https://github.com/facebook/create-react-app/pull/1223) Clean up Yarn detection and install code. ([@fson](https://github.com/fson)) Fixes noisy output on Windows when Yarn is not installed. - * [#1224](https://github.com/facebook/create-react-app/pull/1224) Exit with an error code when npm/yarn install fails. ([@fson](https://github.com/fson)) + - [#1224](https://github.com/facebook/create-react-app/pull/1224) Exit with an error code when npm/yarn install fails. ([@fson](https://github.com/fson)) #### :nail_care: Enhancement -* `react-scripts` - * [#1237](https://github.com/facebook/create-react-app/pull/1237) Clear scrollback in test mode. ([@gaearon](https://github.com/gaearon)) +- `react-scripts` + + - [#1237](https://github.com/facebook/create-react-app/pull/1237) Clear scrollback in test mode. ([@gaearon](https://github.com/gaearon)) Ensures test watcher clears the console before running. - * [#1229](https://github.com/facebook/create-react-app/pull/1229) Disable jest watch mode when --coverage flag is present [#1207]. ([@BenoitAverty](https://github.com/BenoitAverty)) + - [#1229](https://github.com/facebook/create-react-app/pull/1229) Disable jest watch mode when --coverage flag is present [#1207]. ([@BenoitAverty](https://github.com/BenoitAverty)) Since coverage doesn't work well with watch mode, we don’t run the watcher on `npm test -- --coverage` anymore. - * [#1212](https://github.com/facebook/create-react-app/pull/1212) Proxy rewrites Origin header to match the target server URL. ([@koles](https://github.com/koles)) + - [#1212](https://github.com/facebook/create-react-app/pull/1212) Proxy rewrites Origin header to match the target server URL. ([@koles](https://github.com/koles)) Makes sure more API endpoints can work with the `proxy` setting. - * [#1222](https://github.com/facebook/create-react-app/pull/1222) Disable gh-page setup instruction if scripts.deploy has been added. ([@n3tr](https://github.com/n3tr)) + - [#1222](https://github.com/facebook/create-react-app/pull/1222) Disable gh-page setup instruction if scripts.deploy has been added. ([@n3tr](https://github.com/n3tr)) Suppresses the instructions printed at the end of `npm run build` if `npm run deploy` already exists. -* `create-react-app` +- `create-react-app` - * [#1236](https://github.com/facebook/create-react-app/pull/1236) Tweak console messages. ([@gaearon](https://github.com/gaearon)) + - [#1236](https://github.com/facebook/create-react-app/pull/1236) Tweak console messages. ([@gaearon](https://github.com/gaearon)) Makes error messages more friendly. - * [#1195](https://github.com/facebook/create-react-app/pull/1195) Use "commander" for cli argv handling. ([@EnoahNetzach](https://github.com/EnoahNetzach)) + - [#1195](https://github.com/facebook/create-react-app/pull/1195) Use "commander" for cli argv handling. ([@EnoahNetzach](https://github.com/EnoahNetzach)) Adds `create-react-app --help` with a list of options. -* `react-dev-utils` +- `react-dev-utils` - * [#1211](https://github.com/facebook/create-react-app/pull/1211) Use a better clear console sequence. ([@gaearon](https://github.com/gaearon)) + - [#1211](https://github.com/facebook/create-react-app/pull/1211) Use a better clear console sequence. ([@gaearon](https://github.com/gaearon)) Ensures the development server clears the terminal when files are changed. #### :memo: Documentation -* `react-dev-utils` - * [#1232](https://github.com/facebook/create-react-app/pull/1232) [documentation] fix html-dev-plugin link in react-dev-utils doc. ([@shogunsea](https://github.com/shogunsea)) +- `react-dev-utils` -* `react-scripts` + - [#1232](https://github.com/facebook/create-react-app/pull/1232) [documentation] fix html-dev-plugin link in react-dev-utils doc. ([@shogunsea](https://github.com/shogunsea)) - * [#1220](https://github.com/facebook/create-react-app/pull/1220) Adding troubleshooting information about Subresource Integrity digests.. ([@dfbaskin](https://github.com/dfbaskin)) +- `react-scripts` + + - [#1220](https://github.com/facebook/create-react-app/pull/1220) Adding troubleshooting information about Subresource Integrity digests.. ([@dfbaskin](https://github.com/dfbaskin)) #### :house: Internal -* `react-scripts` - * [#1214](https://github.com/facebook/create-react-app/pull/1214) Bump babel-eslint version. ([@existentialism](https://github.com/existentialism)) +- `react-scripts` + + - [#1214](https://github.com/facebook/create-react-app/pull/1214) Bump babel-eslint version. ([@existentialism](https://github.com/existentialism)) #### Committers: 10 + - Benoit Averty ([BenoitAverty](https://github.com/BenoitAverty)) - Brian Ng ([existentialism](https://github.com/existentialism)) - Dan Abramov ([gaearon](https://github.com/gaearon)) @@ -621,39 +646,44 @@ npm install -g create-react-app@1.0.3 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.8.4 ``` You may also optionally update the global command-line utility: -``` +```sh npm install -g create-react-app@1.0.2 ``` ## 0.8.3 (December 8, 2016) #### :bug: Bug Fix -* `create-react-app` - * [#1204](https://github.com/facebook/create-react-app/pull/1204) Catch synchronous errors from spawning yarn. ([@gaearon](https://github.com/gaearon)) + +- `create-react-app` + + - [#1204](https://github.com/facebook/create-react-app/pull/1204) Catch synchronous errors from spawning yarn. ([@gaearon](https://github.com/gaearon)) Fixes a crash when running `create-react-app` in some cases. -* `react-scripts` - * [#1203](https://github.com/facebook/create-react-app/pull/1203) Update webpack-subresource-integrity to fix Windows builds. ([@gaearon](https://github.com/gaearon)) +- `react-scripts` + + - [#1203](https://github.com/facebook/create-react-app/pull/1203) Update webpack-subresource-integrity to fix Windows builds. ([@gaearon](https://github.com/gaearon)) Fixes a crash when running `npm run build` on Windows. - * [#1201](https://github.com/facebook/create-react-app/pull/1201) Instruct Jest to load native components from RNW instead of RN. ([@remon-georgy](https://github.com/remon-georgy)) + - [#1201](https://github.com/facebook/create-react-app/pull/1201) Instruct Jest to load native components from RNW instead of RN. ([@remon-georgy](https://github.com/remon-georgy)) Fixes tests for users of React Native Web. #### :memo: Documentation -* `react-scripts` - * [#806](https://github.com/facebook/create-react-app/pull/806) Add syntax highlighting configuration guide. ([@mareksuscak](https://github.com/mareksuscak)) +- `react-scripts` + + - [#806](https://github.com/facebook/create-react-app/pull/806) Add syntax highlighting configuration guide. ([@mareksuscak](https://github.com/mareksuscak)) #### Committers: 3 + - Dan Abramov ([gaearon](https://github.com/gaearon)) - Marek Suscak ([mareksuscak](https://github.com/mareksuscak)) - Remon Georgy ([remon-georgy](https://github.com/remon-georgy)) @@ -662,78 +692,89 @@ npm install -g create-react-app@1.0.2 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.8.3 ``` You can optionally update the global CLI too: -``` +```sh npm install -g create-react-app@1.0.1 ``` ## 0.8.2 (December 7, 2016) #### :rocket: New Feature -* `react-scripts` - * [#1176](https://github.com/facebook/create-react-app/pull/1176) Add Subresource Integrity support. ([@XVincentX](https://github.com/XVincentX)) + +- `react-scripts` + + - [#1176](https://github.com/facebook/create-react-app/pull/1176) Add Subresource Integrity support. ([@XVincentX](https://github.com/XVincentX)) The generated HTML now includes [Subresource Integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) attributes ensuring that your users aren't served malicious code if your CDN gets compromised. #### :bug: Bug Fix -* `react-scripts` - * [#1197](https://github.com/facebook/create-react-app/pull/1197) Let Jest handle all file types. ([@gaearon](https://github.com/gaearon)) + +- `react-scripts` + + - [#1197](https://github.com/facebook/create-react-app/pull/1197) Let Jest handle all file types. ([@gaearon](https://github.com/gaearon)) Since 0.8.0, we started treating imports of any unknown file extensions as URLs. However, we had to revert this change for the test configuration in 0.8.1 because of a bug causing false positives. In 0.8.2, we are fixing this and making test configuration treat imports with unknown extensions the same way as we do in the browser environment. - * [#1194](https://github.com/facebook/create-react-app/pull/1194) Only honor relative `NODE_PATH`. ([@gaearon](https://github.com/gaearon)) + - [#1194](https://github.com/facebook/create-react-app/pull/1194) Only honor relative `NODE_PATH`. ([@gaearon](https://github.com/gaearon)) Historically we have allowed specifying `NODE_PATH` environment variable as a way to allow “absolute imports”. For example, running `NODE_PATH=src npm start` in Bash or `set NODE_PATH=src&&npm start` in Windows Cmd would let you import anything inside `src` without specifying a relative path. However, we found a few nasty edge cases when Node.js core modules end up being in `NODE_PATH` and erroneously become bundled. As a result the build would crash on some systems when some libraries are imported. To fix this, we now only honor relative paths from `NODE_PATH` in Create React App. This means the existing use case for absolute imports is still supported (`src` in the example above is relative), but absolute paths in `NODE_PATH` (such as paths to Node.js core modules) will be ignored. - * [#1188](https://github.com/facebook/create-react-app/pull/1188) Update Webpack to fix source map issues. ([@gaearon](https://github.com/gaearon)) + - [#1188](https://github.com/facebook/create-react-app/pull/1188) Update webpack to fix source map issues. ([@gaearon](https://github.com/gaearon)) - Since 0.8.0, we show source maps in development instead of the compiled code. However, it has come to our attention that Webpack's source map implementation had issues interpreting Babel output, and caused source maps to be wrong and breakpoints to be unusable in some cases. Webpack has released a fix for this, and we have updated the minimal version of Webpack that we are using. + Since 0.8.0, we show source maps in development instead of the compiled code. However, it has come to our attention that webpack's source map implementation had issues interpreting Babel output, and caused source maps to be wrong and breakpoints to be unusable in some cases. webpack has released a fix for this, and we have updated the minimal version of webpack that we are using. - * [#1180](https://github.com/facebook/create-react-app/pull/1180) Use `file-loader` for svgs. ([@bogdansoare](https://github.com/bogdansoare)) + - [#1180](https://github.com/facebook/create-react-app/pull/1180) Use `file-loader` for svgs. ([@bogdansoare](https://github.com/bogdansoare)) Since 0.8.0, we are treating all imports with non-JS/CSS extensions the same way. Importing them gives you a string with their URL, and if their content is small enough (less than 10K), the URL is in fact an inlined [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs). However, this doesn't work well with SVGs in case you use them for a sprite system since fragments don't work in data URIs, and it's wasteful to inline the same sprite SVG many times. To fix this, we have added an exception so that SVG files never get inlined. -* `react-dev-utils` - * [#1165](https://github.com/facebook/create-react-app/pull/1165) Chrome 'open tab' reuse an empty tab when possible. ([@n3tr](https://github.com/n3tr)) +- `react-dev-utils` + + - [#1165](https://github.com/facebook/create-react-app/pull/1165) Chrome 'open tab' reuse an empty tab when possible. ([@n3tr](https://github.com/n3tr)) Fixes an issue that caused two tabs to get opened instead of just one. It also fixes some cases where the window with the existing tab would not get activated. -* `babel-preset-react-app` - * [#1179](https://github.com/facebook/create-react-app/pull/1179) Fix Babel issues in tests by applying the right transforms. ([@gaearon](https://github.com/gaearon)) +- `babel-preset-react-app` + + - [#1179](https://github.com/facebook/create-react-app/pull/1179) Fix Babel issues in tests by applying the right transforms. ([@gaearon](https://github.com/gaearon)) Fixes regressions in test environment that caused syntax errors with generators and `async` / `await`. #### :nail_care: Enhancement -* `eslint-config-react-app` - * [#1191](https://github.com/facebook/create-react-app/pull/1191) Relax peerDependencies for ESLint preset. ([@gaearon](https://github.com/gaearon)) + +- `eslint-config-react-app` + + - [#1191](https://github.com/facebook/create-react-app/pull/1191) Relax peerDependencies for ESLint preset. ([@gaearon](https://github.com/gaearon)) This allows the preset to be used in more apps without peer dependency conflicts. We still pin the exact versions in apps that haven't ejected for extra safety. - * [#1159](https://github.com/facebook/create-react-app/pull/1159) Make jsx-no-undef rule an error. ([@existentialism](https://github.com/existentialism)) + - [#1159](https://github.com/facebook/create-react-app/pull/1159) Make jsx-no-undef rule an error. ([@existentialism](https://github.com/existentialism)) Using an undefined type in JSX is now treated as a hard lint error because it is guaranteed to crash application at runtime. -* `react-scripts` - * [#1175](https://github.com/facebook/create-react-app/pull/1175) Remove path module from webpack config on eject. ([@harunhasdal](https://github.com/harunhasdal)) +- `react-scripts` + + - [#1175](https://github.com/facebook/create-react-app/pull/1175) Remove path module from webpack config on eject. ([@harunhasdal](https://github.com/harunhasdal)) This makes the output after ejecting a bit cleaner. - * [#1120](https://github.com/facebook/create-react-app/pull/1120) Add `testURL` to Jest config. ([@spudly](https://github.com/spudly)) + - [#1120](https://github.com/facebook/create-react-app/pull/1120) Add `testURL` to Jest config. ([@spudly](https://github.com/spudly)) This fixes an error when running tests that interact with History API in jsdom. #### :memo: Documentation -* `react-scripts` - * [#1143](https://github.com/facebook/create-react-app/pull/1143) Add deploy to Firebase CDN on template's README (Closes [#374](https://github.com/facebook/create-react-app/issues/374)). ([@guilhermebruzzi](https://github.com/guilhermebruzzi)) - * [#1099](https://github.com/facebook/create-react-app/pull/1099) Fix minor typo/grammar. ([@alex-wilmer](https://github.com/alex-wilmer)) - * [#1168](https://github.com/facebook/create-react-app/pull/1168) Add "npm run build silently fails" to Troubleshooting. ([@gaearon](https://github.com/gaearon)) + +- `react-scripts` + - [#1143](https://github.com/facebook/create-react-app/pull/1143) Add deploy to Firebase CDN on template's README (Closes [#374](https://github.com/facebook/create-react-app/issues/374)). ([@guilhermebruzzi](https://github.com/guilhermebruzzi)) + - [#1099](https://github.com/facebook/create-react-app/pull/1099) Fix minor typo/grammar. ([@alex-wilmer](https://github.com/alex-wilmer)) + - [#1168](https://github.com/facebook/create-react-app/pull/1168) Add "npm run build silently fails" to Troubleshooting. ([@gaearon](https://github.com/gaearon)) #### Committers: 12 + - Alex Wilmer ([alex-wilmer](https://github.com/alex-wilmer)) - Bogdan Soare ([bogdansoare](https://github.com/bogdansoare)) - Brian Ng ([existentialism](https://github.com/existentialism)) @@ -751,7 +792,7 @@ npm install -g create-react-app@1.0.1 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.8.2 ``` @@ -760,14 +801,15 @@ npm install --save-dev --save-exact react-scripts@0.8.2 Thanks to [@fson](https://github.com/fson) for cutting this release. #### :bug: Bug Fix -* `react-scripts` - * [#1149](https://github.com/facebook/create-react-app/pull/1149) Fix incorrectly stubbing JavaScript files with a dot in the import path in tests. ([@fson](https://github.com/fson)) + +- `react-scripts` + - [#1149](https://github.com/facebook/create-react-app/pull/1149) Fix incorrectly stubbing JavaScript files with a dot in the import path in tests. ([@fson](https://github.com/fson)) ### Migrating from 0.8.0 to 0.8.1 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.8.1 ``` @@ -776,21 +818,25 @@ npm install --save-dev --save-exact react-scripts@0.8.1 Thanks to [@fson](https://github.com/fson) for cutting this release. #### :rocket: New Feature -* `react-scripts` - * [#944](https://github.com/facebook/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/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#continuous-integration) for more information. +- `react-scripts` + + - [#944](https://github.com/facebook/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/facebook/create-react-app/blob/main/packages/react-scripts/template/README.md#continuous-integration) for more information. - * [#1090](https://github.com/facebook/create-react-app/pull/1090) Enable proxying of WebSockets. ([@dceddia](https://github.com/dceddia)) + - [#1090](https://github.com/facebook/create-react-app/pull/1090) Enable proxying of WebSockets. ([@dceddia](https://github.com/dceddia)) -* `create-react-app`, `react-scripts` - * [#898](https://github.com/facebook/create-react-app/pull/898) Support Yarn. ([@fson](https://github.com/fson)) +- `create-react-app`, `react-scripts` + + - [#898](https://github.com/facebook/create-react-app/pull/898) Support Yarn. ([@fson](https://github.com/fson)) Yarn is a new fast, reliable and secure alternative to the `npm` client. If you have Yarn installed, `create-react-app` will use it to install packages when you create an app. It also creates a `yarn.lock` file that should be checked into source control (e.g. git). This ensures the same versions of packages will be installed each time `yarn install` is run, on any machine. `react-scripts` now also displays instructions using `yarn` commands for projects using Yarn (projects having a `yarn.lock` file). To create a project using Yarn, simply install `yarn` and use `create-react-app` like before: + ``` npm install -g yarn create-react-app@latest @@ -798,58 +844,68 @@ Thanks to [@fson](https://github.com/fson) for cutting this release. ``` #### :boom: Breaking Change -* `babel-preset-react-app` - * [#902](https://github.com/facebook/create-react-app/pull/902) Enable useBuiltIns option on object-rest-spread. ([@existentialism](https://github.com/existentialism)) - Object rest spread and JSX now use the native `Object.assign()` method instead of Babel's helper function. If you are using `babel-preset-react-app` directly in your project *and* targeting browsers that don't have `Object.assign()` available, from now on you need a polyfill for it (e.g. [`object-assign`](https://www.npmjs.com/package/object-assign)). +- `babel-preset-react-app` + + - [#902](https://github.com/facebook/create-react-app/pull/902) Enable useBuiltIns option on object-rest-spread. ([@existentialism](https://github.com/existentialism)) + + Object rest spread and JSX now use the native `Object.assign()` method instead of Babel's helper function. If you are using `babel-preset-react-app` directly in your project _and_ targeting browsers that don't have `Object.assign()` available, from now on you need a polyfill for it (e.g. [`object-assign`](https://www.npmjs.com/package/object-assign)). **Note:** `react-scripts` already adds this polyfill, so no changes are necessary in Create React App projects. #### :bug: Bug Fix -* `react-scripts` - * [#978](https://github.com/facebook/create-react-app/pull/978) Move the remove-on-eject-end tag at the end of the file. ([@EnoahNetzach](https://github.com/EnoahNetzach)) + +- `react-scripts` + + - [#978](https://github.com/facebook/create-react-app/pull/978) Move the remove-on-eject-end tag at the end of the file. ([@EnoahNetzach](https://github.com/EnoahNetzach)) Fixes a bug in ejected configuration. - * [#1017](https://github.com/facebook/create-react-app/pull/1017) Don't look for `.babelrc` file during test. ([@nhajidin](https://github.com/nhajidin)) + - [#1017](https://github.com/facebook/create-react-app/pull/1017) Don't look for `.babelrc` file during test. ([@nhajidin](https://github.com/nhajidin)) Fixes a `.babelrc` file in a parent directory interfering with the `npm test` command. - * [#951](https://github.com/facebook/create-react-app/pull/951) Check for presence of folders before continuing eject. ([@heldinz](https://github.com/heldinz)) + - [#951](https://github.com/facebook/create-react-app/pull/951) Check for presence of folders before continuing eject. ([@heldinz](https://github.com/heldinz)) Fixes a bug where `eject` failed when a `scripts` or `config` folder already existed in the project. -* `react-dev-utils` - * [#1035](https://github.com/facebook/create-react-app/pull/1035) Fix Chrome tab reuse. ([@einarlove](https://github.com/einarlove)) +- `react-dev-utils` + + - [#1035](https://github.com/facebook/create-react-app/pull/1035) Fix Chrome tab reuse. ([@einarlove](https://github.com/einarlove)) Fixes a bug with the app not opening in the existing tab in Chrome. - * [#964](https://github.com/facebook/create-react-app/pull/964) Catch and noop call to open web browser. ([@spadin](https://github.com/spadin)) + - [#964](https://github.com/facebook/create-react-app/pull/964) Catch and noop call to open web browser. ([@spadin](https://github.com/spadin)) Not being able to open a browser doesn't crash the development server now. -* `eslint-config-react-app`, `react-scripts` - * [#953](https://github.com/facebook/create-react-app/pull/953) Fix `.ico` file extension being handled by test configuration. ([@vadzim](https://github.com/vadzim)) +- `eslint-config-react-app`, `react-scripts` + - [#953](https://github.com/facebook/create-react-app/pull/953) Fix `.ico` file extension being handled by test configuration. ([@vadzim](https://github.com/vadzim)) #### :nail_care: Enhancement -* `react-scripts` - * [#1032](https://github.com/facebook/create-react-app/pull/1032) Add support for non-interactive terminal. ([@sheerun](https://github.com/sheerun)) - * [#1078](https://github.com/facebook/create-react-app/pull/1078) Upgrade Jest to 17.0. ([@fson](https://github.com/fson)) - * [#1059](https://github.com/facebook/create-react-app/pull/1059) Use `url-loader` with limit 10k as a default loader. ([@bebbi](https://github.com/bebbi)) + +- `react-scripts` + + - [#1032](https://github.com/facebook/create-react-app/pull/1032) Add support for non-interactive terminal. ([@sheerun](https://github.com/sheerun)) + - [#1078](https://github.com/facebook/create-react-app/pull/1078) Upgrade Jest to 17.0. ([@fson](https://github.com/fson)) + - [#1059](https://github.com/facebook/create-react-app/pull/1059) Use `url-loader` with limit 10k as a default loader. ([@bebbi](https://github.com/bebbi)) `react-scripts` now treats imports with any unknown file extension as a resource. Files with a size below 10 KB are inlined using a data URI and larger files copied to the build folder. This removes the need for an internal [whitelist of supported file extensions](https://github.com/facebook/create-react-app/issues/667). Any file that's not JS or CSS is now handled the same way. - * [#924](https://github.com/facebook/create-react-app/pull/924) Enable JavaScript source maps in development. ([@ekaradon](https://github.com/ekaradon)) - * [#1058](https://github.com/facebook/create-react-app/pull/1058) Add missing dev argument in build script message. ([@nhajidin](https://github.com/nhajidin)) - * [#961](https://github.com/facebook/create-react-app/pull/961) Add `collectCoverageFrom` option to collect coverage on files without any tests. ([@pmackcode](https://github.com/pmackcode)) + - [#924](https://github.com/facebook/create-react-app/pull/924) Enable JavaScript source maps in development. ([@ekaradon](https://github.com/ekaradon)) + - [#1058](https://github.com/facebook/create-react-app/pull/1058) Add missing dev argument in build script message. ([@nhajidin](https://github.com/nhajidin)) + - [#961](https://github.com/facebook/create-react-app/pull/961) Add `collectCoverageFrom` option to collect coverage on files without any tests. ([@pmackcode](https://github.com/pmackcode)) The test script now considers all files in the project when calculating test coverage. - * [#968](https://github.com/facebook/create-react-app/pull/968) Enable gzip compression in the development server (#966). ([@frontsideair](https://github.com/frontsideair)) -* `react-dev-utils`, `react-scripts` - * [#816](https://github.com/facebook/create-react-app/pull/816) add logging of existing default port process on start. ([@ianmcnally](https://github.com/ianmcnally)) + - [#968](https://github.com/facebook/create-react-app/pull/968) Enable gzip compression in the development server (#966). ([@frontsideair](https://github.com/frontsideair)) + +- `react-dev-utils`, `react-scripts` + + - [#816](https://github.com/facebook/create-react-app/pull/816) add logging of existing default port process on start. ([@ianmcnally](https://github.com/ianmcnally)) `react-scripts` can guess which process is running on the port 3000 when it's not available: + ``` Something is already running on port 3000. Probably: my-app @@ -857,34 +913,38 @@ Thanks to [@fson](https://github.com/fson) for cutting this release. Would you like to run the app on another port instead? ``` -* `react-dev-utils` - * [#963](https://github.com/facebook/create-react-app/pull/963) Allow webpack 2 as a peerDependency in react-dev-utils. ([@einarlove](https://github.com/einarlove)) + +- `react-dev-utils` + - [#963](https://github.com/facebook/create-react-app/pull/963) Allow webpack 2 as a peerDependency in react-dev-utils. ([@einarlove](https://github.com/einarlove)) #### :memo: Documentation -* `react-scripts` - * [#1126](https://github.com/facebook/create-react-app/pull/1126) Add a note about vscode-jest. ([@orta](https://github.com/orta)) - * [#1080](https://github.com/facebook/create-react-app/pull/1080) Add a note for OSX users about watchman and jest. ([@dmr](https://github.com/dmr)) - * [#1071](https://github.com/facebook/create-react-app/pull/1071) Adds to docs - deployment with S3/CloudFront. ([@marcgarreau](https://github.com/marcgarreau)) - * [#976](https://github.com/facebook/create-react-app/pull/976) Added info on using global variables. ([@jhorneman](https://github.com/jhorneman)) - * [#996](https://github.com/facebook/create-react-app/pull/996) Remove redundant `function` from export statement. ([@gnowoel](https://github.com/gnowoel)) - * [#959](https://github.com/facebook/create-react-app/pull/959) Always build before deploying to gh-pages. ([@dsernst](https://github.com/dsernst)) - * [#974](https://github.com/facebook/create-react-app/pull/974) Gently nudge users towards https by default. ([@Swizec](https://github.com/Swizec)) -* Other - * [#1031](https://github.com/facebook/create-react-app/pull/1031) No Configuration -> Convention over Configuration. ([@sheerun](https://github.com/sheerun)) - * [#995](https://github.com/facebook/create-react-app/pull/995) Add Gatsby to alternatives. ([@KyleAMathews](https://github.com/KyleAMathews)) + +- `react-scripts` + - [#1126](https://github.com/facebook/create-react-app/pull/1126) Add a note about vscode-jest. ([@orta](https://github.com/orta)) + - [#1080](https://github.com/facebook/create-react-app/pull/1080) Add a note for OSX users about watchman and jest. ([@dmr](https://github.com/dmr)) + - [#1071](https://github.com/facebook/create-react-app/pull/1071) Adds to docs - deployment with S3/CloudFront. ([@marcgarreau](https://github.com/marcgarreau)) + - [#976](https://github.com/facebook/create-react-app/pull/976) Added info on using global variables. ([@jhorneman](https://github.com/jhorneman)) + - [#996](https://github.com/facebook/create-react-app/pull/996) Remove redundant `function` from export statement. ([@gnowoel](https://github.com/gnowoel)) + - [#959](https://github.com/facebook/create-react-app/pull/959) Always build before deploying to gh-pages. ([@dsernst](https://github.com/dsernst)) + - [#974](https://github.com/facebook/create-react-app/pull/974) Gently nudge users towards https by default. ([@Swizec](https://github.com/Swizec)) +- Other + - [#1031](https://github.com/facebook/create-react-app/pull/1031) No Configuration -> Convention over Configuration. ([@sheerun](https://github.com/sheerun)) + - [#995](https://github.com/facebook/create-react-app/pull/995) Add Gatsby to alternatives. ([@KyleAMathews](https://github.com/KyleAMathews)) #### :house: Internal -* `react-scripts` - * [#1072](https://github.com/facebook/create-react-app/pull/1072) Replace rimraf with fs-extra functions. ([@existentialism](https://github.com/existentialism)) - * [#1068](https://github.com/facebook/create-react-app/pull/1068) Remove bundledDependencies. ([@fson](https://github.com/fson)) - * [#1057](https://github.com/facebook/create-react-app/pull/1057) Update `css-loader`. ([@nhajidin](https://github.com/nhajidin)) - * [#983](https://github.com/facebook/create-react-app/pull/983) Remove custom babel-loader cache dir config. ([@fson](https://github.com/fson)) -* `babel-preset-react-app` - * [#1052](https://github.com/facebook/create-react-app/pull/1052) Remove unnecessary transform plugins for object spread to work. ([@valscion](https://github.com/valscion)) - * [#992](https://github.com/facebook/create-react-app/pull/992) Explain the usage of react-jsx-source & react-jsx-self. ([@bboysathish](https://github.com/bboysathish)) - * [#1051](https://github.com/facebook/create-react-app/pull/1051) Update babel-present-env and use node: 'current' as target. ([@valscion](https://github.com/valscion)) + +- `react-scripts` + - [#1072](https://github.com/facebook/create-react-app/pull/1072) Replace rimraf with fs-extra functions. ([@existentialism](https://github.com/existentialism)) + - [#1068](https://github.com/facebook/create-react-app/pull/1068) Remove bundledDependencies. ([@fson](https://github.com/fson)) + - [#1057](https://github.com/facebook/create-react-app/pull/1057) Update `css-loader`. ([@nhajidin](https://github.com/nhajidin)) + - [#983](https://github.com/facebook/create-react-app/pull/983) Remove custom babel-loader cache dir config. ([@fson](https://github.com/fson)) +- `babel-preset-react-app` + - [#1052](https://github.com/facebook/create-react-app/pull/1052) Remove unnecessary transform plugins for object spread to work. ([@valscion](https://github.com/valscion)) + - [#992](https://github.com/facebook/create-react-app/pull/992) Explain the usage of react-jsx-source & react-jsx-self. ([@bboysathish](https://github.com/bboysathish)) + - [#1051](https://github.com/facebook/create-react-app/pull/1051) Update babel-present-env and use node: 'current' as target. ([@valscion](https://github.com/valscion)) #### Committers: 27 + - Adam Stankiewicz ([sheerun](https://github.com/sheerun)) - Alice Rose ([heldinz](https://github.com/heldinz)) - Arunoda Susiripala ([arunoda](https://github.com/arunoda)) @@ -917,13 +977,13 @@ Thanks to [@fson](https://github.com/fson) for cutting this release. You may optionally update the global command (it’s not required, but it adds Yarn support for new projects): -``` +```sh npm install -g create-react-app@1.0.0 ``` Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.8.0 ``` @@ -933,49 +993,49 @@ Thanks to [@fson](https://github.com/fson) for cutting this release. ### Build Dependency (`react-scripts`) -* Updates Jest to [version 16.0](http://facebook.github.io/jest/blog/2016/10/03/jest-16.html), with an upgraded CLI, improved snapshot testing, new matchers and more. ([@chase](https://github.com/chase) in [#858](https://github.com/facebook/create-react-app/pull/858)) -* Test setup file `src/setupTests.js` is now called after test framework initialization to support loading custom matchers. ([@just-boris](https://github.com/just-boris) in [#846](https://github.com/facebook/create-react-app/pull/846)) -* Build command shows better instructions for deploying the app to GitHub Pages ([@Janpot](https://github.com/Janpot) in [#841](https://github.com/facebook/create-react-app/pull/841)) -* Build command now generates an asset manifest with mappings from each filename to its final output filename. ([@lukyth](https://github.com/lukyth) in [#891](https://github.com/facebook/create-react-app/pull/891)) -* Build command exits, if there are errors from UglifyJS ([@pdillon](https://github.com/pdillon) in [#859](https://github.com/facebook/create-react-app/pull/859)) -* Eject output is more beautiful now. ([@azakordonets](https://github.com/azakordonets) in [#769](https://github.com/facebook/create-react-app/pull/769)) -* Fixes opening the app in a new tab in Chrome. ([@unixdev](https://github.com/unixdev) in [#831](https://github.com/facebook/create-react-app/pull/831)) -* Fixes environment variables not being defined as normal properties of the `process.env` object. ([@dvkndn](https://github.com/dvkndn) in [#807](https://github.com/facebook/create-react-app/pull/807)) -* Fixes PostCSS autoprefixer not processing CSS files imported with CSS `@import` statements. ([@nhunzaker](https://github.com/nhunzaker) in [#929](https://github.com/facebook/create-react-app/pull/929)) +- Updates Jest to [version 16.0](https://facebook.github.io/jest/blog/2016/10/03/jest-16.html), with an upgraded CLI, improved snapshot testing, new matchers and more. ([@chase](https://github.com/chase) in [#858](https://github.com/facebook/create-react-app/pull/858)) +- Test setup file `src/setupTests.js` is now called after test framework initialization to support loading custom matchers. ([@just-boris](https://github.com/just-boris) in [#846](https://github.com/facebook/create-react-app/pull/846)) +- Build command shows better instructions for deploying the app to GitHub Pages ([@Janpot](https://github.com/Janpot) in [#841](https://github.com/facebook/create-react-app/pull/841)) +- Build command now generates an asset manifest with mappings from each filename to its final output filename. ([@lukyth](https://github.com/lukyth) in [#891](https://github.com/facebook/create-react-app/pull/891)) +- Build command exits, if there are errors from UglifyJS ([@pdillon](https://github.com/pdillon) in [#859](https://github.com/facebook/create-react-app/pull/859)) +- Eject output is more beautiful now. ([@azakordonets](https://github.com/azakordonets) in [#769](https://github.com/facebook/create-react-app/pull/769)) +- Fixes opening the app in a new tab in Chrome. ([@unixdev](https://github.com/unixdev) in [#831](https://github.com/facebook/create-react-app/pull/831)) +- Fixes environment variables not being defined as normal properties of the `process.env` object. ([@dvkndn](https://github.com/dvkndn) in [#807](https://github.com/facebook/create-react-app/pull/807)) +- Fixes PostCSS autoprefixer not processing CSS files imported with CSS `@import` statements. ([@nhunzaker](https://github.com/nhunzaker) in [#929](https://github.com/facebook/create-react-app/pull/929)) ### ESLint Config (`eslint-config-react-app`) -* Adds `import/no-webpack-loader-syntax` rule that forbids using custom Webpack specific syntax to specify Webpack loaders in import statements. ([@fson](https://github.com/fson) in [#803](https://github.com/facebook/create-react-app/pull/803)) -* `react/react-in-jsx-scope` rule ("React must be in scope") is now an error. ([@gaearon](https://github.com/gaearon) in [#822](https://github.com/facebook/create-react-app/pull/822)) -* `no-unused-expressions` rule now allows the use of short circuit and ternary expressions. ([@cannona](https://github.com/cannona) in [#724](https://github.com/facebook/create-react-app/pull/724)) +- Adds `import/no-webpack-loader-syntax` rule that forbids using custom webpack specific syntax to specify webpack loaders in import statements. ([@fson](https://github.com/fson) in [#803](https://github.com/facebook/create-react-app/pull/803)) +- `react/react-in-jsx-scope` rule ("React must be in scope") is now an error. ([@gaearon](https://github.com/gaearon) in [#822](https://github.com/facebook/create-react-app/pull/822)) +- `no-unused-expressions` rule now allows the use of short circuit and ternary expressions. ([@cannona](https://github.com/cannona) in [#724](https://github.com/facebook/create-react-app/pull/724)) ### Babel Preset (`babel-preset-react-app`) -* The preset now detects the Node.js version in test environment and disables unnecessary ES2015 transforms using `babel-preset-env`. ([@shubheksha](https://github.com/shubheksha) in [#878](https://github.com/facebook/create-react-app/pull/878), [@JeffreyATW](https://github.com/JeffreyATW) in [#927 -](https://github.com/facebook/create-react-app/pull/927)) -* Fixes a duplicate dependency on `babel-plugin-transform-regenerator`. ([@akofman](https://github.com/akofman) in [#864](https://github.com/facebook/create-react-app/pull/864)) +- The preset now detects the Node.js version in test environment and disables unnecessary ES2015 transforms using `babel-preset-env`. ([@shubheksha](https://github.com/shubheksha) in [#878](https://github.com/facebook/create-react-app/pull/878), [@JeffreyATW](https://github.com/JeffreyATW) in [#927 + ](https://github.com/facebook/create-react-app/pull/927)) +- Fixes a duplicate dependency on `babel-plugin-transform-regenerator`. ([@akofman](https://github.com/akofman) in [#864](https://github.com/facebook/create-react-app/pull/864)) ### Utilities (`react-dev-utils`) -* The error overlay is now disposed after fixing linting errors. ([@jarlef](https://github.com/jarlef) in [#856](https://github.com/facebook/create-react-app/pull/856)) -* Adds support for Webpack 2 to `webpackHotDevClient`. ([@michalkvasnicak](https://github.com/michalkvasnicak) in [#840](https://github.com/facebook/create-react-app/pull/840)) +- The error overlay is now disposed after fixing linting errors. ([@jarlef](https://github.com/jarlef) in [#856](https://github.com/facebook/create-react-app/pull/856)) +- Adds support for webpack 2 to `webpackHotDevClient`. ([@michalkvasnicak](https://github.com/michalkvasnicak) in [#840](https://github.com/facebook/create-react-app/pull/840)) ### Global CLI (`create-react-app`) -* Adds support for passing a scoped package name to the `--scripts-version` argument. ([@pdillon](https://github.com/pdillon) in [#826](https://github.com/facebook/create-react-app/pull/826)) -* Fixes installing pre-release versions using a tarball URL with the `--scripts-version` argument. ([@jihchi](https://github.com/jihchi) in [#876](https://github.com/facebook/create-react-app/pull/876)) +- Adds support for passing a scoped package name to the `--scripts-version` argument. ([@pdillon](https://github.com/pdillon) in [#826](https://github.com/facebook/create-react-app/pull/826)) +- Fixes installing pre-release versions using a tarball URL with the `--scripts-version` argument. ([@jihchi](https://github.com/jihchi) in [#876](https://github.com/facebook/create-react-app/pull/876)) ### Migrating from 0.6.1 to 0.7.0 You may optionally update the global command (it’s not required): -``` +```sh npm install -g create-react-app@0.6.0 ``` Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.7.0 ``` @@ -984,7 +1044,8 @@ npm install --save-dev --save-exact react-scripts@0.7.0 #### Updating Snapshots Jest 16 includes [improvements to snapshot testing and changes to the snapshot format](https://facebook.github.io/jest/blog/2016/10/03/jest-16.html#snapshot-updates). If your project uses snapshot testing, you'll need to update the snapshot files. To update the snapshots, run: -``` + +```sh npm test -- -u ``` @@ -992,17 +1053,17 @@ npm test -- -u ### Build Dependency (`react-scripts`) -* Babel and ESLint configuration is now placed into `package.json` after ejecting. ([@montogeek](https://github.com/montogeek) in [#773](https://github.com/facebook/create-react-app/pull/773)) +- Babel and ESLint configuration is now placed into `package.json` after ejecting. ([@montogeek](https://github.com/montogeek) in [#773](https://github.com/facebook/create-react-app/pull/773)) ### Utilities (`react-dev-utils`) -* Fixes the syntax error overlay padding. ([@fson](https://github.com/fson) in [#758](https://github.com/facebook/create-react-app/pull/758)) +- Fixes the syntax error overlay padding. ([@fson](https://github.com/fson) in [#758](https://github.com/facebook/create-react-app/pull/758)) ### Migrating from 0.6.0 to 0.6.1 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.6.1 ``` @@ -1010,17 +1071,17 @@ npm install --save-dev --save-exact react-scripts@0.6.1 ### Build Dependency (`react-scripts`) -* Adds an overlay for syntax errors in development. ([@gaearon](https://github.com/gaearon) in [#744](https://github.com/facebook/create-react-app/pull/744)) +- Adds an overlay for syntax errors in development. ([@gaearon](https://github.com/gaearon) in [#744](https://github.com/facebook/create-react-app/pull/744)) ### Utilities (`react-dev-utils`) -* Adds an alternative WebpackDevServer client that displays the error overlay. ([@gaearon](https://github.com/gaearon) in [#744](https://github.com/facebook/create-react-app/pull/744)) +- Adds an alternative WebpackDevServer client that displays the error overlay. ([@gaearon](https://github.com/gaearon) in [#744](https://github.com/facebook/create-react-app/pull/744)) ### Migrating from 0.5.1 to 0.6.0 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.6.0 ``` @@ -1030,17 +1091,17 @@ npm install --save-dev --save-exact react-scripts@0.6.0 ### Build Dependency (`react-scripts`) -* Updates `react-dev-utils` dependency +- Updates `react-dev-utils` dependency ### Utilities (`react-dev-utils`) -* Fixes `%PUBLIC_URL%` replacement to work when specified multiple times. ([@fson](https://github.com/fson) in [#731](https://github.com/facebook/create-react-app/pull/731)) +- Fixes `%PUBLIC_URL%` replacement to work when specified multiple times. ([@fson](https://github.com/fson) in [#731](https://github.com/facebook/create-react-app/pull/731)) ### Migrating from 0.5.0 to 0.5.1 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.5.1 ``` @@ -1048,36 +1109,36 @@ npm install --save-dev --save-exact react-scripts@0.5.1 ### Build Dependency (`react-scripts`) -* Adds [support for `public` folder](https://github.com/facebook/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/facebook/create-react-app/pull/703)) -* You can now [specify defaults](https://github.com/facebook/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/facebook/create-react-app/pull/695)) -* Ejecting now generates proper `.babelrc` and `.eslintrc`. ([@fson](https://github.com/fson) in [#689](https://github.com/facebook/create-react-app/pull/689), [@gaearon](https://github.com/gaearon) in [#705](https://github.com/facebook/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/facebook/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/facebook/create-react-app/issues/711)) -* The projects generated with `eject` are now cleaner. ([@gaearon](https://github.com/gaearon) in [#723](https://github.com/facebook/create-react-app/pull/723)) -* The project is now managed as a monorepo. ([@ryanyogan](https://github.com/ryanyogan) in [#419](https://github.com/facebook/create-react-app/pull/419), [@fson](https://github.com/fson) in [#678](https://github.com/facebook/create-react-app/pull/678)) +- Adds [support for `public` folder](https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/template/README.md#using-the-public-folder) with arbitrary assets. ([@gaearon](https://github.com/gaearon) in [#703](https://github.com/facebook/create-react-app/pull/703)) +- You can now [specify defaults](https://github.com/facebook/create-react-app/blob/main/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/facebook/create-react-app/pull/695)) +- Ejecting now generates proper `.babelrc` and `.eslintrc`. ([@fson](https://github.com/fson) in [#689](https://github.com/facebook/create-react-app/pull/689), [@gaearon](https://github.com/gaearon) in [#705](https://github.com/facebook/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/facebook/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/facebook/create-react-app/issues/711)) +- The projects generated with `eject` are now cleaner. ([@gaearon](https://github.com/gaearon) in [#723](https://github.com/facebook/create-react-app/pull/723)) +- The project is now managed as a monorepo. ([@ryanyogan](https://github.com/ryanyogan) in [#419](https://github.com/facebook/create-react-app/pull/419), [@fson](https://github.com/fson) in [#678](https://github.com/facebook/create-react-app/pull/678)) ### ESLint Config (`eslint-config-react-app`) -* Published for the first time! ([@fson](https://github.com/fson) in [#689](https://github.com/facebook/create-react-app/pull/689)) -* Added [`react/no-danger-with-children`](https://github.com/yannickcr/eslint-plugin-react/blob/v6.3.0/docs/rules/no-danger-with-children.md) and [`react/style-prop-object`](https://github.com/yannickcr/eslint-plugin-react/blob/v6.3.0/docs/rules/style-prop-object.md) rules. ([@fson](https://github.com/fson) in [#696](https://github.com/facebook/create-react-app/pull/696)) +- Published for the first time! ([@fson](https://github.com/fson) in [#689](https://github.com/facebook/create-react-app/pull/689)) +- Added [`react/no-danger-with-children`](https://github.com/yannickcr/eslint-plugin-react/blob/v6.3.0/docs/rules/no-danger-with-children.md) and [`react/style-prop-object`](https://github.com/yannickcr/eslint-plugin-react/blob/v6.3.0/docs/rules/style-prop-object.md) rules. ([@fson](https://github.com/fson) in [#696](https://github.com/facebook/create-react-app/pull/696)) ### Babel Preset (`babel-preset-react-app`) -* Published for the first time! ([@fson](https://github.com/fson) in [#701](https://github.com/facebook/create-react-app/pull/701)) +- Published for the first time! ([@fson](https://github.com/fson) in [#701](https://github.com/facebook/create-react-app/pull/701)) ### Utilities (`react-dev-utils`) -* Published for the first time! ([@gaearon](https://github.com/gaearon) in [#723](https://github.com/facebook/create-react-app/pull/723)) +- Published for the first time! ([@gaearon](https://github.com/gaearon) in [#723](https://github.com/facebook/create-react-app/pull/723)) ### Global CLI (`create-react-app`) -* Added `README` to npm. There were no other changes. +- Added `README` to npm. There were no other changes. ### Migrating from 0.4.3 to 0.5.0 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.5.0 ``` @@ -1095,17 +1156,17 @@ You can no longer reference any files from `./src` in `index.html`. Instead, `pu For example, instead of: -```js - +```html + ``` You would need to move both `index.html` and `src/favicon.ico` into the `public` folder, and change `` to look like this: ```html - + ``` -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/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) and [why these changes were made](https://github.com/facebook/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/facebook/create-react-app/blob/main/packages/react-scripts/template/README.md#using-the-public-folder) and [why these changes were made](https://github.com/facebook/create-react-app/pull/703). ## 0.4.3 (September 18, 2016) @@ -1114,13 +1175,13 @@ It contained no changes to the code. ### Build Dependency (`react-scripts`) -* Fixes a packaging issue that affected npm 2. ([#676](https://github.com/facebook/create-react-app/issues/676)) +- Fixes a packaging issue that affected npm 2. ([#676](https://github.com/facebook/create-react-app/issues/676)) ### Migrating from 0.4.2 to 0.4.3 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.4.3 ``` @@ -1128,38 +1189,38 @@ npm install --save-dev --save-exact react-scripts@0.4.3 ### Build Dependency (`react-scripts`) -* Lint output in editor is now opt-in because, due to [this ESLint issue](https://github.com/eslint/eslint/issues/3458), it is broken by default in Atom. ([@fson](https://github.com/fson) in [#649](https://github.com/facebook/create-react-app/pull/649)) -* Fixes an issue causing compile errors when project folder is inside a symlink. ([@motiz88](https://github.com/motiz88) in [#648](https://github.com/facebook/create-react-app/pull/648)) -* You can now import `jpeg`, `wav`, `mp3`, `m4a`, `aac`, and `oga`. ([@mareksuscak](https://github.com/mareksuscak) in [#624](https://github.com/facebook/create-react-app/pull/624), [@danharper](https://github.com/danharper) in [#665](https://github.com/facebook/create-react-app/pull/665)) -* Fixes false positives caused by the case sensitive import warning on Windows. ([@Urthen](https://github.com/Urthen) in [#593](https://github.com/facebook/create-react-app/pull/593)) -* With Docker, `*.json.gzip` files are no longer created in the project folder. ([@thangngoc89](https://github.com/thangngoc89) in [#620](https://github.com/facebook/create-react-app/pull/620)) -* Proxy network errors now abort requests instead of hanging. ([@cloudmu](https://github.com/cloudmu) in [#588](https://github.com/facebook/create-react-app/pull/588)) -* Connection to the development server does not get interrupted in HTTPS mode. ([@dceddia](https://github.com/dceddia) in [#652](https://github.com/facebook/create-react-app/pull/652)) -* Unsupported Node versions now print a warning. ([@fson](https://github.com/fson) in [#575](https://github.com/facebook/create-react-app/pull/575)) -* Importing assets with special characters like `@` now works with tests. ([@fson](https://github.com/fson) in [#584](https://github.com/facebook/create-react-app/pull/584)) -* Undefined variable lint rule is promoted from a warning to an error. ([@gaearon](https://github.com/gaearon) in [#669](https://github.com/facebook/create-react-app/pull/669)) -* Variables starting with underscore no longer trigger the “unused variable” rule. ([@valscion](https://github.com/valscion) in [#640](https://github.com/facebook/create-react-app/pull/640)) -* We now print a friendly error when required files are missing. ([@vnctaing](https://github.com/vnctaing) in [#653](https://github.com/facebook/create-react-app/pull/653)) -* The output after creating a project is better formatted. ([@btnwtn](https://github.com/btnwtn) in [#629](https://github.com/facebook/create-react-app/pull/629)) -* Development server logs are less noisy. ([@gaearon](https://github.com/gaearon) in [122068](https://github.com/facebook/create-react-app/commit/1220683276dd9eb2f2719aece7f40bf2ffb397b4)) +- Lint output in editor is now opt-in because, due to [this ESLint issue](https://github.com/eslint/eslint/issues/3458), it is broken by default in Atom. ([@fson](https://github.com/fson) in [#649](https://github.com/facebook/create-react-app/pull/649)) +- Fixes an issue causing compile errors when project folder is inside a symlink. ([@motiz88](https://github.com/motiz88) in [#648](https://github.com/facebook/create-react-app/pull/648)) +- You can now import `jpeg`, `wav`, `mp3`, `m4a`, `aac`, and `oga`. ([@mareksuscak](https://github.com/mareksuscak) in [#624](https://github.com/facebook/create-react-app/pull/624), [@danharper](https://github.com/danharper) in [#665](https://github.com/facebook/create-react-app/pull/665)) +- Fixes false positives caused by the case sensitive import warning on Windows. ([@Urthen](https://github.com/Urthen) in [#593](https://github.com/facebook/create-react-app/pull/593)) +- With Docker, `*.json.gzip` files are no longer created in the project folder. ([@thangngoc89](https://github.com/thangngoc89) in [#620](https://github.com/facebook/create-react-app/pull/620)) +- Proxy network errors now abort requests instead of hanging. ([@cloudmu](https://github.com/cloudmu) in [#588](https://github.com/facebook/create-react-app/pull/588)) +- Connection to the development server does not get interrupted in HTTPS mode. ([@dceddia](https://github.com/dceddia) in [#652](https://github.com/facebook/create-react-app/pull/652)) +- Unsupported Node versions now print a warning. ([@fson](https://github.com/fson) in [#575](https://github.com/facebook/create-react-app/pull/575)) +- Importing assets with special characters like `@` now works with tests. ([@fson](https://github.com/fson) in [#584](https://github.com/facebook/create-react-app/pull/584)) +- Undefined variable lint rule is promoted from a warning to an error. ([@gaearon](https://github.com/gaearon) in [#669](https://github.com/facebook/create-react-app/pull/669)) +- Variables starting with underscore no longer trigger the “unused variable” rule. ([@valscion](https://github.com/valscion) in [#640](https://github.com/facebook/create-react-app/pull/640)) +- We now print a friendly error when required files are missing. ([@vnctaing](https://github.com/vnctaing) in [#653](https://github.com/facebook/create-react-app/pull/653)) +- The output after creating a project is better formatted. ([@btnwtn](https://github.com/btnwtn) in [#629](https://github.com/facebook/create-react-app/pull/629)) +- Development server logs are less noisy. ([@gaearon](https://github.com/gaearon) in [122068](https://github.com/facebook/create-react-app/commit/1220683276dd9eb2f2719aece7f40bf2ffb397b4)) ### Global CLI (`create-react-app`) -* It now runs on early Node versions to print a friendly warning instead of crashing. ([@sotojuan](https://github.com/sotojuan) in [fc3ab4](https://github.com/facebook/create-react-app/commit/fc3ab46d2a54f142f9287ce7de9ab2fc2514487d)) -* We now print a friendly message when you create a project with invalid name. ([@mareksuscak](https://github.com/mareksuscak) in [#628](https://github.com/facebook/create-react-app/pull/628)) -* Passing a custom fork of `react-scripts` to `create-react-app` with `--scripts-version` works again. ([@yesmeck](https://github.com/yesmeck) in [#632](https://github.com/facebook/create-react-app/pull/632)) +- It now runs on early Node versions to print a friendly warning instead of crashing. ([@sotojuan](https://github.com/sotojuan) in [fc3ab4](https://github.com/facebook/create-react-app/commit/fc3ab46d2a54f142f9287ce7de9ab2fc2514487d)) +- We now print a friendly message when you create a project with invalid name. ([@mareksuscak](https://github.com/mareksuscak) in [#628](https://github.com/facebook/create-react-app/pull/628)) +- Passing a custom fork of `react-scripts` to `create-react-app` with `--scripts-version` works again. ([@yesmeck](https://github.com/yesmeck) in [#632](https://github.com/facebook/create-react-app/pull/632)) ### Migrating from 0.4.1 to 0.4.2 You may optionally update the global command (it’s not required): -``` +```sh npm install -g create-react-app@0.4.2 ``` Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.4.2 ``` @@ -1167,14 +1228,14 @@ npm install --save-dev --save-exact react-scripts@0.4.2 ### Build Dependency (`react-scripts`) -* We now support (but [don’t recommend](https://github.com/facebook/create-react-app/issues/87#issuecomment-234627904)) `.jsx` file extension. ([@tizmagik](https://github.com/tizmagik) in [#563](https://github.com/facebook/create-react-app/pull/563)) -* Proxy request errors are now printed to the console. ([@cloudmu](https://github.com/cloudmu) in [#502](https://github.com/facebook/create-react-app/pull/502)) +- We now support (but [don’t recommend](https://github.com/facebook/create-react-app/issues/87#issuecomment-234627904)) `.jsx` file extension. ([@tizmagik](https://github.com/tizmagik) in [#563](https://github.com/facebook/create-react-app/pull/563)) +- Proxy request errors are now printed to the console. ([@cloudmu](https://github.com/cloudmu) in [#502](https://github.com/facebook/create-react-app/pull/502)) ### Migrating from 0.4.0 to 0.4.1 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.4.1 ``` @@ -1182,16 +1243,16 @@ npm install --save-dev --save-exact react-scripts@0.4.1 ### Build Dependency (`react-scripts`) -* **Breaking Change:** Disabled implicit serving of source files in development. ([@gaearon](https://github.com/gaearon) in [#551](https://github.com/facebook/create-react-app/pull/551)) -* You can use `NODE_PATH` environment variable for absolute `import` paths. ([@jimmyhmiller](https://github.com/jimmyhmiller) in [#476](https://github.com/facebook/create-react-app/pull/476)) -* If `src/setupTests.js` exists, it will be used to setup the test environment. ([@gaelduplessix](https://github.com/gaelduplessix) in [#548](https://github.com/facebook/create-react-app/pull/548)) -* If `HTTPS` environment variable is set to `true`, development server will run in HTTPS mode. ([@dceddia](https://github.com/dceddia) in [#552](https://github.com/facebook/create-react-app/pull/552)) +- **Breaking Change:** Disabled implicit serving of source files in development. ([@gaearon](https://github.com/gaearon) in [#551](https://github.com/facebook/create-react-app/pull/551)) +- You can use `NODE_PATH` environment variable for absolute `import` paths. ([@jimmyhmiller](https://github.com/jimmyhmiller) in [#476](https://github.com/facebook/create-react-app/pull/476)) +- If `src/setupTests.js` exists, it will be used to setup the test environment. ([@gaelduplessix](https://github.com/gaelduplessix) in [#548](https://github.com/facebook/create-react-app/pull/548)) +- If `HTTPS` environment variable is set to `true`, development server will run in HTTPS mode. ([@dceddia](https://github.com/dceddia) in [#552](https://github.com/facebook/create-react-app/pull/552)) ### Migrating from 0.3.1 to 0.4.0 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.4.0 ``` @@ -1199,9 +1260,9 @@ npm install --save-dev --save-exact react-scripts@0.4.0 Paths like `/src/somefile.png` used to be served in development, but only by accident. They never worked in production builds. Since 0.4.0, we [don’t serve static files by default in development anymore either](https://github.com/facebook/create-react-app/pull/551). This removes a dangerous inconsistency that we never intentionally supported. -If you need a static file to be part for the build, [import it from JavaScript and you will get its filename](https://github.com/facebook/create-react-app/blob/master/template/README.md#adding-images-and-fonts). This ensures it gets included into the production build as well, and its filename contains the content hash. +If you need a static file to be part for the build, [import it from JavaScript and you will get its filename](https://github.com/facebook/create-react-app/blob/main/template/README.md#adding-images-and-fonts). This ensures it gets included into the production build as well, and its filename contains the content hash. -If you used static files with ``, [read this new guide](https://github.com/facebook/create-react-app/blob/master/template/README.md#referring-to-static-assets-from-link-href) on how to make sure these files get included into the builds. For example, you can replace `` with ``, and then Webpack will recognize it and include it into the build. +If you used static files with ``, [read this new guide](https://github.com/facebook/create-react-app/blob/main/template/README.md#referring-to-static-assets-from-link-href) on how to make sure these files get included into the builds. For example, you can replace `` with ``, and then webpack will recognize it and include it into the build. If you referenced some other files from `index.html`, please file an issue to discuss your use case. In the meantime, you can serve them from a separate static server until your use case is supported. @@ -1209,13 +1270,13 @@ If you referenced some other files from `index.html`, please file an issue to di ### Build Dependency (`react-scripts`) -* Bumps Jest dependency to fix a few issues discovered yesterday. ([@cpojer](https://github.com/cpojer) in [facebook/jest#1580](https://github.com/facebook/jest/pull/1580), [@insin](https://github.com/insin) in [facebook/jest#1574](https://github.com/facebook/jest/pull/1574)) +- Bumps Jest dependency to fix a few issues discovered yesterday. ([@cpojer](https://github.com/cpojer) in [facebook/jest#1580](https://github.com/facebook/jest/pull/1580), [@insin](https://github.com/insin) in [facebook/jest#1574](https://github.com/facebook/jest/pull/1574)) ### Migrating from 0.3.0 to 0.3.1 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.3.1 ``` @@ -1223,29 +1284,29 @@ npm install --save-dev --save-exact react-scripts@0.3.1 ### Build Dependency (`react-scripts`) -* Testing is [now supported](https://github.com/facebook/create-react-app/blob/master/template/README.md#running-tests)! ([Jest project contributors](https://github.com/facebook/jest/pulls?q=is%3Apr+is%3Aclosed), [@cpojer](https://github.com/cpojer) in [#250](https://github.com/facebook/create-react-app/pull/250), [@gaearon](https://github.com/gaearon) in [#378](https://github.com/facebook/create-react-app/pull/378), [#530](https://github.com/facebook/create-react-app/pull/530), [#533](https://github.com/facebook/create-react-app/pull/533)) -* Static files such as CSS, images, and fonts, can now exist outside `src` directory. ([@fson](https://github.com/fson) in [#504](https://github.com/facebook/create-react-app/pull/504)) -* **Breaking Change:** Local paths in `` in `index.html` will now be correctly resolved, so deleting `favicon.ico` is not an error anymore. ([@andreypopp](https://github.com/andreypopp) in [#428](https://github.com/facebook/create-react-app/pull/428)) -* Removed an annoying lint rule that warned for `
this.node = node}>`. ([@mrscobbler](https://github.com/mrscobbler) in [#529](https://github.com/facebook/create-react-app/pull/529)) -* Temporarily disabled `react-constant-elements` Babel transform because of its bugs. ([@gaearon](https://github.com/gaearon) in [#534](https://github.com/facebook/create-react-app/pull/534)) -* Fixed a permission issue with Docker. ([@gaearon](https://github.com/gaearon) in [73c940](https://github.com/facebook/create-react-app/commit/73c940a73205d761230f8d6bf81ecfd460ba28a9)) -* Fixed an issue with generator syntax in Jest that occurred in an alpha release. ([@gaearon](https://github.com/gaearon) in [#535](https://github.com/facebook/create-react-app/pull/535)) +- Testing is [now supported](https://github.com/facebook/create-react-app/blob/main/template/README.md#running-tests)! ([Jest project contributors](https://github.com/facebook/jest/pulls?q=is%3Apr+is%3Aclosed), [@cpojer](https://github.com/cpojer) in [#250](https://github.com/facebook/create-react-app/pull/250), [@gaearon](https://github.com/gaearon) in [#378](https://github.com/facebook/create-react-app/pull/378), [#530](https://github.com/facebook/create-react-app/pull/530), [#533](https://github.com/facebook/create-react-app/pull/533)) +- Static files such as CSS, images, and fonts, can now exist outside `src` directory. ([@fson](https://github.com/fson) in [#504](https://github.com/facebook/create-react-app/pull/504)) +- **Breaking Change:** Local paths in `` in `index.html` will now be correctly resolved, so deleting `favicon.ico` is not an error anymore. ([@andreypopp](https://github.com/andreypopp) in [#428](https://github.com/facebook/create-react-app/pull/428)) +- Removed an annoying lint rule that warned for `
this.node = node}>`. ([@mrscobbler](https://github.com/mrscobbler) in [#529](https://github.com/facebook/create-react-app/pull/529)) +- Temporarily disabled `react-constant-elements` Babel transform because of its bugs. ([@gaearon](https://github.com/gaearon) in [#534](https://github.com/facebook/create-react-app/pull/534)) +- Fixed a permission issue with Docker. ([@gaearon](https://github.com/gaearon) in [73c940](https://github.com/facebook/create-react-app/commit/73c940a73205d761230f8d6bf81ecfd460ba28a9)) +- Fixed an issue with generator syntax in Jest that occurred in an alpha release. ([@gaearon](https://github.com/gaearon) in [#535](https://github.com/facebook/create-react-app/pull/535)) ### Global CLI (`create-react-app`) -* You can now create a project in a folder that already contains an `.idea` folder, which is necessary for future WebStorm integration. ([@denofevil](https://github.com/denofevil) in [#522](https://github.com/facebook/create-react-app/pull/522)) +- You can now create a project in a folder that already contains an `.idea` folder, which is necessary for future WebStorm integration. ([@denofevil](https://github.com/denofevil) in [#522](https://github.com/facebook/create-react-app/pull/522)) ### Migrating from 0.2.3 to 0.3.0 You may optionally update the global command (it’s not required): -``` +```sh npm install -g create-react-app@0.3.0 ``` Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.3.0 ``` @@ -1255,7 +1316,7 @@ Now `favicon.ico` is not treated specially anymore.
If you use it, move it to `src` and add the following line to `` in your HTML: ```html - + ``` #### New Feature @@ -1270,19 +1331,19 @@ Since 0.3.0 added a test runner, we recommend that you add it to the `scripts` s } ``` -[Then read the testing guide to learn more about using it!](https://github.com/facebook/create-react-app/blob/master/template/README.md#running-tests) +[Then read the testing guide to learn more about using it!](https://github.com/facebook/create-react-app/blob/main/template/README.md#running-tests) ## 0.2.3 (August 25, 2016) ### Build Dependency (`react-scripts`) -* You can now [proxy requests to an API server](https://github.com/facebook/create-react-app/blob/ef94b0561d5afb9b50b905fa5cd3f94e965c69c0/template/README.md#proxying-api-requests-in-development) without worrying about CORS. ([@gaearon](https://github.com/gaearon) in [#282](https://github.com/facebook/create-react-app/pull/282)) -* You can now [pass custom environment variables](https://github.com/facebook/create-react-app/blob/ef94b0561d5afb9b50b905fa5cd3f94e965c69c0/template/README.md#adding-custom-environment-variables) to your application. ([@eliperelman](https://github.com/eliperelman) in [#342](https://github.com/facebook/create-react-app/pull/342)) -* You can now [use `async` and `await`](https://ponyfoo.com/articles/understanding-javascript-async-await) syntax. ([@gaearon](https://github.com/gaearon) in [#327](https://github.com/facebook/create-react-app/pull/327), [@fson](https://github.com/fson) in [#332](https://github.com/facebook/create-react-app/pull/332)) -* Paths with period in them now load successfully on the development server. ([@mxstbr](https://github.com/mxstbr) in [#422](https://github.com/facebook/create-react-app/pull/422)) -* Images with `.webp` extension are now supported. ([@gafemoyano](https://github.com/gafemoyano) in [#458](https://github.com/facebook/create-react-app/pull/458)) -* The most recent version of React is now added to `package.json`. ([@wdhorton](https://github.com/wdhorton) in [#477](https://github.com/facebook/create-react-app/pull/477)) -* Babel configuration is simplified. ([@kripod](https://github.com/kripod) in [#490](https://github.com/facebook/create-react-app/pull/490)) +- You can now [proxy requests to an API server](https://github.com/facebook/create-react-app/blob/ef94b0561d5afb9b50b905fa5cd3f94e965c69c0/template/README.md#proxying-api-requests-in-development) without worrying about CORS. ([@gaearon](https://github.com/gaearon) in [#282](https://github.com/facebook/create-react-app/pull/282)) +- You can now [pass custom environment variables](https://github.com/facebook/create-react-app/blob/ef94b0561d5afb9b50b905fa5cd3f94e965c69c0/template/README.md#adding-custom-environment-variables) to your application. ([@eliperelman](https://github.com/eliperelman) in [#342](https://github.com/facebook/create-react-app/pull/342)) +- You can now [use `async` and `await`](https://ponyfoo.com/articles/understanding-javascript-async-await) syntax. ([@gaearon](https://github.com/gaearon) in [#327](https://github.com/facebook/create-react-app/pull/327), [@fson](https://github.com/fson) in [#332](https://github.com/facebook/create-react-app/pull/332)) +- Paths with period in them now load successfully on the development server. ([@mxstbr](https://github.com/mxstbr) in [#422](https://github.com/facebook/create-react-app/pull/422)) +- Images with `.webp` extension are now supported. ([@gafemoyano](https://github.com/gafemoyano) in [#458](https://github.com/facebook/create-react-app/pull/458)) +- The most recent version of React is now added to `package.json`. ([@wdhorton](https://github.com/wdhorton) in [#477](https://github.com/facebook/create-react-app/pull/477)) +- Babel configuration is simplified. ([@kripod](https://github.com/kripod) in [#490](https://github.com/facebook/create-react-app/pull/490)) ### Migrating from 0.2.2 to 0.2.3 @@ -1294,15 +1355,15 @@ Newly created projects will use `0.2.3` automatically. You **don’t** need to u ### Build Dependency (`react-scripts`) -* When the bundle size changes, we now display the difference after build. ([@elijahmanor](https://github.com/elijahmanor) in [#340](https://github.com/facebook/create-react-app/pull/340)) -* `npm install`ing a missing dependency now forces a rebuild. ([@gaearon](https://github.com/gaearon) in [#349](https://github.com/facebook/create-react-app/pull/349)) -* Autoprefixer config now includes more commonly supported browsers. ([@kripod](https://github.com/kripod) in [#345](https://github.com/facebook/create-react-app/pull/345)) -* All the configuration is now documented inline so ejecting doesn’t leave you in the dark. ([@gaearon](https://github.com/gaearon) in [#362](https://github.com/facebook/create-react-app/pull/362)) -* `Object.assign()` polyfill is now bundled by default. ([@gaearon](https://github.com/gaearon) in [#399](https://github.com/facebook/create-react-app/pull/399)) -* [React Native Web](https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/) now works out of the box. ([@grigio](https://github.com/grigio) in [#407](https://github.com/facebook/create-react-app/pull/407)) -* Same asset filenames in different folders don’t confuse the server now. ([@arunoda](https://github.com/arunoda) in [#446](https://github.com/facebook/create-react-app/pull/446)) -* The `otf` font format is now supported. ([@A-gambit](https://github.com/A-gambit) in [#434](https://github.com/facebook/create-react-app/pull/434)) -* The `new-cap` linting rule has been disabled thanks to feedback from Immutable.js users. ([@rricard](https://github.com/rricard) in [#470](https://github.com/facebook/create-react-app/pull/470)) +- When the bundle size changes, we now display the difference after build. ([@elijahmanor](https://github.com/elijahmanor) in [#340](https://github.com/facebook/create-react-app/pull/340)) +- `npm install`ing a missing dependency now forces a rebuild. ([@gaearon](https://github.com/gaearon) in [#349](https://github.com/facebook/create-react-app/pull/349)) +- Autoprefixer config now includes more commonly supported browsers. ([@kripod](https://github.com/kripod) in [#345](https://github.com/facebook/create-react-app/pull/345)) +- All the configuration is now documented inline so ejecting doesn’t leave you in the dark. ([@gaearon](https://github.com/gaearon) in [#362](https://github.com/facebook/create-react-app/pull/362)) +- `Object.assign()` polyfill is now bundled by default. ([@gaearon](https://github.com/gaearon) in [#399](https://github.com/facebook/create-react-app/pull/399)) +- [React Native Web](https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/) now works out of the box. ([@grigio](https://github.com/grigio) in [#407](https://github.com/facebook/create-react-app/pull/407)) +- Same asset filenames in different folders don’t confuse the server now. ([@arunoda](https://github.com/arunoda) in [#446](https://github.com/facebook/create-react-app/pull/446)) +- The `otf` font format is now supported. ([@A-gambit](https://github.com/A-gambit) in [#434](https://github.com/facebook/create-react-app/pull/434)) +- The `new-cap` linting rule has been disabled thanks to feedback from Immutable.js users. ([@rricard](https://github.com/rricard) in [#470](https://github.com/facebook/create-react-app/pull/470)) ### Migrating from 0.2.1 to 0.2.2 @@ -1314,12 +1375,12 @@ Newly created projects will use `0.2.2` automatically. You **don’t** need to u ### Build Dependency (`react-scripts`) -* Fixes an issue with `npm start` taking a very long time on OS X with Firewall enabled ([@gaearon](https://github.com/gaearon) in [#319](https://github.com/facebook/create-react-app/pull/319)) -* Fixes an issue with Webpack eating a lot of CPU in some cases ([@dceddia](https://github.com/dceddia) in [#294](https://github.com/facebook/create-react-app/pull/294)) -* We now warn if you import a file with mismatched casing because this breaks the watcher ([@alexzherdev](https://github.com/alexzherdev) in [#266](https://github.com/facebook/create-react-app/pull/266)) -* CSS files specifying `?v=` after asset filenames, such as Font Awesome, now works correctly ([@alexzherdev](https://github.com/alexzherdev) in [#298](https://github.com/facebook/create-react-app/pull/298)) -* Issues with `npm link`ing `react-scripts` have been fixed ([@dallonf](https://github.com/dallonf) in [#277](https://github.com/facebook/create-react-app/pull/277)) -* We now use `/static` prefix for assets both in development and production ([@gaearon](https://github.com/gaearon) in [#278](https://github.com/facebook/create-react-app/pull/278)) +- Fixes an issue with `npm start` taking a very long time on OS X with Firewall enabled ([@gaearon](https://github.com/gaearon) in [#319](https://github.com/facebook/create-react-app/pull/319)) +- Fixes an issue with webpack eating a lot of CPU in some cases ([@dceddia](https://github.com/dceddia) in [#294](https://github.com/facebook/create-react-app/pull/294)) +- We now warn if you import a file with mismatched casing because this breaks the watcher ([@alexzherdev](https://github.com/alexzherdev) in [#266](https://github.com/facebook/create-react-app/pull/266)) +- CSS files specifying `?v=` after asset filenames, such as Font Awesome, now works correctly ([@alexzherdev](https://github.com/alexzherdev) in [#298](https://github.com/facebook/create-react-app/pull/298)) +- Issues with `npm link`ing `react-scripts` have been fixed ([@dallonf](https://github.com/dallonf) in [#277](https://github.com/facebook/create-react-app/pull/277)) +- We now use `/static` prefix for assets both in development and production ([@gaearon](https://github.com/gaearon) in [#278](https://github.com/facebook/create-react-app/pull/278)) ### Migrating from 0.2.0 to 0.2.1 @@ -1331,44 +1392,44 @@ Newly created projects will use `0.2.1` automatically. You **don’t** need to u ### Build Dependency (`react-scripts`) -* You can now enable deployment to GitHub Pages by adding `homepage` field to `package.json` ([@dhruska](https://github.com/dhruska) in [#94](https://github.com/facebook/create-react-app/pull/94)) -* Development server now runs on `0.0.0.0` and works with VirtualBox ([@JWo1F](https://github.com/JWo1F) in [#128](https://github.com/facebook/create-react-app/pull/128)) -* Cloud9 and Nitrous online IDEs are now supported ([@gaearon](http://github.com/gaearon) in [2fe84e](https://github.com/facebook/create-react-app/commit/2fe84ecded55f1d5258d91f9c2c07698ae0d2fb4)) -* When `3000` port is taken, we offer to use another port ([@chocnut](https://github.com/chocnut) in [#101](https://github.com/facebook/create-react-app/pull/101), [2edf21](https://github.com/facebook/create-react-app/commit/2edf2180f2aa6bf647807d0b1fcd95f4cfe4a558)) -* You can now `import` CSS files from npm modules ([@glennreyes](https://github.com/glennreyes) in [#105](https://github.com/facebook/create-react-app/pull/105), [@breaddevil](https://github.com/breaddevil) in [#178](https://github.com/facebook/create-react-app/pull/178)) -* `fetch` and `Promise` polyfills are now always included ([@gaearon](https://github.com/gaearon) in [#235](https://github.com/facebook/create-react-app/pull/235)) -* Regenerator runtime is now included if you use ES6 generators ([@gaearon](https://github.com/gaearon) in [#238](https://github.com/facebook/create-react-app/pull/238)) -* Generated project now contains `.gitignore` ([@npverni](https://github.com/npverni) in [#79](https://github.com/facebook/create-react-app/pull/79), [@chibicode](https://github.com/chibicode) in [#112](https://github.com/facebook/create-react-app/pull/112)) -* ESLint config is now more compatible with Flow ([@gaearon](https://github.com/gaearon) in [#261](https://github.com/facebook/create-react-app/pull/261)) -* A stylistic lint rule about method naming has been removed ([@mxstbr](https://github.com/mxstbr) in [#152](https://github.com/facebook/create-react-app/pull/157)) -* A few unobtrusive accessibility lint rules have been added ([@evcohen](https://github.com/evcohen) in [#175](https://github.com/facebook/create-react-app/pull/175)) -* A `.babelrc` in parent directory no longer causes an error ([@alexzherdev](https://github.com/alexzherdev) in [#236](https://github.com/facebook/create-react-app/pull/236)) -* Files with `.json` extension are now discovered ([@gaearon](https://github.com/gaearon) in [a11d6a](https://github.com/facebook/create-react-app/commit/a11d6a398f487f9163880dd34667b1d3e14b147a)) -* Bug fixes from transitive dependencies are included ([#126](https://github.com/facebook/create-react-app/issues/126)) -* Linting now works with IDEs if you follow [these](https://github.com/facebook/create-react-app/blob/master/template/README.md#display-lint-output-in-the-editor) instructions ([@keyanzhang](https://github.com/keyanzhang) in [#149](https://github.com/facebook/create-react-app/pull/149)) -* After building, we now print gzipped bundle size ([@lvwrence](https://github.com/lvwrence) in [#229](https://github.com/facebook/create-react-app/pull/229)) +- You can now enable deployment to GitHub Pages by adding `homepage` field to `package.json` ([@dhruska](https://github.com/dhruska) in [#94](https://github.com/facebook/create-react-app/pull/94)) +- Development server now runs on `0.0.0.0` and works with VirtualBox ([@JWo1F](https://github.com/JWo1F) in [#128](https://github.com/facebook/create-react-app/pull/128)) +- Cloud9 and Nitrous online IDEs are now supported ([@gaearon](https://github.com/gaearon) in [2fe84e](https://github.com/facebook/create-react-app/commit/2fe84ecded55f1d5258d91f9c2c07698ae0d2fb4)) +- When `3000` port is taken, we offer to use another port ([@chocnut](https://github.com/chocnut) in [#101](https://github.com/facebook/create-react-app/pull/101), [2edf21](https://github.com/facebook/create-react-app/commit/2edf2180f2aa6bf647807d0b1fcd95f4cfe4a558)) +- You can now `import` CSS files from npm modules ([@glennreyes](https://github.com/glennreyes) in [#105](https://github.com/facebook/create-react-app/pull/105), [@breaddevil](https://github.com/breaddevil) in [#178](https://github.com/facebook/create-react-app/pull/178)) +- `fetch` and `Promise` polyfills are now always included ([@gaearon](https://github.com/gaearon) in [#235](https://github.com/facebook/create-react-app/pull/235)) +- Regenerator runtime is now included if you use ES6 generators ([@gaearon](https://github.com/gaearon) in [#238](https://github.com/facebook/create-react-app/pull/238)) +- Generated project now contains `.gitignore` ([@npverni](https://github.com/npverni) in [#79](https://github.com/facebook/create-react-app/pull/79), [@chibicode](https://github.com/chibicode) in [#112](https://github.com/facebook/create-react-app/pull/112)) +- ESLint config is now more compatible with Flow ([@gaearon](https://github.com/gaearon) in [#261](https://github.com/facebook/create-react-app/pull/261)) +- A stylistic lint rule about method naming has been removed ([@mxstbr](https://github.com/mxstbr) in [#152](https://github.com/facebook/create-react-app/pull/157)) +- A few unobtrusive accessibility lint rules have been added ([@evcohen](https://github.com/evcohen) in [#175](https://github.com/facebook/create-react-app/pull/175)) +- A `.babelrc` in parent directory no longer causes an error ([@alexzherdev](https://github.com/alexzherdev) in [#236](https://github.com/facebook/create-react-app/pull/236)) +- Files with `.json` extension are now discovered ([@gaearon](https://github.com/gaearon) in [a11d6a](https://github.com/facebook/create-react-app/commit/a11d6a398f487f9163880dd34667b1d3e14b147a)) +- Bug fixes from transitive dependencies are included ([#126](https://github.com/facebook/create-react-app/issues/126)) +- Linting now works with IDEs if you follow [these](https://github.com/facebook/create-react-app/blob/main/template/README.md#display-lint-output-in-the-editor) instructions ([@keyanzhang](https://github.com/keyanzhang) in [#149](https://github.com/facebook/create-react-app/pull/149)) +- After building, we now print gzipped bundle size ([@lvwrence](https://github.com/lvwrence) in [#229](https://github.com/facebook/create-react-app/pull/229)) ### Global CLI (`create-react-app`) -* It enforces that you have Node >= 4 ([@conorhastings](https://github.com/conorhastings) in [#88](https://github.com/facebook/create-react-app/pull/88)) -* It handles `--version` flag correctly ([@mxstbr](https://github.com/mxstbr) in [#152](https://github.com/facebook/create-react-app/pull/152)) +- It enforces that you have Node >= 4 ([@conorhastings](https://github.com/conorhastings) in [#88](https://github.com/facebook/create-react-app/pull/88)) +- It handles `--version` flag correctly ([@mxstbr](https://github.com/mxstbr) in [#152](https://github.com/facebook/create-react-app/pull/152)) ### Migrating from 0.1.0 to 0.2.0 You may optionally update the global command (it’s not required): -``` +```sh npm install -g create-react-app@0.2.0 ``` Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.2.0 ``` -You may need to fix a few lint warnings about missing `` tag, but everything else should work out of the box. If you intend to deploy your site to GitHub Pages, you may now [add `homepage` field to `package.json`](https://github.com/facebook/create-react-app/blob/master/template/README.md#deploy-to-github-pages). If you had [issues with integrating editor linter plugins](https://github.com/facebook/create-react-app/issues/124), follow [these new instructions](https://github.com/facebook/create-react-app/blob/master/template/README.md#display-lint-output-in-the-editor). +You may need to fix a few lint warnings about missing `` tag, but everything else should work out of the box. If you intend to deploy your site to GitHub Pages, you may now [add `homepage` field to `package.json`](https://github.com/facebook/create-react-app/blob/main/template/README.md#deploy-to-github-pages). If you had [issues with integrating editor linter plugins](https://github.com/facebook/create-react-app/issues/124), follow [these new instructions](https://github.com/facebook/create-react-app/blob/main/template/README.md#display-lint-output-in-the-editor). ## 0.1.0 (July 22, 2016) -* Initial public release +- Initial public release diff --git a/CHANGELOG-1.x.md b/CHANGELOG-1.x.md index 144699233cb..f797a8e54a3 100644 --- a/CHANGELOG-1.x.md +++ b/CHANGELOG-1.x.md @@ -1,6 +1,6 @@ ## 2.0.3 and Newer Versions -**Please refer to [CHANGELOG.md](./CHANGELOG.md) for the newer versions.** +**Please refer to [CHANGELOG-2.x.md](./CHANGELOG-2.x.md) for the 2.x range, and [CHANGELOG.md](CHANGELOG.md) for the newer versions.** ## 1.1.5 (August 24, 2018) @@ -21,13 +21,13 @@ Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.1.5 ``` or -``` +```sh yarn add --exact react-scripts@1.1.5 ``` @@ -47,13 +47,13 @@ yarn add --exact react-scripts@1.1.5 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.1.4 ``` or -``` +```sh yarn add --exact react-scripts@1.1.4 ``` @@ -73,13 +73,13 @@ yarn add --exact react-scripts@1.1.4 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.1.3 ``` or -``` +```sh yarn add --exact react-scripts@1.1.3 ``` @@ -106,13 +106,13 @@ yarn add --exact react-scripts@1.1.3 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.1.2 ``` or -``` +```sh yarn add --exact react-scripts@1.1.2 ``` @@ -151,13 +151,13 @@ yarn add --exact react-scripts@1.1.2 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.1.1 ``` or -``` +```sh yarn add --exact react-scripts@1.1.1 ``` @@ -280,7 +280,7 @@ yarn add --exact react-scripts@1.1.1 - [#3757](https://github.com/facebook/create-react-app/pull/3757) Try updating Flow. ([@gaearon](https://github.com/gaearon)) - [#3414](https://github.com/facebook/create-react-app/pull/3414) Export `dismissRuntimeErrors` function. ([@skidding](https://github.com/skidding)) - [#3036](https://github.com/facebook/create-react-app/pull/3036) Cleaning up `printHostingInstructions` a bit. ([@GreenGremlin](https://github.com/GreenGremlin)) - - [#3514](https://github.com/facebook/create-react-app/pull/3514) Fix `FileSizeReporter` for multi build Webpack setups. ([@iiska](https://github.com/iiska)) + - [#3514](https://github.com/facebook/create-react-app/pull/3514) Fix `FileSizeReporter` for multi build webpack setups. ([@iiska](https://github.com/iiska)) - [#3362](https://github.com/facebook/create-react-app/pull/3362) Refactor extra watch options regex to `react-dev-utils`. ([@xjlim](https://github.com/xjlim)) #### Committers: 47 @@ -337,13 +337,13 @@ yarn add --exact react-scripts@1.1.1 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.1.0 ``` or -``` +```sh yarn add --exact react-scripts@1.1.0 ``` @@ -372,13 +372,13 @@ yarn add --exact react-scripts@1.1.0 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.0.17 ``` or -``` +```sh yarn add --exact react-scripts@1.0.17 ``` @@ -403,13 +403,13 @@ yarn add --exact react-scripts@1.0.17 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.0.16 ``` or -``` +```sh yarn add --exact react-scripts@1.0.16 ``` @@ -482,7 +482,7 @@ yarn add --exact react-scripts@1.0.16 - [#3150](https://github.com/facebook/create-react-app/pull/3150) Remove an useless negation in `registerServiceWorker.js`. ([@dunglas](https://github.com/dunglas)) - [#3158](https://github.com/facebook/create-react-app/pull/3158) Remove `output.path` from dev webpack config. ([@nikolas](https://github.com/nikolas)) - - [#3281](https://github.com/facebook/create-react-app/pull/3281) Add a workaround for Uglify incompatiblity with Safari 10.0 in the future. ([@satyavh](https://github.com/satyavh)) + - [#3281](https://github.com/facebook/create-react-app/pull/3281) Add a workaround for Uglify incompatibility with Safari 10.0 in the future. ([@satyavh](https://github.com/satyavh)) - [#3146](https://github.com/facebook/create-react-app/pull/3146) Fix `reason-react` support. ([@lpalmes](https://github.com/lpalmes)) - [#3236](https://github.com/facebook/create-react-app/pull/3236) Update `style-loader` and disable inclusion of its HMR code in builds. ([@insin](https://github.com/insin)) - [#3246](https://github.com/facebook/create-react-app/pull/3246) Update `url-loader` to 0.6.2 for mime ReDoS vulnerability. ([@d3viant0ne](https://github.com/d3viant0ne)) @@ -519,13 +519,13 @@ yarn add --exact react-scripts@1.0.16 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.0.15 ``` or -``` +```sh yarn add --exact react-scripts@1.0.15 ``` @@ -604,13 +604,13 @@ yarn add --exact react-scripts@1.0.15 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.0.14 ``` or -``` +```sh yarn add --exact react-scripts@1.0.14 ``` @@ -653,13 +653,13 @@ yarn add --exact react-scripts@1.0.14 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.0.13 ``` or -``` +```sh yarn add --exact react-scripts@1.0.13 ``` @@ -718,13 +718,13 @@ yarn add --exact react-scripts@1.0.13 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.0.12 ``` or -``` +```sh yarn add --exact react-scripts@1.0.12 ``` @@ -841,13 +841,13 @@ yarn add --exact react-scripts@1.0.12 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.0.11 ``` or -``` +```sh yarn add --exact react-scripts@1.0.11 ``` @@ -880,13 +880,13 @@ yarn add --exact react-scripts@1.0.11 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.0.10 ``` or -``` +```sh yarn add --exact react-scripts@1.0.10 ``` @@ -925,13 +925,13 @@ yarn add --exact react-scripts@1.0.10 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.0.9 ``` or -``` +```sh yarn add --exact react-scripts@1.0.9 ``` @@ -1094,17 +1094,17 @@ yarn add --exact react-scripts@1.0.9 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@1.0.8 ``` or -``` +```sh yarn add --dev --exact react-scripts@1.0.8 ``` -**If you previously used `HTTPS=true` environment variable in development**, make sure you aren't affected by a now-fixed vulnerability in Webpack by [visiting this page](http://badcert.mike.works/). You can read more about the vulnerability [here](https://medium.com/@mikenorth/webpack-preact-cli-vulnerability-961572624c54). +**If you previously used `HTTPS=true` environment variable in development**, make sure you aren't affected by a now-fixed vulnerability in webpack by [visiting this page](http://badcert.mike.works/). You can read more about the vulnerability [here](https://medium.com/@mikenorth/webpack-preact-cli-vulnerability-961572624c54). You may optionally then move `react-scripts` from `devDependencies` to `dependencies` since that’s how we’ll structure newly created projects. It is not necessary though. @@ -1153,13 +1153,13 @@ If you haven't changed the default CSS organization, you may want to apply [this Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@1.0.7 ``` or -``` +```sh yarn add --dev --exact react-scripts@1.0.7 ``` @@ -1198,13 +1198,13 @@ yarn add --dev --exact react-scripts@1.0.7 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@1.0.6 ``` or -``` +```sh yarn add --dev --exact react-scripts@1.0.6 ``` @@ -1241,13 +1241,13 @@ yarn add --dev --exact react-scripts@1.0.6 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@1.0.5 ``` or -``` +```sh yarn add --dev --exact react-scripts@1.0.5 ``` @@ -1262,13 +1262,13 @@ yarn add --dev --exact react-scripts@1.0.5 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@1.0.4 ``` or -``` +```sh yarn add --dev --exact react-scripts@1.0.4 ``` @@ -1302,13 +1302,13 @@ yarn add --dev --exact react-scripts@1.0.4 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@1.0.3 ``` or -``` +```sh yarn add --dev --exact react-scripts@1.0.3 ``` @@ -1355,17 +1355,17 @@ yarn add --dev --exact react-scripts@1.0.3 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@1.0.2 ``` or -``` +```sh yarn add --dev --exact react-scripts@1.0.2 ``` -If you previously had issues with an `Invalid Host Header` error, [follow these new instructions](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#invalid-host-header-errors-after-configuring-proxy) to fix it. +If you previously had issues with an `Invalid Host Header` error, [follow these new instructions](https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/template/README.md#invalid-host-header-errors-after-configuring-proxy) to fix it. ## 1.0.1 (May 19, 2017) @@ -1431,19 +1431,19 @@ If you previously had issues with an `Invalid Host Header` error, [follow these Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@1.0.1 ``` or -``` +```sh yarn add --dev --exact react-scripts@1.0.1 ``` ## 1.0.0 (May 18, 2017) -We’ve been working on this release for the past few months, and there are many big impovements, from migrating to webpack 2 to a brand new runtime error overlay and built-in support for Progressive Web Apps. +We’ve been working on this release for the past few months, and there are many big improvements, from migrating to webpack 2 to a brand new runtime error overlay and built-in support for Progressive Web Apps. So instead of just enumerating them here, we decided to write a blog post about all the new features.
Check it out: **[What’s New in Create React App](https://facebook.github.io/react/blog/2017/05/18/whats-new-in-create-react-app.html)**. @@ -1456,13 +1456,13 @@ First, ensure you are using the latest [Node 6 LTS or newer](https://nodejs.org/ Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@1.0.0 ``` You may also optionally update the global command-line utility for bug fixes: -``` +```sh npm install -g create-react-app ``` @@ -1473,7 +1473,7 @@ We also never explicitly forbid doing so, which caused confusion when things did When running or building your application, you may see a message like so: -``` +```sh You attempted to import ... which falls outside of the project src/ directory. ``` @@ -1547,7 +1547,7 @@ You can automatically convert your project to fix them by running the [correspon #### How do I make my tests work with Jest 20? -Please refer to the [Jest 19](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html#breaking-changes) and [Jest 20](http://facebook.github.io/jest/blog/2017/05/06/jest-20-delightful-testing-multi-project-runner.html#breaking-changes) breaking changes for migration instructions. +Please refer to the [Jest 19](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html#breaking-changes) and [Jest 20](https://facebook.github.io/jest/blog/2017/05/06/jest-20-delightful-testing-multi-project-runner.html#breaking-changes) breaking changes for migration instructions. If you use snapshots, you will likely need to update them once because of the change in format. @@ -1572,25 +1572,23 @@ If you still have the problem please file an issue. Unhandled Promise rejections will now crash tests. You can fix them by explicitly catching the errors you don’t care about. -#### How to turn my app into a [Progressive Web App](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app)? +#### How to turn my app into a [Progressive Web App](https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/template/README.md#making-a-progressive-web-app)? After the regular update procedure above, add these line to `` in `public/index.html`: ```html - - - + ``` Add `
+ ``` **This is an optional feature.** Regular `` stylesheets and CSS files are fully supported. CSS Modules are turned on for files ending with the `.module.css` extension. diff --git a/docusaurus/docs/adding-a-router.md b/docusaurus/docs/adding-a-router.md index 70dfcb63b6e..eae27dc501f 100644 --- a/docusaurus/docs/adding-a-router.md +++ b/docusaurus/docs/adding-a-router.md @@ -3,12 +3,12 @@ id: adding-a-router title: Adding a Router --- -Create React App doesn't prescribe a specific routing solution, but [React Router](https://reacttraining.com/react-router/web/) is the most popular one. +Create React App doesn't prescribe a specific routing solution, but [React Router](https://reactrouter.com/) is the most popular one. To add it, run: ```sh -npm install --save react-router-dom +npm install react-router-dom ``` Alternatively you may use `yarn`: @@ -17,6 +17,6 @@ Alternatively you may use `yarn`: yarn add react-router-dom ``` -To try it, delete all the code in `src/App.js` and replace it with any of the examples on its website. The [Basic Example](https://reacttraining.com/react-router/web/example/basic) is a good place to get started. +To try it, delete all the code in `src/App.js` and replace it with any of the examples on its website. The [Basic Example](https://reactrouter.com/docs/examples/basic) is a good place to get started. For more info on adding routes, check out [the React Router docs on adding routes](https://reactrouter.com/docs/getting-started/tutorial#add-some-routes). -Note that [you may need to configure your production server to support client-side routing](/docs/deployments#serving-apps-with-client-side-routing) before deploying your app. +Note that [you may need to configure your production server to support client-side routing](deployment.md#serving-apps-with-client-side-routing) before deploying your app. diff --git a/docusaurus/docs/adding-a-sass-stylesheet.md b/docusaurus/docs/adding-a-sass-stylesheet.md index ad3815b1ab3..5a287294155 100644 --- a/docusaurus/docs/adding-a-sass-stylesheet.md +++ b/docusaurus/docs/adding-a-sass-stylesheet.md @@ -10,34 +10,59 @@ Generally, we recommend that you don’t reuse the same CSS classes across diffe Following this rule often makes CSS preprocessors less useful, as features like mixins and nesting are replaced by component composition. You can, however, integrate a CSS preprocessor if you find it valuable. -To use Sass, first install `node-sass`: +To use Sass, first install `sass`: -```bash -$ npm install node-sass --save -$ # or -$ yarn add node-sass +```sh +$ npm install sass +# or +$ yarn add sass ``` Now you can rename `src/App.css` to `src/App.scss` and update `src/App.js` to import `src/App.scss`. This file and any other file will be automatically compiled if imported with the extension `.scss` or `.sass`. -To share variables between Sass files, you can use Sass imports. For example, `src/App.scss` and other component style files could include `@import "./shared.scss";` with variable definitions. +To share variables between Sass files, you can use Sass's [`@use` rule](https://sass-lang.com/documentation/at-rules/use). For example, `src/App.scss` and other component style files could include `@use "./shared.scss";` with variable definitions. This will allow you to do imports like ```scss -@import 'styles/_colors.scss'; // assuming a styles directory under src/ -@import '~nprogress/nprogress'; // importing a css file from the nprogress node module +@use 'styles/_colors.scss'; // assuming a styles directory under src/ +@use '~nprogress/nprogress'; // loading a css file from the nprogress node module ``` -> **Tip:** You can opt into using this feature with [CSS modules](/docs/adding-a-css-modules-stylesheet) too! +> **Note:** You can prefix paths with `~`, as displayed above, to resolve modules from `node_modules`. -> **Note:** You must prefix imports from `node_modules` with `~` as displayed above. +`sass` also supports the `SASS_PATH` variable. -> **Note:** If you're using Flow, add the following to your `.flowconfig` so it'll recognize the `.sass` or `.scss` imports. +To use imports relative to a path you specify, you can add a [`.env` file](https://github.com/facebook/create-react-app/blob/main/docusaurus/docs/adding-custom-environment-variables.md#adding-development-environment-variables-in-env) at the project root with the path specified in the `SASS_PATH` environment variable. To specify more directories you can add them to `SASS_PATH` separated by a `:` like `path1:path2:path3`. + +> **Note:** For the Windows operating system, separate your paths by semicolons. +> +> ``` +> SASS_PATH=path1;path2;path3 +> ``` + +> **Tip:** You can opt into using this feature with [CSS modules](adding-a-css-modules-stylesheet.md) too! + +> **Note:** If you're using Flow, override the [module.file_ext](https://flow.org/en/docs/config/options/#toc-module-file-ext-string) setting in your `.flowconfig` so it'll recognize `.sass` or `.scss` files. You will also need to include the `module.file_ext` default settings for `.js`, `.jsx`, `.mjs` and `.json` files. > > ``` > [options] +> module.file_ext=.js +> module.file_ext=.jsx +> module.file_ext=.mjs +> module.file_ext=.json > module.file_ext=.sass > module.file_ext=.scss > ``` + +> **Note:** LibSass and the packages built on top of it, including Node Sass, are [deprecated](https://sass-lang.com/blog/libsass-is-deprecated). +> If you're a user of Node Sass, you can migrate to Dart Sass by replacing `node-sass` in your `package.json` file with `sass` or by running the following commands: +> +> ```sh +> $ npm uninstall node-sass +> $ npm install sass +> # or +> $ yarn remove node-sass +> $ yarn add sass +> ``` diff --git a/docusaurus/docs/adding-a-stylesheet.md b/docusaurus/docs/adding-a-stylesheet.md index 2dc27b1ed9d..f1dea111bcb 100644 --- a/docusaurus/docs/adding-a-stylesheet.md +++ b/docusaurus/docs/adding-a-stylesheet.md @@ -4,7 +4,7 @@ title: Adding a Stylesheet sidebar_label: Adding Stylesheets --- -This project setup uses [Webpack](https://webpack.js.org/) for handling all assets. Webpack offers a custom way of “extending” the concept of `import` beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to **import the CSS from the JavaScript file**: +This project setup uses [webpack](https://webpack.js.org/) for handling all assets. webpack offers a custom way of “extending” the concept of `import` beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to **import the CSS from the JavaScript file**: ## `Button.css` @@ -18,7 +18,7 @@ This project setup uses [Webpack](https://webpack.js.org/) for handling all asse ```js import React, { Component } from 'react'; -import './Button.css'; // Tell Webpack that Button.js uses these styles +import './Button.css'; // Tell webpack that Button.js uses these styles class Button extends Component { render() { @@ -28,8 +28,8 @@ class Button extends Component { } ``` -**This is not required for React** but many people find this feature convenient. You can read about the benefits of this approach [here](https://medium.com/seek-blog/block-element-modifying-your-javascript-components-d7f99fcab52b). However you should be aware that this makes your code less portable to other build tools and environments than Webpack. +**This is not required for React** but many people find this feature convenient. You can read about the benefits of this approach [here](https://medium.com/seek-blog/block-element-modifying-your-javascript-components-d7f99fcab52b). However you should be aware that this makes your code less portable to other build tools and environments than webpack. In development, expressing dependencies this way allows your styles to be reloaded on the fly as you edit them. In production, all CSS files will be concatenated into a single minified `.css` file in the build output. -If you are concerned about using Webpack-specific semantics, you can put all your CSS right into `src/index.css`. It would still be imported from `src/index.js`, but you could always remove that import if you later migrate to a different build tool. +If you are concerned about using webpack-specific semantics, you can put all your CSS right into `src/index.css`. It would still be imported from `src/index.js`, but you could always remove that import if you later migrate to a different build tool. diff --git a/docusaurus/docs/adding-bootstrap.md b/docusaurus/docs/adding-bootstrap.md index dc97b6cab94..7ca91c07fd2 100644 --- a/docusaurus/docs/adding-bootstrap.md +++ b/docusaurus/docs/adding-bootstrap.md @@ -3,18 +3,18 @@ id: adding-bootstrap title: Adding Bootstrap --- -You don’t have to use [reactstrap](https://reactstrap.github.io/) together with React but it is a popular library for integrating Bootstrap with React apps. If you need it, you can integrate it with Create React App by following these steps: +While you don’t have to use any specific library to integrate Bootstrap with React apps, it's often easier than trying to wrap the Bootstrap jQuery plugins. [React Bootstrap](https://react-bootstrap.netlify.com/) is the most popular option that strives for complete parity with Bootstrap. [reactstrap](https://reactstrap.github.io/) is also a good choice for projects looking for smaller builds at the expense of some features. -Install reactstrap and Bootstrap from npm. reactstrap does not include Bootstrap CSS so this needs to be installed as well: +Each project's respective documentation site has detailed instructions for installing and using them. Both depend on the Bootstrap css file so install that as well: ```sh -npm install --save reactstrap bootstrap@4 +npm install bootstrap ``` Alternatively you may use `yarn`: ```sh -yarn add bootstrap@4 reactstrap +yarn add bootstrap ``` Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of your `src/index.js` file: @@ -25,22 +25,27 @@ import 'bootstrap/dist/css/bootstrap.css'; // components takes precedence over default styles. ``` -Import required reactstrap components within `src/App.js` file or your custom component files: - -```js -import { Button } from 'reactstrap'; -``` - -Now you are ready to use the imported reactstrap components within your component hierarchy defined in the render method. Here is an example [`App.js`](https://gist.githubusercontent.com/zx6658/d9f128cd57ca69e583ea2b5fea074238/raw/a56701c142d0c622eb6c20a457fbc01d708cb485/App.js) redone using reactstrap. - ## Using a Custom Theme > Note: this feature is available with `react-scripts@2.0.0` and higher. -Sometimes you might need to tweak the visual styles of Bootstrap (or equivalent package).
+Sometimes you might need to tweak the visual styles of Bootstrap (or equivalent package). + As of `react-scripts@2.0.0` you can import `.scss` files. This makes it possible to use a package's built-in Sass variables for global style preferences. -To customize Bootstrap, create a file called `src/custom.scss` (or similar) and import the Bootstrap source stylesheet. Add any overrides _before_ the imported file(s). You can reference [Bootstrap's documentation](http://getbootstrap.com/docs/4.1/getting-started/theming/#css-variables) for the names of the available variables. +To enable `scss` in Create React App you will need to install `sass`. + +```sh +npm install sass +``` + +Alternatively you may use `yarn`: + +```sh +yarn add sass +``` + +To customize Bootstrap, create a file called `src/custom.scss` (or similar) and import the Bootstrap source stylesheet. Add any overrides _before_ the imported file(s). You can reference [Bootstrap's documentation](https://getbootstrap.com/docs/4.6/getting-started/theming/#variable-defaults) for the names of the available variables. ```scss // Override default variables before the import @@ -50,7 +55,7 @@ $body-bg: #000; @import '~bootstrap/scss/bootstrap.scss'; ``` -> **Note:** You must prefix imports from `node_modules` with `~` as displayed above. +> **Note:** You can prefix paths with `~`, as displayed above, to resolve modules from `node_modules`. Finally, import the newly created `.scss` file instead of the default Bootstrap `.css` in the beginning of your `src/index.js` file, for example: diff --git a/docusaurus/docs/adding-css-reset.md b/docusaurus/docs/adding-css-reset.md new file mode 100644 index 00000000000..d57a1e3803c --- /dev/null +++ b/docusaurus/docs/adding-css-reset.md @@ -0,0 +1,73 @@ +--- +id: adding-css-reset +title: Adding a CSS Reset +sidebar_label: Adding CSS Reset +--- + +This project setup uses [PostCSS Normalize] for adding a [CSS Reset]. + +To start using it, add `@import-normalize;` anywhere in your CSS file(s). You only need to include it once and duplicate imports are automatically removed. Since you only need to include it once, a good place to add it is `index.css` or `App.css`. + +## `index.css` + +```css +@import-normalize; /* bring in normalize.css styles */ + +/* rest of app styles */ +``` + +> **Tip**: If you see an "_Unknown at rule @import-normalize css(unknownAtRules)_" warning in VSCode, change the `css.lint.unknownAtRules` setting to `ignore`. + +You can control which parts of [normalize.css] to use via your project's [browserslist]. + +Results when [browserslist] is `last 3 versions`: + +```css +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} +``` + +Results when [browserslist] is `last 2 versions`: + +```css +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} +``` + +## Browser support + +Browser support is dictated by what normalize.css [supports]. As of this writing, it includes: + +- Chrome (last 3) +- Edge (last 3) +- Firefox (last 3) +- Firefox ESR +- Opera (last 3) +- Safari (last 3) +- iOS Safari (last 2) +- Internet Explorer 9+ + +[browserslist]: https://browserl.ist/ +[css reset]: https://cssreset.com/what-is-a-css-reset/ +[normalize.css]: https://github.com/csstools/normalize.css +[supports]: https://github.com/csstools/normalize.css#browser-support +[postcss normalize]: https://github.com/csstools/postcss-normalize diff --git a/docusaurus/docs/adding-custom-environment-variables.md b/docusaurus/docs/adding-custom-environment-variables.md index f9a462b7005..48bfea2cf64 100644 --- a/docusaurus/docs/adding-custom-environment-variables.md +++ b/docusaurus/docs/adding-custom-environment-variables.md @@ -3,26 +3,26 @@ id: adding-custom-environment-variables title: Adding Custom Environment Variables sidebar_label: Environment Variables --- + > Note: this feature is available with `react-scripts@0.2.3` and higher. -Your project can consume variables declared in your environment as if they were declared locally in your JS files. By -default you will have `NODE_ENV` defined for you, and any other environment variables starting with -`REACT_APP_`. +Your project can consume variables declared in your environment as if they were declared locally in your JS files. By default you will have `NODE_ENV` defined for you, and any other environment variables starting with `REACT_APP_`. + +> WARNING: Do not store any secrets (such as private API keys) in your React app! +> +> Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files. -**The environment variables are embedded during the build time**. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime. To read them at runtime, you would need to load HTML into memory on the server and replace placeholders in runtime, just like [described here](/docs/injecting-data-from-the-server-into-the-page). Alternatively you can rebuild the app on the server anytime you change them. +**The environment variables are embedded during the build time**. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime. To read them at runtime, you would need to load HTML into memory on the server and replace placeholders in runtime, as [described here](title-and-meta-tags.md#injecting-data-from-the-server-into-the-page). Alternatively you can rebuild the app on the server anytime you change them. > Note: You must create custom environment variables beginning with `REACT_APP_`. Any other variables except `NODE_ENV` will be ignored to avoid accidentally [exposing a private key on the machine that could have the same name](https://github.com/facebook/create-react-app/issues/865#issuecomment-252199527). Changing any environment variables will require you to restart the development server if it is running. -These environment variables will be defined for you on `process.env`. For example, having an environment -variable named `REACT_APP_SECRET_CODE` will be exposed in your JS as `process.env.REACT_APP_SECRET_CODE`. +These environment variables will be defined for you on `process.env`. For example, having an environment variable named `REACT_APP_NOT_SECRET_CODE` will be exposed in your JS as `process.env.REACT_APP_NOT_SECRET_CODE`. -There is also a special built-in environment variable called `NODE_ENV`. You can read it from `process.env.NODE_ENV`. When you run `npm start`, it is always equal to `'development'`, when you run `npm test` it is always equal to `'test'`, and when you run `npm run build` to make a production bundle, it is always equal to `'production'`. **You cannot override `NODE_ENV` manually.** This prevents developers from accidentally deploying a slow development build to production. +There is also a built-in environment variable called `NODE_ENV`. You can read it from `process.env.NODE_ENV`. When you run `npm start`, it is always equal to `'development'`, when you run `npm test` it is always equal to `'test'`, and when you run `npm run build` to make a production bundle, it is always equal to `'production'`. **You cannot override `NODE_ENV` manually.** This prevents developers from accidentally deploying a slow development build to production. -These environment variables can be useful for displaying information conditionally based on where the project is -deployed or consuming sensitive data that lives outside of version control. +These environment variables can be useful for displaying information conditionally based on where the project is deployed or consuming sensitive data that lives outside of version control. -First, you need to have environment variables defined. For example, let’s say you wanted to consume a secret defined -in the environment inside a `
`: +First, you need to have environment variables defined. For example, let’s say you wanted to consume an environment variable inside a ``: ```jsx render() { @@ -30,17 +30,19 @@ render() {
You are running this application in {process.env.NODE_ENV} mode. - +
); } ``` -During the build, `process.env.REACT_APP_SECRET_CODE` will be replaced with the current value of the `REACT_APP_SECRET_CODE` environment variable. Remember that the `NODE_ENV` variable will be set for you automatically. +During the build, `process.env.REACT_APP_NOT_SECRET_CODE` will be replaced with the current value of the `REACT_APP_NOT_SECRET_CODE` environment variable. Remember that the `NODE_ENV` variable will be set for you automatically. When you load the app in the browser and inspect the ``, you will see its value set to `abcdef`, and the bold text will show the environment provided when using `npm start`: + + ```html
You are running this application in development mode. @@ -50,9 +52,9 @@ When you load the app in the browser and inspect the ``, you will see its
``` -The above form is looking for a variable called `REACT_APP_SECRET_CODE` from the environment. In order to consume this -value, we need to have it defined in the environment. This can be done using two ways: either in your shell or in -a `.env` file. Both of these ways are described in the next few sections. + + +The above form is looking for a variable called `REACT_APP_NOT_SECRET_CODE` from the environment. In order to consume this value, we need to have it defined in the environment. This can be done using two ways: either in your shell or in a `.env` file. Both of these ways are described in the next few sections. Having access to the `NODE_ENV` is also useful for performing actions conditionally: @@ -77,17 +79,16 @@ You can also access the environment variables starting with `REACT_APP_` in the Note that the caveats from the above section apply: - Apart from a few built-in variables (`NODE_ENV` and `PUBLIC_URL`), variable names must start with `REACT_APP_` to work. -- The environment variables are injected at build time. If you need to inject them at runtime, [follow this approach instead](/docs/generating-dynamic-meta-tags-on-the-server). +- The environment variables are injected at build time. If you need to inject them at runtime, [follow this approach instead](title-and-meta-tags.md#generating-dynamic-meta-tags-on-the-server). ## Adding Temporary Environment Variables In Your Shell -Defining environment variables can vary between OSes. It’s also important to know that this manner is temporary for the -life of the shell session. +Defining environment variables can vary between OSes. It’s also important to know that this manner is temporary for the life of the shell session. ### Windows (cmd.exe) ```cmd -set "REACT_APP_SECRET_CODE=abcdef" && npm start +set "REACT_APP_NOT_SECRET_CODE=abcdef" && npm start ``` (Note: Quotes around the variable assignment are required to avoid a trailing whitespace.) @@ -95,13 +96,13 @@ set "REACT_APP_SECRET_CODE=abcdef" && npm start ### Windows (Powershell) ```Powershell -($env:REACT_APP_SECRET_CODE = "abcdef") -and (npm start) +($env:REACT_APP_NOT_SECRET_CODE = "abcdef") -and (npm start) ``` ### Linux, macOS (Bash) -```bash -REACT_APP_SECRET_CODE=abcdef npm start +```sh +REACT_APP_NOT_SECRET_CODE=abcdef npm start ``` ## Adding Development Environment Variables In `.env` @@ -111,11 +112,13 @@ REACT_APP_SECRET_CODE=abcdef npm start To define permanent environment variables, create a file called `.env` in the root of your project: ``` -REACT_APP_SECRET_CODE=abcdef +REACT_APP_NOT_SECRET_CODE=abcdef ``` > Note: You must create custom environment variables beginning with `REACT_APP_`. Any other variables except `NODE_ENV` will be ignored to avoid [accidentally exposing a private key on the machine that could have the same name](https://github.com/facebook/create-react-app/issues/865#issuecomment-252199527). Changing any environment variables will require you to restart the development server if it is running. +> Note: You need to restart the development server after changing `.env` files. + `.env` files **should be** checked into source control (with the exclusion of `.env*.local`). ### What other `.env` files can be used? @@ -129,11 +132,12 @@ REACT_APP_SECRET_CODE=abcdef Files on the left have more priority than files on the right: -- `npm start`: `.env.development.local`, `.env.development`, `.env.local`, `.env` -- `npm run build`: `.env.production.local`, `.env.production`, `.env.local`, `.env` +- `npm start`: `.env.development.local`, `.env.local`, `.env.development`, `.env` +- `npm run build`: `.env.production.local`, `.env.local`, `.env.production`, `.env` - `npm test`: `.env.test.local`, `.env.test`, `.env` (note `.env.local` is missing) -These variables will act as the defaults if the machine does not explicitly set them.
+These variables will act as the defaults if the machine does not explicitly set them. + Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) for more details. > Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need diff --git a/docusaurus/docs/adding-flow.md b/docusaurus/docs/adding-flow.md index a495a6cc677..321605261e9 100644 --- a/docusaurus/docs/adding-flow.md +++ b/docusaurus/docs/adding-flow.md @@ -14,8 +14,15 @@ To add Flow to a Create React App project, follow these steps: 3. Run `npm run flow init` (or `yarn flow init`) to create a [`.flowconfig` file](https://flow.org/en/docs/config/) in the root directory. 4. Add `// @flow` to any files you want to type check (for example, to `src/App.js`). -Now you can run `npm run flow` (or `yarn flow`) to check the files for type errors. -You can optionally use an IDE like [Nuclide](https://nuclide.io/docs/languages/flow/) for a better integrated experience. -In the future we plan to integrate it into Create React App even more closely. +Now you can run `npm run flow` (or `yarn flow`) to check the files for type errors. +You can optionally enable an extension for your IDE, such as [Flow Language Support](https://github.com/flowtype/flow-for-vscode) for Visual Studio Code, or leverage the Language Server Protocol standard (e.g. [vim LSP](https://github.com/prabirshrestha/vim-lsp/wiki/Servers-Flow)) to get hints while you type. + +If you'd like to use [absolute imports](/docs/importing-a-component#absolute-imports) with Flow, +make sure to add the following line to your `.flowconfig` to make Flow aware of it: + +```diff + [options] ++ module.name_mapper='^\([^\.].*\)$' -> '/src/\1' +``` To learn more about Flow, check out [its documentation](https://flow.org/). diff --git a/docusaurus/docs/adding-images-fonts-and-files.md b/docusaurus/docs/adding-images-fonts-and-files.md index c481d96c75d..67cc4b53d22 100644 --- a/docusaurus/docs/adding-images-fonts-and-files.md +++ b/docusaurus/docs/adding-images-fonts-and-files.md @@ -3,17 +3,17 @@ id: adding-images-fonts-and-files title: Adding Images, Fonts, and Files --- -With Webpack, using static assets like images and fonts works similarly to CSS. +With webpack, using static assets like images and fonts works similarly to CSS. -You can **`import` a file right in a JavaScript module**. This tells Webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the `src` attribute of an image or the `href` of a link to a PDF. +You can **`import` a file right in a JavaScript module**. This tells webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the `src` attribute of an image or the `href` of a link to a PDF. -To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. SVG files are excluded due to [#1153](https://github.com/facebook/create-react-app/issues/1153). +To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. SVG files are excluded due to [#1153](https://github.com/facebook/create-react-app/issues/1153). You can control the 10,000 byte threshold by setting the `IMAGE_INLINE_SIZE_LIMIT` environment variable as documented in our [advanced configuration](advanced-configuration.md). Here is an example: ```js import React from 'react'; -import logo from './logo.png'; // Tell Webpack this JS file uses this image +import logo from './logo.png'; // Tell webpack this JS file uses this image console.log(logo); // /logo.84287d09.png @@ -25,7 +25,7 @@ function Header() { export default Header; ``` -This ensures that when the project is built, Webpack will correctly move the images into the build folder, and provide us with correct paths. +This ensures that when the project is built, webpack will correctly move the images into the build folder, and provide us with correct paths. This works in CSS too: @@ -35,27 +35,33 @@ This works in CSS too: } ``` -Webpack finds all relative module references in CSS (they start with `./`) and replaces them with the final paths from the compiled bundle. If you make a typo or accidentally delete an important file, you will see a compilation error, just like when you import a non-existent JavaScript module. The final filenames in the compiled bundle are generated by Webpack from content hashes. If the file content changes in the future, Webpack will give it a different name in production so you don’t need to worry about long-term caching of assets. +webpack finds all relative module references in CSS (they start with `./`) and replaces them with the final paths from the compiled bundle. If you make a typo or accidentally delete an important file, you will see a compilation error, like when you import a non-existent JavaScript module. The final filenames in the compiled bundle are generated by webpack from content hashes. If the file content changes in the future, webpack will give it a different name in production so you don’t need to worry about long-term caching of assets. -Please be advised that this is also a custom feature of Webpack. +Please be advised that this is also a custom feature of webpack. + +**It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images). -**It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images).
An alternative way of handling static assets is described in the next section. ## Adding SVGs -> Note: this feature is available with `react-scripts@2.0.0` and higher. +> Note: this feature is available with `react-scripts@2.0.0` and higher, and `react@16.3.0` and higher. One way to add SVG files was described in the section above. You can also import SVGs directly as React components. You can use either of the two approaches. In your code it would look like this: ```js import { ReactComponent as Logo } from './logo.svg'; -const App = () => ( -
- {/* Logo is an actual React component */} - -
-); + +function App() { + return ( +
+ {/* Logo is an actual React component */} + +
+ ); +} ``` -This is handy if you don't want to load SVG as a separate file. Don't forget the curly braces in the import! The `ReactComponent` import name is special and tells Create React App that you want a React component that renders an SVG, rather than its filename. +This is handy if you don't want to load SVG as a separate file. Don't forget the curly braces in the import! The `ReactComponent` import name is significant and tells Create React App that you want a React component that renders an SVG, rather than its filename. + +> **Tip:** The imported SVG React Component accepts a `title` prop along with other props that a `svg` element accepts. Use this prop to add an accessible title to your svg component. diff --git a/docusaurus/docs/adding-relay.md b/docusaurus/docs/adding-relay.md index 8fd7eeabd56..022248b9f22 100644 --- a/docusaurus/docs/adding-relay.md +++ b/docusaurus/docs/adding-relay.md @@ -3,18 +3,18 @@ id: adding-relay title: Adding Relay --- -Relay is a framework for building data-driven React applications powered by GraphQL. The current release candidate of Relay works with Create React App projects out of the box using Babel Macros. Simply set up your project as laid out in the [Relay documentation](https://facebook.github.io/relay/), then make sure you have a version of the babel plugin providing the macro. +Relay is a framework for building data-driven React applications powered by GraphQL. The current release of Relay works with Create React App projects out of the box using Babel Macros. Set up your project as shown in the [Relay documentation](https://facebook.github.io/relay/), then make sure you have a version of the babel plugin providing the macro. To add it, run: ```sh -npm install --save babel-plugin-relay@dev +npm install --save babel-plugin-relay ``` Alternatively you may use `yarn`: ```sh -yarn upgrade babel-plugin-relay@dev +yarn add babel-plugin-relay ``` Then, wherever you use the `graphql` template tag, import the macro: diff --git a/docusaurus/docs/adding-typescript.md b/docusaurus/docs/adding-typescript.md index 5dee127ee70..d94bccc4920 100644 --- a/docusaurus/docs/adding-typescript.md +++ b/docusaurus/docs/adding-typescript.md @@ -3,25 +3,58 @@ id: adding-typescript title: Adding TypeScript --- +> Note: this feature is available with `react-scripts@2.1.0` and higher. + [TypeScript](https://www.typescriptlang.org/) is a typed superset of JavaScript that compiles to plain JavaScript. -To add [TypeScript](https://www.typescriptlang.org/) to a Create React App project, first install it: +## Installation + +To start a new Create React App project with [TypeScript](https://www.typescriptlang.org/), you can run: + +```sh +npx create-react-app my-app --template typescript +``` + +or + +```sh +yarn create react-app my-app --template typescript +``` + +> 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` or `yarn global remove create-react-app` to ensure that `npx` always uses the latest version. +> +> Global installs of `create-react-app` are no longer supported. -```bash -$ npm install --save typescript @types/react @types/react-dom @types/jest -$ # or -$ yarn add typescript @types/react @types/react-dom @types/jest +To add [TypeScript](https://www.typescriptlang.org/) to an existing Create React App project, first install it: + +```sh +npm install --save typescript @types/node @types/react @types/react-dom @types/jest +``` + +or + +```sh +yarn add typescript @types/node @types/react @types/react-dom @types/jest ``` -Next, rename any file to be a TypeScript file (e.g. `src/index.js` to `src/index.tsx`) and **restart your development server**! +Next, rename any file to be a TypeScript file (e.g. `src/index.js` to `src/index.tsx`) and create tsconfig.json if it's not in the root of your project [`tsconfig.json` file](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html). + +Finally **restart your development server**! + +Type errors will show up in the same console as the build one. You'll have to fix these type errors before you continue development or build your project. For advanced configuration, [see here](advanced-configuration.md). + +## Getting Started with TypeScript and React + +You are not required to make a [`tsconfig.json` file](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html), one will be made for you. You are allowed to edit the generated TypeScript configuration. -Type errors will show up in the same console as the build one. +- [TypeScript Handbook](https://www.typescriptlang.org/) +- [TypeScript Example on React](https://www.typescriptlang.org/play/index.html?jsx=2&esModuleInterop=true&e=196#example/typescript-with-react) +- [React + TypeScript Cheatsheets](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet#reacttypescript-cheatsheets) has a good overview on how to use React with TypeScript -To learn more about TypeScript, check out [its documentation](https://www.typescriptlang.org/). +## Troubleshooting -> **Note:** You are not required to make a [`tsconfig.json` file](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html), one will be made for you. -> You are allowed to edit the generated TypeScript configuration. +If your project is not created with TypeScript enabled, npx may be using a cached version of `create-react-app`. Remove previously installed versions with `npm uninstall -g create-react-app` or `yarn global remove create-react-app` (see [#6119](https://github.com/facebook/create-react-app/issues/6119#issuecomment-451614035)). -> **Note:** We recommend using [VSCode](https://code.visualstudio.com/) for a better integrated experience. +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. -> **Note:** Constant enums and namespaces are not supported. +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 --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md index 2150b18e15d..a06c6eff6f4 100644 --- a/docusaurus/docs/advanced-configuration.md +++ b/docusaurus/docs/advanced-configuration.md @@ -3,18 +3,30 @@ id: advanced-configuration title: Advanced Configuration --- -You can adjust various development and production settings by setting environment variables in your shell or with [.env](/docs/adding-development-environment-variables-in-env). +You can adjust various development and production settings by setting environment variables in your shell or with [.env](adding-custom-environment-variables.md#adding-development-environment-variables-in-env). -| Variable | Development | Production | Usage | -| :------------------- | :---------: | :--------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| 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/opn#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. | -| HOST | ✅ Used | 🚫 Ignored | By default, the development web server binds to `localhost`. You may use this variable to specify a different host. | -| 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. | -| HTTPS | ✅ Used | 🚫 Ignored | When set to `true`, Create React App will run the development server in `https` mode. | -| 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`)](/docs/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. | -| CI | ✅ Used | ✅ Used | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. | -| REACT_EDITOR | ✅ Used | 🚫 Ignored | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can [send a pull request to detect your editor of choice](https://github.com/facebook/create-react-app/issues/2636). Setting this environment variable overrides the automatic detection. If you do it, make sure your systems [PATH]() environment variable points to your editor’s bin folder. You can also set it to `none` to disable it completely. | -| CHOKIDAR_USEPOLLING | ✅ Used | 🚫 Ignored | When set to `true`, the watcher runs in polling mode, as necessary inside a VM. Use this option if `npm start` isn't detecting changes. | -| GENERATE_SOURCEMAP | 🚫 Ignored | ✅ Used | When set to `false`, source maps are not generated for a production build. This solves OOM issues on some smaller machines. | -| NODE_PATH | ✅ Used | ✅ Used | Same as [`NODE_PATH` in Node.js](https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders), but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting `NODE_PATH=src`. | -| INLINE_RUNTIME_CHUNK | 🚫 Ignored | ✅ Used | By default, Create React App will embed the runtime script into `index.html` during the production build. When set to `false`, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP. | | +> Note: You do not need to declare `REACT_APP_` before the below variables as you would with custom environment variables. + +| Variable | Development | Production | Usage | +| :------------------------ | :---------: | :--------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| 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. | +| 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. | +| 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. | +| 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. | +| HTTPS | ✅ Used | 🚫 Ignored | When set to `true`, Create React App will run the development server in `https` mode. | +| WDS_SOCKET_HOST | ✅ Used | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket hostname for hot module reloading. Normally, `webpack-dev-server` defaults to `window.location.hostname` for the SockJS hostname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockhost) for more details. | +| WDS_SOCKET_PATH | ✅ Used | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket path for hot module reloading. Normally, `webpack-dev-server` defaults to `/ws` for the SockJS pathname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockpath) for more details. | +| WDS_SOCKET_PORT | ✅ Used | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket port for hot module reloading. Normally, `webpack-dev-server` defaults to `window.location.port` for the SockJS port. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockport) for more details. | +| PUBLIC_URL | ✅ Used | ✅ 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.md#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. | +| BUILD_PATH | 🚫 Ignored | ✅ Used | By default, Create React App will output compiled assets to a `/build` directory adjacent to your `/src`. You may use this variable to specify a new path for Create React App to output assets. BUILD_PATH should be specified as a path relative to the root of your project. | +| CI | ✅ Used | ✅ Used | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. | +| REACT_EDITOR | ✅ Used | 🚫 Ignored | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can [send a pull request to detect your editor of choice](https://github.com/facebook/create-react-app/issues/2636). Setting this environment variable overrides the automatic detection. If you do it, make sure your systems [PATH]() environment variable points to your editor’s bin folder. You can also set it to `none` to disable it completely. | +| CHOKIDAR_USEPOLLING | ✅ Used | 🚫 Ignored | When set to `true`, the watcher runs in polling mode, as necessary inside a VM. Use this option if `npm start` isn't detecting changes. | +| GENERATE_SOURCEMAP | 🚫 Ignored | ✅ Used | When set to `false`, source maps are not generated for a production build. This solves out of memory (OOM) issues on some smaller machines. | +| INLINE_RUNTIME_CHUNK | 🚫 Ignored | ✅ Used | By default, Create React App will embed the runtime script into `index.html` during the production build. When set to `false`, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP. | +| IMAGE_INLINE_SIZE_LIMIT | ✅ Used | ✅ Used | By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to `0` will disable the inlining of images. | +| FAST_REFRESH | ✅ Used | 🚫 Ignored | When set to `false`, disables experimental support for Fast Refresh to allow you to tweak your components in real time without reloading the page. | +| TSC_COMPILE_ON_ERROR | ✅ Used | ✅ Used | When set to `true`, you can run and properly build TypeScript projects even if there are TypeScript type check errors. These errors are printed as warnings in the terminal and/or browser console. | +| ESLINT_NO_DEV_ERRORS | ✅ Used | 🚫 Ignored | When set to `true`, ESLint errors are converted to warnings during development. As a result, ESLint output will no longer appear in the error overlay. | +| DISABLE_ESLINT_PLUGIN | ✅ Used | ✅ Used | When set to `true`, [eslint-webpack-plugin](https://github.com/webpack-contrib/eslint-webpack-plugin) will be completely disabled. | +| DISABLE_NEW_JSX_TRANSFORM | ✅ Used | ✅ Used | When set to `true`, disables the [new JSX transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) introduced in React 17 and backported to React 16.14.0, 15.7.0, and 0.14.10. New projects will use a version of React that supports this by default but you may need to disable it in existing projects if you can't upgrade React. | diff --git a/docusaurus/docs/alternatives-to-ejecting.md b/docusaurus/docs/alternatives-to-ejecting.md index 1bbc066c3bf..a7255aa938f 100644 --- a/docusaurus/docs/alternatives-to-ejecting.md +++ b/docusaurus/docs/alternatives-to-ejecting.md @@ -3,4 +3,4 @@ id: alternatives-to-ejecting title: Alternatives to Ejecting --- -[Ejecting](/docs/available-scripts#npm-run-eject) lets you customize anything, but from that point on you have to maintain the configuration and scripts yourself. This can be daunting if you have many similar projects. In such cases instead of ejecting we recommend to _fork_ `react-scripts` and any other packages you need. [This article](https://auth0.com/blog/how-to-configure-create-react-app/) dives into how to do it in depth. You can find more discussion in [this issue](https://github.com/facebook/create-react-app/issues/682). +[Ejecting](available-scripts.md#npm-run-eject) lets you customize anything, but from that point on you have to maintain the configuration and scripts yourself. This can be daunting if you have many similar projects. In such cases instead of ejecting we recommend to _fork_ `react-scripts` and any other packages you need. [This article](https://auth0.com/blog/how-to-configure-create-react-app/) covers how to do it in depth. You can find more discussion in [this issue](https://github.com/facebook/create-react-app/issues/682). diff --git a/docusaurus/docs/analyzing-the-bundle-size.md b/docusaurus/docs/analyzing-the-bundle-size.md index ce175e085d6..36f753c4df2 100644 --- a/docusaurus/docs/analyzing-the-bundle-size.md +++ b/docusaurus/docs/analyzing-the-bundle-size.md @@ -24,7 +24,7 @@ Then in `package.json`, add the following line to `scripts`: ```diff "scripts": { -+ "analyze": "source-map-explorer build/static/js/main.*", ++ "analyze": "source-map-explorer 'build/static/js/*.js'", "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", @@ -33,7 +33,7 @@ Then in `package.json`, add the following line to `scripts`: Then to analyze the bundle run the production build then run the analyze script. -``` +```sh npm run build npm run analyze ``` diff --git a/docusaurus/docs/available-scripts.md b/docusaurus/docs/available-scripts.md index b52b0926bb7..808d3d92005 100644 --- a/docusaurus/docs/available-scripts.md +++ b/docusaurus/docs/available-scripts.md @@ -14,15 +14,15 @@ The page will reload if you make edits. You will also see any lint errors in the ## `npm test` -Launches the test runner in the interactive watch mode. See the section about [running tests](/docs/running-tests) for more information. +Launches the test runner in the interactive watch mode. See the section about [running tests](running-tests.md) for more information. ## `npm run build` Builds the app for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance. -The build is minified and the filenames include the hashes. Your app is ready to be deployed! +The build is minified and the filenames include the hashes. If necessary, classnames and function names can be enabled for profiling purposes. See the [production build](production-build.md) section for more information. -See the section about [deployment](/docs/deployment) for more information. +Your app is ready to be deployed! See the section about [deployment](deployment.md) for more information about deploying your application to popular hosting providers. ## `npm run eject` @@ -30,6 +30,10 @@ See the section about [deployment](/docs/deployment) for more information. If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. -Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. +Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc.) into your project as dependencies in `package.json`. Technically, the distinction between dependencies and development dependencies is pretty arbitrary for front-end apps that produce static bundles. + +In addition, it used to cause problems with some hosting platforms that didn't install development dependencies (and thus weren't able to build the project on the server or test it right before deployment). You are free to rearrange your dependencies in `package.json` as you see fit. + +All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. diff --git a/docusaurus/docs/can-i-use-decorators.md b/docusaurus/docs/can-i-use-decorators.md index f4ccf4e4504..474d5139d56 100644 --- a/docusaurus/docs/can-i-use-decorators.md +++ b/docusaurus/docs/can-i-use-decorators.md @@ -3,13 +3,15 @@ id: can-i-use-decorators title: Can I Use Decorators? --- -Some popular libraries use [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) in their documentation.
+Some popular libraries use [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) in their documentation. + Create React App intentionally doesn’t support decorator syntax at the moment because: - It is an experimental proposal and is subject to change (in fact, it has already changed once, and will change again). - Most libraries currently support only the old version of the proposal — which will never be a standard. -However in many cases you can rewrite decorator-based code without decorators just as fine.
+However in many cases you can rewrite decorator-based code without decorators and achieve the same result. + Please refer to these two threads for reference: - [#214](https://github.com/facebook/create-react-app/issues/214) diff --git a/docusaurus/docs/code-splitting.md b/docusaurus/docs/code-splitting.md index b288785b574..9a31009fded 100644 --- a/docusaurus/docs/code-splitting.md +++ b/docusaurus/docs/code-splitting.md @@ -5,7 +5,7 @@ title: Code Splitting Instead of downloading the entire app before users can use it, code splitting allows you to split your code into small chunks which you can then load on demand. -This project setup supports code splitting via [dynamic `import()`](http://2ality.com/2017/01/import-operator.html#loading-code-on-demand). Its [proposal](https://github.com/tc39/proposal-dynamic-import) is in stage 3. The `import()` function-like form takes the module name as an argument and returns a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) which always resolves to the namespace object of the module. +This project setup supports code splitting via [dynamic `import()`](https://2ality.com/2017/01/import-operator.html#loading-code-on-demand). Its [proposal](https://github.com/tc39/proposal-dynamic-import) is in stage 4. The `import()` function-like form takes the module name as an argument and returns a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) which always resolves to the namespace object of the module. Here is an example: @@ -45,12 +45,12 @@ class App extends Component { export default App; ``` -This will make `moduleA.js` and all its unique dependencies as a separate chunk that only loads after the user clicks the 'Load' button. +This will make `moduleA.js` and all its unique dependencies as a separate chunk that only loads after the user clicks the 'Load' button. For more information on the chunks that are created, see the [production build](production-build.md) section. You can also use it with `async` / `await` syntax if you prefer it. ## With React Router -If you are using React Router check out [this tutorial](http://serverless-stack.com/chapters/code-splitting-in-create-react-app.html) on how to use code splitting with it. You can find the companion GitHub repository [here](https://github.com/AnomalyInnovations/serverless-stack-demo-client/tree/code-splitting-in-create-react-app). +If you are using React Router check out [this tutorial](https://reactjs.org/docs/code-splitting.html#route-based-code-splitting) Also check out the [Code Splitting](https://reactjs.org/docs/code-splitting.html) section in React documentation. diff --git a/docusaurus/docs/custom-templates.md b/docusaurus/docs/custom-templates.md new file mode 100644 index 00000000000..f1caf7568d7 --- /dev/null +++ b/docusaurus/docs/custom-templates.md @@ -0,0 +1,90 @@ +--- +id: custom-templates +title: Custom Templates +--- + +> Note: this feature is available with `react-scripts@3.3.0` and higher. + +Custom Templates enable you to select a template to create your project from, while still retaining all of the features of Create React App. + +You'll notice that Custom Templates are always named in the format `cra-template-[template-name]`, however you only need to provide the `[template-name]` to the creation command. + +Scoped templates are also supported, under the name `@[scope-name]/cra-template` or `@[scope-name]/cra-template-[template-name]`, which can be installed via `@[scope]` and `@[scope]/[template-name]` respectively. + +```sh +npx create-react-app my-app --template [template-name] +``` + +## Finding custom templates + +We ship two templates by default: + +- [`cra-template`](https://github.com/facebook/create-react-app/tree/main/packages/cra-template) +- [`cra-template-typescript`](https://github.com/facebook/create-react-app/tree/main/packages/cra-template-typescript) + +However, you can find many great community templates by searching for ["cra-template-\*"](https://www.npmjs.com/search?q=cra-template-*) on npm. + +## Building a template + +If you're interested in building a custom template, first take a look at how we've built [`cra-template`](https://github.com/facebook/create-react-app/tree/main/packages/cra-template). + +A template must have the following structure: + +``` +cra-template-[template-name]/ + README.md (for npm) + template.json + package.json + template/ + README.md (for projects created from this template) + gitignore + public/ + index.html + src/ + index.js (or index.tsx) +``` + +### Testing a template + +To test a template locally, pass the file path to the directory of your template source using the `file:` prefix. + +```sh +npx create-react-app my-app --template file:../path/to/your/template/cra-template-[template-name] +``` + +### The `template` folder + +This folder is copied to the user's app directory as Create React App installs. During this process, the file `gitignore` is renamed to `.gitignore`. + +You can add whatever files you want in here, but you must have at least the files specified above. + +### The `template.json` file + +This is the configuration file for your template. As this is a new feature, more options will be added over time. For now, only a `package` key is supported. + +The `package` key lets you provide any keys/values that you want added to the new project's `package.json`, such as dependencies and any custom scripts that your template relies on. + +Below is an example `template.json` file: + +```json +{ + "package": { + "dependencies": { + "eslint-plugin-jsx-a11y": "^6.2.3", + "serve": "^11.2.0" + }, + "scripts": { + "serve": "serve -s build", + "build-and-serve": "npm run build && npm run serve" + }, + "eslintConfig": { + "extends": ["react-app", "plugin:jsx-a11y/recommended"], + "plugins": ["jsx-a11y"] + } + } +} +``` + +Any values you add for `"dependencies"` and `"scripts"` will be merged with the Create React App defaults. Values for any other keys will be used as-is, replacing any matching Create React App defaults. + +For convenience, we always replace `npm run` with `yarn` in your custom `"scripts"`, as well as in your `README` when projects are initialized with yarn. diff --git a/docusaurus/docs/debugging-tests.md b/docusaurus/docs/debugging-tests.md index 93da201a9f6..1261976343f 100644 --- a/docusaurus/docs/debugging-tests.md +++ b/docusaurus/docs/debugging-tests.md @@ -6,21 +6,19 @@ sidebar_label: Debugging Tests There are various ways to setup a debugger for your Jest tests. We cover debugging in Chrome and [Visual Studio Code](https://code.visualstudio.com/). -> Note: debugging tests requires Node 8 or higher. - ## Debugging Tests in Chrome Add the following to the `scripts` section in your project's `package.json` ```json "scripts": { - "test:debug": "react-scripts --inspect-brk test --runInBand" + "test:debug": "react-scripts --inspect-brk test --runInBand --no-cache" } ``` Place `debugger;` statements in any test and run: -```bash +```sh $ npm run test:debug ``` @@ -32,7 +30,7 @@ Open the following in Chrome about:inspect ``` -After opening that link, the Chrome Developer Tools will be displayed. Select `inspect` on your process and a breakpoint will be set at the first line of the react script (this is done simply to give you time to open the developer tools and to prevent Jest from executing before you have time to do so). Click the button that looks like a "play" button in the upper right hand side of the screen to continue execution. When Jest executes the test that contains the debugger statement, execution will pause and you can examine the current scope and call stack. +After opening that link, the Chrome Developer Tools will be displayed. Select `inspect` on your process and a breakpoint will be set at the first line of the react script (this is done to give you time to open the developer tools and to prevent Jest from executing before you have time to do so). Click the button that looks like a "play" button in the upper right hand side of the screen to continue execution. When Jest executes the test that contains the debugger statement, execution will pause and you can examine the current scope and call stack. > Note: the --runInBand cli option makes sure Jest runs test in the same process rather than spawning processes for individual tests. Normally Jest parallelizes test runs across processes but it is hard to debug many processes at the same time. @@ -42,7 +40,7 @@ Debugging Jest tests is supported out of the box for [Visual Studio Code](https: Use the following [`launch.json`](https://code.visualstudio.com/docs/editor/debugging#_launch-configurations) configuration file: -``` +```json { "version": "0.2.0", "configurations": [ @@ -51,15 +49,13 @@ Use the following [`launch.json`](https://code.visualstudio.com/docs/editor/debu "type": "node", "request": "launch", "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts", - "args": [ - "test", - "--runInBand", - "--no-cache" - ], + "args": ["test", "--runInBand", "--no-cache", "--watchAll=false"], "cwd": "${workspaceRoot}", "protocol": "inspector", "console": "integratedTerminal", - "internalConsoleOptions": "neverOpen" + "internalConsoleOptions": "neverOpen", + "env": { "CI": "true" }, + "disableOptimisticBPs": true } ] } diff --git a/docusaurus/docs/deployment.md b/docusaurus/docs/deployment.md index 6260c9953db..14a29997761 100644 --- a/docusaurus/docs/deployment.md +++ b/docusaurus/docs/deployment.md @@ -4,18 +4,22 @@ title: Deployment sidebar_label: Deployment --- -`npm run build` creates a `build` directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served `index.html`, and requests to static paths like `/static/js/main..js` are served with the contents of the `/static/js/main..js` file. +`npm run build` creates a `build` directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served `index.html`, and requests to static paths like `/static/js/main..js` are served with the contents of the `/static/js/main..js` file. For more information see the [production build](production-build.md) section. ## Static Server -For environments using [Node](https://nodejs.org/), the easiest way to handle this would be to install [serve](https://github.com/zeit/serve) and let it handle the rest: +For environments using [Node](https://nodejs.org/), the easiest way to handle this would be to install [serve](https://github.com/vercel/serve) and let it handle the rest: ```sh npm install -g serve serve -s build ``` -The last command shown above will serve your static site on the port **5000**. Like many of [serve](https://github.com/zeit/serve)’s internal settings, the port can be adjusted using the `-p` or `--port` flags. +The last command shown above will serve your static site on the port **3000**. Like many of [serve](https://github.com/vercel/serve)’s internal settings, the port can be adjusted using the `-l` or `--listen` flags: + +```sh +serve -s build -l 4000 +``` Run this command to get a full list of the options available: @@ -25,9 +29,9 @@ serve -h ## Other Solutions -You don’t necessarily need a static server in order to run a Create React App project in production. It works just as fine integrated into an existing dynamic one. +You don’t necessarily need a static server in order to run a Create React App project in production. It also works well when integrated into an existing server side app. -Here’s a programmatic example using [Node](https://nodejs.org/) and [Express](http://expressjs.com/): +Here’s a programmatic example using [Node](https://nodejs.org/) and [Express](https://expressjs.com/): ```javascript const express = require('express'); @@ -36,7 +40,7 @@ const app = express(); app.use(express.static(path.join(__dirname, 'build'))); -app.get('/', function(req, res) { +app.get('/', function (req, res) { res.sendFile(path.join(__dirname, 'build', 'index.html')); }); @@ -75,20 +79,20 @@ If you’re using [Apache HTTP Server](https://httpd.apache.org/), you need to c It will get copied to the `build` folder when you run `npm run build`. -If you’re using [Apache Tomcat](http://tomcat.apache.org/), you need to follow [this Stack Overflow answer](https://stackoverflow.com/a/41249464/4878474). +If you’re using [Apache Tomcat](https://tomcat.apache.org/), you need to follow [this Stack Overflow answer](https://stackoverflow.com/a/41249464/4878474). Now requests to `/todos/42` will be handled correctly both in development and in production. -On a production build, and when you've [opted-in](/docs/making-a-progressive-web-app#why-opt-in), +On a production build, and when you've [opted-in](making-a-progressive-web-app.md#why-opt-in), a [service worker](https://developers.google.com/web/fundamentals/primers/service-workers/) will automatically handle all navigation requests, like for `/todos/42`, by serving the cached copy of your `index.html`. This service worker navigation routing can be configured or disabled by -[`eject`ing](/docs/available-scripts#npm-run-eject) and then modifying the +[`eject`ing](available-scripts.md#npm-run-eject) and then modifying the [`navigateFallback`](https://github.com/GoogleChrome/sw-precache#navigatefallback-string) and [`navigateFallbackWhitelist`](https://github.com/GoogleChrome/sw-precache#navigatefallbackwhitelist-arrayregexp) -options of the `SWPreachePlugin` [configuration](../config/webpack.config.prod.js). +options of the `SWPrecachePlugin` configuration. -When users install your app to the homescreen of their device the default configuration will make a shortcut to `/index.html`. This may not work for client-side routers which expect the app to be served from `/`. Edit the web app manifest at [`public/manifest.json`](public/manifest.json) and change `start_url` to match the required URL scheme, for example: +When users install your app to the homescreen of their device the default configuration will make a shortcut to `/index.html`. This may not work for client-side routers which expect the app to be served from `/`. Edit the web app manifest at `public/manifest.json` and change `start_url` to match the required URL scheme, for example: ```js "start_url": ".", @@ -96,7 +100,8 @@ When users install your app to the homescreen of their device the default config ## Building for Relative Paths -By default, Create React App produces a build assuming your app is hosted at the server root.
+By default, Create React App produces a build assuming your app is hosted at the server root. + To override this, specify the `homepage` in your `package.json`, for example: ```js @@ -105,9 +110,10 @@ To override this, specify the `homepage` in your `package.json`, for example: This will let Create React App correctly infer the root path to use in the generated HTML file. -**Note**: If you are using `react-router@^4`, you can root ``s using the `basename` prop on any ``.
-More information [here](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string).
-
+**Note**: If you are using `react-router@^4`, you can root ``s using the `basename` prop on any ``. + +More information [here](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string). + For example: ```js @@ -145,7 +151,7 @@ For example, to create a build environment for a staging environment: ```json { "scripts": { - "build:staging": "env-cmd .env.staging npm run build" + "build:staging": "env-cmd -f .env.staging npm run build" } } ``` @@ -155,11 +161,28 @@ You can specify other environments in the same way. Variables in `.env.production` will be used as fallback because `NODE_ENV` will always be set to `production` for a build. +## [AWS Amplify](https://console.amplify.aws) + +The AWS Amplify Console provides continuous deployment and hosting for modern web apps (single page apps and static site generators) with serverless backends. The Amplify Console offers globally available CDNs, custom domain setup, feature branch deployments, and password protection. + +1. Login to the Amplify Console [here](https://console.aws.amazon.com/amplify/home). +1. Connect your Create React App repo and pick a branch. If you're looking for a Create React App+Amplify starter, try the [create-react-app-auth-amplify starter](https://github.com/swaminator/create-react-app-auth-amplify) that demonstrates setting up auth in 10 minutes with Create React App. +1. The Amplify Console automatically detects the build settings. Choose Next. +1. Choose _Save and deploy_. + +If the build succeeds, the app is deployed and hosted on a global CDN with an amplifyapp.com domain. You can now continuously deploy changes to your frontend or backend. Continuous deployment allows developers to deploy updates to their frontend and backend on every code commit to their Git repository. + ## [Azure](https://azure.microsoft.com/) -See [this](https://medium.com/@to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321) blog post on how to deploy your React app to Microsoft Azure. +Azure Static Web Apps creates an automated build and deploy pipeline for your React app powered by GitHub Actions. Applications are geo-distributed by default with multiple points of presence. PR's are built automatically for staging environment previews. + +1. Create a new Static Web App [here](https://ms.portal.azure.com/#create/Microsoft.StaticApp). +1. Add in the details and connect to your GitHub repo. +1. Make sure the build folder is set correctly on the "build" tab and create the resource. + +Azure Static Web Apps will automatically configure a GitHub Action in your repo and begin the deployment. -See [this](https://medium.com/@strid/host-create-react-app-on-azure-986bc40d5bf2#.pycfnafbg) blog post or [this](https://github.com/ulrikaugustsson/azure-appservice-static) repo for a way to use automatic deployment to Azure App Service. +See the [Azure Static Web Apps documentation](https://aka.ms/swadocs) for more information on routing, APIs, authentication and authorization, custom domains and more. ## [Firebase](https://firebase.google.com/) @@ -172,7 +195,7 @@ Then run the `firebase init` command from your project’s root. You need to cho First, let's associate this project directory with a Firebase project. You can create multiple project aliases by running firebase use --add, - but for now we'll just set up a default project. + but for now we'll set up a default project. ? What Firebase project do you want to associate as default? Example app (example-app-fd690) @@ -204,7 +227,7 @@ Then run the `firebase init` command from your project’s root. You need to cho IMPORTANT: you need to set proper HTTP caching headers for `service-worker.js` file in `firebase.json` file or you will not be able to see changes after first deployment ([issue #2440](https://github.com/facebook/create-react-app/issues/2440)). It should be added inside `"hosting"` key like next: -``` +```json { "hosting": { ... @@ -232,7 +255,7 @@ Now, after you create a production build with `npm run build`, you can deploy it Hosting URL: https://example-app-fd690.firebaseapp.com ``` -For more information see [Add Firebase to your JavaScript Project](https://firebase.google.com/docs/web/setup). +For more information see [Firebase Hosting](https://firebase.google.com/docs/hosting). ## [GitHub Pages](https://pages.github.com/) @@ -240,7 +263,8 @@ For more information see [Add Firebase to your JavaScript Project](https://fireb ### Step 1: Add `homepage` to `package.json` -**The step below is important!**
+**The step below is important!**
+ **If you skip it, your app will not deploy correctly.** Open your `package.json` and add a `homepage` field for your project: @@ -291,17 +315,16 @@ Add the following scripts in your `package.json`: The `predeploy` script will run automatically before `deploy` is run. -If you are deploying to a GitHub user page instead of a project page you'll need to make two -additional modifications: +If you are deploying to a GitHub user page instead of a project page you'll need to make one +additional modification: -1. First, change your repository's source branch to be any branch other than **master**. -1. Additionally, tweak your `package.json` scripts to push deployments to **master**: +1. Tweak your `package.json` scripts to push deployments to **main**: ```diff "scripts": { "predeploy": "npm run build", - "deploy": "gh-pages -d build", -+ "deploy": "gh-pages -b master -d build", ++ "deploy": "gh-pages -b main -d build", ``` ### Step 3: Deploy the site by running `npm run deploy` @@ -312,11 +335,11 @@ Then run: npm run deploy ``` -### Step 4: Ensure your project’s settings use `gh-pages` +### Step 4: For a project page, ensure your project’s settings use `gh-pages` Finally, make sure **GitHub Pages** option in your GitHub project settings is set to use the `gh-pages` branch: -gh-pages branch setting +gh-pages branch setting ### Step 5: Optionally, configure the domain @@ -333,7 +356,7 @@ mywebsite.com GitHub Pages doesn’t support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions: - You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://reacttraining.com/react-router/web/api/Router) about different history implementations in React Router. -- Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a special redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages). +- Alternatively, you can use a trick to teach GitHub Pages to handle 404s by redirecting to your `index.html` page with a custom redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages). ### Troubleshooting @@ -355,7 +378,8 @@ If, when deploying, you get `Cannot read property 'email' of null`, try the foll ## [Heroku](https://www.heroku.com/) -Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).
+Use the [Heroku Buildpack for Create React App](https://github.com/heroku/heroku-buildpack-nodejs). + You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration). ### Resolving Heroku Deployment Errors @@ -420,29 +444,52 @@ To support `pushState`, make sure to create a `public/_redirects` file with the When you build the project, Create React App will place the `public` folder contents into the build output. -## [Now](https://zeit.co/now) +## [Vercel](https://vercel.com) -Now offers a zero-configuration single-command deployment. You can use `now` to deploy your app for free. +[Vercel](https://vercel.com/home) is a cloud platform that enables developers to host Jamstack websites and web services that deploy instantly, scale automatically, and requires no supervision, all with zero configuration. They provide a global edge network, SSL encryption, asset compression, cache invalidation, and more. -1. Install the `now` command-line tool either via the recommended [desktop tool](https://zeit.co/download) or via node with `npm install -g now`. +### Step 1: Deploying your React project to Vercel -2. Build your app by running `npm run build`. +To deploy your React project with a [Vercel for Git Integration](https://vercel.com/docs/git-integrations), make sure it has been pushed to a Git repository. -3. Move into the build directory by running `cd build`. +Import the project into Vercel using the [Import Flow](https://vercel.com/import/git). During the import, you will find all relevant [options](https://vercel.com/docs/build-step#build-&-development-settings) preconfigured for you with the ability to change as needed. -4. Run `now --name your-project-name` from within the build directory. You will see a **now.sh** URL in your output like this: +After your project has been imported, all subsequent pushes to branches will generate [Preview Deployments](https://vercel.com/docs/platform/deployments#preview), and all changes made to the [Production Branch](https://vercel.com/docs/git-integrations#production-branch) (commonly "master" or "main") will result in a [Production Deployment](https://vercel.com/docs/platform/deployments#production). - ``` - > Ready! https://your-project-name-tpspyhtdtk.now.sh (copied to clipboard) - ``` +Once deployed, you will get a URL to see your app live, such as the following: https://create-react-app-example.vercel.app/. + +### Step 2 (optional): Using a Custom Domain + +If you want to use a Custom Domain with your Vercel deployment, you can **Add** or **Transfer in** your domain via your Vercel [account Domain settings.](https://vercel.com/dashboard/domains) + +To add your domain to your project, navigate to your [Project](https://vercel.com/docs/platform/projects) from the Vercel Dashboard. Once you have selected your project, click on the "Settings" tab, then select the **Domains** menu item. From your projects **Domain** page, enter the domain you wish to add to your project. + +Once the domain has been added, you will be presented with different methods for configuring it. + +### Deploying a fresh React project + +You can deploy a fresh React project, with a Git repository set up for you, with the following Deploy Button: + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fvercel%2Fvercel%2Ftree%2Fmaster%2Fexamples%2Fcreate-react-app) + +### Vercel References: + +- [Example Source](https://github.com/vercel/vercel/tree/master/examples/create-react-app) +- [Official Vercel Guide](https://vercel.com/guides/deploying-react-with-vercel-cra) +- [Vercel Deployment Docs](https://vercel.com/docs) +- [Vercel Custom Domain Docs](https://vercel.com/docs/custom-domains) + +## [Render](https://render.com) + +Render offers free [static site](https://render.com/docs/static-sites) hosting with fully managed SSL, a global CDN and continuous auto deploys from GitHub. - Paste that URL into your browser when the build is complete, and you will see your deployed app. +Deploy your app in only a few minutes by following the [Create React App deployment guide](https://render.com/docs/deploy-create-react-app). -Details are available in [this article.](https://zeit.co/blog/unlimited-static) +Use invite code `cra` to sign up or use [this link](https://render.com/i/cra). ## [S3](https://aws.amazon.com/s3) and [CloudFront](https://aws.amazon.com/cloudfront/) -See this [blog post](https://medium.com/@omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af) on how to deploy your React app to Amazon Web Services S3 and CloudFront. +See this [blog post](https://medium.com/@omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af) on how to deploy your React app to Amazon Web Services S3 and CloudFront. If you are looking to add a custom domain, HTTPS and continuous deployment see this [blog post](https://medium.com/dailyjs/a-guide-to-deploying-your-react-app-with-aws-s3-including-https-a-custom-domain-a-cdn-and-58245251f081). ## [Surge](https://surge.sh/) diff --git a/docusaurus/docs/developing-components-in-isolation.md b/docusaurus/docs/developing-components-in-isolation.md index 98368d31636..a0fce33f02d 100644 --- a/docusaurus/docs/developing-components-in-isolation.md +++ b/docusaurus/docs/developing-components-in-isolation.md @@ -4,7 +4,7 @@ title: Developing Components in Isolation --- Usually, in an app, you have a lot of UI components, and each of them has many different states. -For an example, a simple button component could have the following states: +For an example, a basic button component could have the following states: - In a regular state, with a text label. - In the disabled mode. @@ -12,9 +12,9 @@ For an example, a simple button component could have the following states: Usually, it’s hard to see these states without running a sample app or some examples. -Create React App doesn’t include any tools for this by default, but you can easily add [Storybook for React](https://storybook.js.org) ([source](https://github.com/storybooks/storybook)) or [React Styleguidist](https://react-styleguidist.js.org/) ([source](https://github.com/styleguidist/react-styleguidist)) to your project. **These are third-party tools that let you develop components and see all their states in isolation from your app**. +Create React App doesn’t include any tools for this by default, but you can add [Storybook for React](https://storybook.js.org) ([source](https://github.com/storybooks/storybook)) or [React Styleguidist](https://react-styleguidist.js.org/) ([source](https://github.com/styleguidist/react-styleguidist)) to your project. **These are third-party tools that let you develop components and see all their states in isolation from your app**. -![Storybook for React Demo](http://i.imgur.com/7CIAWpB.gif) +![Storybook for React Demo](https://raw.githubusercontent.com/storybookjs/storybook/next/docs/get-started/storybook-third-party-docs.gif) You can also deploy your Storybook or style guide as a static app. This way, everyone in your team can view and review different states of UI components without starting a backend server or creating an account in your app. @@ -22,24 +22,18 @@ You can also deploy your Storybook or style guide as a static app. This way, eve Storybook is a development environment for React UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. -First, install the following npm package globally: +Run the following command inside your app’s directory: ```sh -npm install -g @storybook/cli -``` - -Then, run the following command inside your app’s directory: - -```sh -getstorybook +npx sb init ``` After that, follow the instructions on the screen. Learn more about React Storybook: -- [Learn Storybook (tutorial)](https://learnstorybook.com) -- [Documentation](https://storybook.js.org/basics/introduction/) +- [Learn Storybook (tutorial)](https://storybook.js.org/tutorials/) +- [Documentation](https://storybook.js.org/docs/react/get-started/introduction) - [GitHub Repo](https://github.com/storybooks/storybook) - [Snapshot Testing UI](https://github.com/storybooks/storybook/tree/master/addons/storyshots) with Storybook + addon/storyshot diff --git a/docusaurus/docs/documentation-intro.md b/docusaurus/docs/documentation-intro.md index 8976946c784..aee991f0f40 100644 --- a/docusaurus/docs/documentation-intro.md +++ b/docusaurus/docs/documentation-intro.md @@ -18,7 +18,7 @@ This website is only about Create React App. ## Something Missing? -If you have ideas for more “How To” recipes that should be on this page, [let us know](https://github.com/facebook/create-react-app/issues) or [contribute some!](https://github.com/facebook/create-react-app/tree/master/docusaurus/docs) +If you have ideas for more “How To” recipes that should be on this page, [let us know](https://github.com/facebook/create-react-app/issues) or [contribute some!](https://github.com/facebook/create-react-app/tree/main/docusaurus/docs) ## Feedback diff --git a/docusaurus/docs/fetching-data-with-ajax-requests.md b/docusaurus/docs/fetching-data-with-ajax-requests.md index 8dff9f8ce58..43bcc902f67 100644 --- a/docusaurus/docs/fetching-data-with-ajax-requests.md +++ b/docusaurus/docs/fetching-data-with-ajax-requests.md @@ -6,11 +6,11 @@ sidebar_label: Fetching Data React doesn't prescribe a specific approach to data fetching, but people commonly use either a library like [axios](https://github.com/axios/axios) or the [`fetch()` API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) provided by the browser. -The global `fetch` function allows you to easily make AJAX requests. It takes in a URL as an input and returns a `Promise` that resolves to a `Response` object. You can find more information about `fetch` [here](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch). +The global `fetch` function allows you to make AJAX requests. It takes in a URL as an input and returns a `Promise` that resolves to a `Response` object. You can find more information about `fetch` [here](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch). A Promise represents the eventual result of an asynchronous operation, you can find more information about Promises [here](https://www.promisejs.org/) and [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). Both axios and `fetch()` use Promises under the hood. You can also use the [`async / await`](https://davidwalsh.name/async-await) syntax to reduce the callback nesting. Make sure the [`fetch()` API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) are available in your target audience's browsers. -For example, support in Internet Explorer requires a [polyfill](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md). +For example, support in Internet Explorer requires a [polyfill](https://github.com/facebook/create-react-app/blob/main/packages/react-app-polyfill/README.md). You can learn more about making AJAX requests from React components in [the FAQ entry on the React website](https://reactjs.org/docs/faq-ajax.html). diff --git a/docusaurus/docs/folder-structure.md b/docusaurus/docs/folder-structure.md index 3701132d9f9..f135b635164 100644 --- a/docusaurus/docs/folder-structure.md +++ b/docusaurus/docs/folder-structure.md @@ -29,7 +29,7 @@ For the project to build, **these files must exist with exact filenames**: You can delete or rename the other files. -You may create subdirectories inside `src`. For faster rebuilds, only files inside `src` are processed by Webpack. You need to **put any JS and CSS files inside `src`**, otherwise Webpack won’t see them. +You may create subdirectories inside `src`. For faster rebuilds, only files inside `src` are processed by webpack. You need to **put any JS and CSS files inside `src`**, otherwise webpack won’t see them. Only files inside `public` can be used from `public/index.html`. Read instructions below for using assets from JavaScript and HTML. diff --git a/docusaurus/docs/getting-started.md b/docusaurus/docs/getting-started.md index 8704404a20c..ef7da3006f0 100644 --- a/docusaurus/docs/getting-started.md +++ b/docusaurus/docs/getting-started.md @@ -14,32 +14,34 @@ cd my-app npm start ``` +> 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` or `yarn global remove create-react-app` to ensure that `npx` always uses the latest version. + _([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_ -Then open [http://localhost:3000/](http://localhost:3000/) to see your app. +Then open [http://localhost:3000/](http://localhost:3000/) to see your app. When you’re ready to deploy to production, create a minified bundle with `npm run build`.

-npm start +npm start

### Get Started Immediately -You **don’t** need to install or configure tools like Webpack or Babel. They are preconfigured and hidden so that you can focus on the code. +You **don’t** need to install or configure tools like webpack or Babel. They are preconfigured and hidden so that you can focus on the code. -Just create a project, and you’re good to go. +Create a project, and you’re good to go. ## Creating an App -**You’ll need to have Node >= 6 on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to easily switch Node versions between different projects. +**You’ll need to have Node >= 14 on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to switch Node versions between different projects. To create a new app, you may choose one of the following methods: ### npx ```sh -npx create-react-app my-app +npx create-react-app@latest my-app ``` _([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_ @@ -60,6 +62,43 @@ yarn create react-app my-app _`yarn create` is available in Yarn 0.25+_ +### Selecting a template + +You can now optionally start a new app from a template by appending `--template [template-name]` to the creation command. + +If you don't select a template, we'll create your project with our base template. + +Templates are always named in the format `cra-template-[template-name]`, however you only need to provide the `[template-name]` to the creation command. + +```sh +npx create-react-app my-app --template [template-name] +``` + +> You can find a list of available templates by searching for ["cra-template-\*"](https://www.npmjs.com/search?q=cra-template-*) on npm. + +Our [Custom Templates](custom-templates.md) documentation describes how you can build your own template. + +#### Creating a TypeScript app + +You can start a new TypeScript app using templates. To use our provided TypeScript template, append `--template typescript` to the creation command. + +```sh +npx create-react-app my-app --template typescript +``` + +If you already have a project and would like to add TypeScript, see our [Adding TypeScript](adding-typescript.md) documentation. + +### Selecting a package manager + +When you create a new app, the CLI will use [npm](https://docs.npmjs.com) or [Yarn](https://yarnpkg.com/) to install dependencies, depending on which tool you use to run `create-react-app`. For example: + +```sh +# Run this to use npm +npx create-react-app my-app +# Or run this to use yarn +yarn create react-app my-app +``` + ## Output Running any of these commands will create a directory called `my-app` inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies: @@ -73,7 +112,10 @@ my-app ├── public │ ├── favicon.ico │ ├── index.html -│ └── manifest.json +│ ├── logo192.png +│ ├── logo512.png +│ ├── manifest.json +│ └── robots.txt └── src ├── App.css ├── App.js @@ -81,10 +123,11 @@ my-app ├── index.css ├── index.js ├── logo.svg - └── serviceWorker.js + ├── serviceWorker.js + └── setupTests.js ``` -No configuration or complicated folder structures, just the files you need to build your app. Once the installation is done, you can open your project folder: +No configuration or complicated folder structures, only the files you need to build your app. Once the installation is done, you can open your project folder: ```sh cd my-app @@ -101,14 +144,14 @@ Runs the app in development mode. Open [http://localhost:3000](http://localhost: The page will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console.

-Build errors +Build errors

### `npm test` or `yarn test` Runs the test watcher in an interactive mode. By default, runs tests related to files changed since the last commit. -[Read more about testing](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests). +[Read more about testing](running-tests.md). ### `npm run build` or `yarn build` diff --git a/docusaurus/docs/importing-a-component.md b/docusaurus/docs/importing-a-component.md index 52767005c08..7f23cb9c7d5 100644 --- a/docusaurus/docs/importing-a-component.md +++ b/docusaurus/docs/importing-a-component.md @@ -3,8 +3,9 @@ id: importing-a-component title: Importing a Component --- -This project setup supports ES6 modules thanks to Webpack.
-While you can still use `require()` and `module.exports`, we encourage you to use [`import` and `export`](http://exploringjs.com/es6/ch_modules.html) instead. +This project setup supports ES6 modules thanks to webpack. + +While you can still use `require()` and `module.exports`, we encourage you to use [`import` and `export`](https://exploringjs.com/es6/ch_modules.html) instead. For example: @@ -37,7 +38,7 @@ class DangerButton extends Component { export default DangerButton; ``` -Be aware of the [difference between default and named exports](http://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281). It is a common source of mistakes. +Be aware of the [difference between default and named exports](https://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281). It is a common source of mistakes. We suggest that you stick to using default imports and exports when a module only exports a single thing (for example, a component). That’s what you get when you use `export default Button` and `import Button from './Button'`. @@ -45,6 +46,31 @@ Named exports are useful for utility modules that export several functions. A mo Learn more about ES6 modules: -- [When to use the curly braces?](http://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281) -- [Exploring ES6: Modules](http://exploringjs.com/es6/ch_modules.html) +- [When to use the curly braces?](https://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281) +- [Exploring ES6: Modules](https://exploringjs.com/es6/ch_modules.html) - [Understanding ES6: Modules](https://leanpub.com/understandinges6/read#leanpub-auto-encapsulating-code-with-modules) + +## Absolute Imports + +You can configure your application to support importing modules using absolute paths. This can be done by configuring a `jsconfig.json` or `tsconfig.json` file in the root of your project. If you're using TypeScript in your project, you will already have a `tsconfig.json` file. + +Below is an example `jsconfig.json` file for a JavaScript project. You can create the file if it doesn't already exist: + +```json +{ + "compilerOptions": { + "baseUrl": "src" + }, + "include": ["src"] +} +``` + +If you're using TypeScript, you can configure the `baseUrl` setting inside the `compilerOptions` of your project's `tsconfig.json` file. + +Now that you've configured your project to support absolute imports, if you want to import a module located at `src/components/Button.js`, you can import the module like so: + +```js +import Button from 'components/Button'; +``` + +For more information on these configuration files, see the [jsconfig.json reference](https://code.visualstudio.com/docs/languages/jsconfig) and [tsconfig.json reference](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) documentation. diff --git a/docusaurus/docs/installing-a-dependency.md b/docusaurus/docs/installing-a-dependency.md index 6e356315ab2..07559840a6e 100644 --- a/docusaurus/docs/installing-a-dependency.md +++ b/docusaurus/docs/installing-a-dependency.md @@ -15,4 +15,4 @@ Alternatively you may use `yarn`: yarn add react-router-dom ``` -This works for any library, not just `react-router-dom`. +This works for any library, not only `react-router-dom`. diff --git a/docusaurus/docs/integrating-with-an-api-backend.md b/docusaurus/docs/integrating-with-an-api-backend.md index bae06982988..af4da848481 100644 --- a/docusaurus/docs/integrating-with-an-api-backend.md +++ b/docusaurus/docs/integrating-with-an-api-backend.md @@ -23,3 +23,7 @@ You can find the companion GitHub repository [here](https://github.com/fullstack It allows creating hypermedia and GraphQL APIs in minutes. It is shipped with an official Progressive Web App generator as well as a dynamic administration interface, both built for Create React App. Check out [this tutorial](https://api-platform.com/docs/distribution). + +## C# (ASP.NET Core) + +ASP.NET Core has a React project template that uses Create React App. Check out [their documentation](https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/react). diff --git a/docusaurus/docs/loading-graphql-files.md b/docusaurus/docs/loading-graphql-files.md new file mode 100644 index 00000000000..aa72e5af475 --- /dev/null +++ b/docusaurus/docs/loading-graphql-files.md @@ -0,0 +1,69 @@ +--- +id: loading-graphql-files +title: Loading .graphql Files +sidebar_label: Loading .graphql Files +--- + +To load `.gql` and `.graphql` files, first install the [`graphql`](https://www.npmjs.com/package/graphql) and [`graphql.macro`](https://www.npmjs.com/package/graphql.macro) packages by running: + +```sh +npm install --save graphql graphql.macro +``` + +Alternatively you may use `yarn`: + +```sh +yarn add graphql graphql.macro +``` + +Then, whenever you want to load `.gql` or `.graphql` files, import the `loader` from the macro package: + +```js +import { loader } from 'graphql.macro'; + +const query = loader('./foo.graphql'); +``` + +And your results get automatically inlined! This means that if the file above, `foo.graphql`, contains the following: + +```graphql +query { + hello { + world + } +} +``` + +The previous example turns into: + +```javascript +const query = { + 'kind': 'Document', + 'definitions': [{ + ... + }], + 'loc': { + ... + 'source': { + 'body': '\\\\n query {\\\\n hello {\\\\n world\\\\n }\\\\n }\\\\n', + 'name': 'GraphQL request', + ... + } + } +}; +``` + +You can also use the `gql` template tag the same way you would use the non-macro version from `graphql-tag` package with the added benefit of inlined parsing results. + +```js +import { gql } from 'graphql.macro'; + +const query = gql` + query User { + user(id: 5) { + lastName + ...UserEntry1 + } + } +`; +``` diff --git a/docusaurus/docs/making-a-progressive-web-app.md b/docusaurus/docs/making-a-progressive-web-app.md index 23b43f551da..cc81c619d13 100644 --- a/docusaurus/docs/making-a-progressive-web-app.md +++ b/docusaurus/docs/making-a-progressive-web-app.md @@ -4,19 +4,49 @@ title: Making a Progressive Web App --- The production build has all the tools necessary to generate a first-class -[Progressive Web App](https://developers.google.com/web/progressive-web-apps/), -but **the offline/cache-first behavior is opt-in only**. By default, -the build process will generate a service worker file, but it will not be -registered, so it will not take control of your production web app. +[Progressive Web App](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps), +but **the offline/cache-first behavior is opt-in only**. + +Starting with Create React App 4, you can add a `src/service-worker.js` file to +your project to use the built-in support for +[Workbox](https://developers.google.com/web/tools/workbox/)'s +[`InjectManifest`](https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-webpack-plugin.InjectManifest) +plugin, which will +[compile](https://developers.google.com/web/tools/workbox/guides/using-bundlers) +your service worker and inject into it a list of URLs to +[precache](https://developers.google.com/web/tools/workbox/guides/precache-files). + +If you start a new project using one of the PWA [custom +templates](https://create-react-app.dev/docs/custom-templates/), you'll get a +`src/service-worker.js` file that serves as a good starting point for an +offline-first service worker: + +```sh +npx create-react-app my-app --template cra-template-pwa +``` + +The TypeScript equivalent is: + +```sh +npx create-react-app my-app --template cra-template-pwa-typescript +``` + +If you know that you won't be using service workers, or if you'd prefer to use a +different approach to creating your service worker, don't create a +`src/service-worker.js` file. The `InjectManifest` plugin won't be run in that +case. -In order to opt-in to the offline-first behavior, developers should look for the -following in their [`src/index.js`](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/src/index.js) file: +In addition to creating your local `src/service-worker.js` file, it needs to be +registered before it will be used. In order to opt-in to the offline-first +behavior, developers should look for the following in their +[`src/index.js`](https://github.com/cra-template/pwa/blob/master/packages/cra-template-pwa/template/src/index.js) +file: ```js // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: http://bit.ly/CRA-PWA -serviceWorker.unregister(); +// Learn more about service workers: https://cra.link/PWA +serviceWorkerRegistration.unregister(); ``` As the comment states, switching `serviceWorker.unregister()` to @@ -24,23 +54,59 @@ As the comment states, switching `serviceWorker.unregister()` to ## Why Opt-in? -Offline-first Progressive Web Apps are faster and more reliable than traditional web pages, and provide an engaging mobile experience: +Offline-first Progressive Web Apps are faster and more reliable than traditional +web pages, and provide an engaging mobile experience: + +- All static site assets that are a part of your `webpack` build are cached so + that your page loads fast on subsequent visits, regardless of network + connectivity (such as 2G or 3G). Updates are downloaded in the background. +- Your app will work regardless of network state, even if offline. This means + your users will be able to use your app at 10,000 feet and on the subway. +- On mobile devices, your app can be added directly to the user's home screen, + app icon and all. This eliminates the need for the app store. + +However, they [can make debugging deployments more +challenging](https://github.com/facebook/create-react-app/issues/2398). + +The +[`workbox-webpack-plugin`](https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/) +is integrated into production configuration, and it will take care of compiling +a service worker file that will automatically precache all of your +`webpack`-generated assets and keep them up to date as you deploy updates. The +service worker will use a [cache-first +strategy](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-falling-back-to-network) +for handling all requests for `webpack`-generated assets, including [navigation +requests](https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading#first_what_are_navigation_requests) +for your HTML, ensuring that your web app is consistently fast, even on a slow +or unreliable network. -- All static site assets are cached so that your page loads fast on subsequent visits, regardless of network connectivity (such as 2G or 3G). Updates are downloaded in the background. -- Your app will work regardless of network state, even if offline. This means your users will be able to use your app at 10,000 feet and on the subway. -- On mobile devices, your app can be added directly to the user's home screen, app icon and all. This eliminates the need for the app store. +Note: Resources that are not generated by `webpack`, such as static files that are +copied over from your local +[`public/` directory](https://github.com/cra-template/pwa/tree/master/packages/cra-template-pwa/template/public/) +or third-party resources, will not be precached. You can optionally set up Workbox +[routes](https://developers.google.com/web/tools/workbox/guides/route-requests) +to apply the runtime caching strategy of your choice to those resources. + +## Customization + +Starting with Create React App 4, you have full control over customizing the +logic in this service worker, by creating your own `src/service-worker.js` file, +or customizing the one added by the `cra-template-pwa` (or +`cra-template-pwa-typescript`) template. You can use [additional +modules](https://developers.google.com/web/tools/workbox/modules) from the +Workbox project, add in a push notification library, or remove some of the +default caching logic. The one requirement is that you keep `self.__WB_MANIFEST` +somewhere in your file, as the Workbox compilation plugin checks for this value +when generating a manifest of URLs to precache. If you would prefer not to use +precaching, you can assign `self.__WB_MANIFEST` to a variable that will be +ignored, like: -However, they [can make debugging deployments more challenging](https://github.com/facebook/create-react-app/issues/2398) so, starting with Create React App 2, service workers are opt-in. +```js +// eslint-disable-next-line no-restricted-globals +const ignored = self.__WB_MANIFEST; -The [`workbox-webpack-plugin`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) -is integrated into production configuration, -and it will take care of generating a service worker file that will automatically -precache all of your local assets and keep them up to date as you deploy updates. -The service worker will use a [cache-first strategy](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-falling-back-to-network) -for handling all requests for local assets, including -[navigation requests](https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading#first_what_are_navigation_requests) -for your HTML, ensuring that your web app is consistently fast, even on a slow -or unreliable network. +// Your custom service worker code goes here. +``` ## Offline-First Considerations @@ -61,43 +127,44 @@ following into account: app works offline!" message) and also let them know when the service worker has fetched the latest updates that will be available the next time they load the page (showing a "New content is available once existing tabs are closed." message). Showing - this messages is currently left as an exercise to the developer, but as a - starting point, you can make use of the logic included in [`src/serviceWorker.js`](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/src/serviceWorker.js), which + these messages is currently left as an exercise to the developer, but as a + starting point, you can make use of the logic included in [`src/serviceWorkerRegistration.js`](https://github.com/cra-template/pwa/blob/master/packages/cra-template-pwa/template/src/serviceWorkerRegistration.js), which demonstrates which service worker lifecycle events to listen for to detect each - scenario, and which as a default, just logs appropriate messages to the + scenario, and which as a default, only logs appropriate messages to the JavaScript console. 1. Service workers [require HTTPS](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers#you_need_https), although to facilitate local testing, that policy - [does not apply to `localhost`](http://stackoverflow.com/questions/34160509/options-for-testing-service-workers-via-http/34161385#34161385). + [does not apply to `localhost`](https://stackoverflow.com/questions/34160509/options-for-testing-service-workers-via-http/34161385#34161385). If your production web server does not support HTTPS, then the service worker registration will fail, but the rest of your web app will remain functional. -1. The service worker is only enabled in the [production environment](/docs/deployment), +1. The service worker is only enabled in the [production environment](deployment.md), e.g. the output of `npm run build`. It's recommended that you do not enable an offline-first service worker in a development environment, as it can lead to frustration when previously cached assets are used and do not include the latest changes you've made locally. 1. If you _need_ to test your offline-first service worker locally, build - the application (using `npm run build`) and run a simple http server from your + the application (using `npm run build`) and run a standard http server from your build directory. After running the build script, `create-react-app` will give - instructions for one way to test your production build locally and the [deployment instructions](/docs/deployment) have + instructions for one way to test your production build locally and the [deployment instructions](deployment.md) have instructions for using other methods. _Be sure to always use an incognito window to avoid complications with your browser cache._ 1. By default, the generated service worker file will not intercept or cache any - cross-origin traffic, like HTTP [API requests](/docs/integrating-with-an-api-backend), - images, or embeds loaded from a different domain. + cross-origin traffic, like HTTP [API requests](integrating-with-an-api-backend.md), + images, or embeds loaded from a different domain. Starting with Create + React App 4, this can be customized, as explained above. ## Progressive Web App Metadata The default configuration includes a web app manifest located at -[`public/manifest.json`](public/manifest.json), that you can customize with +[`public/manifest.json`](https://github.com/cra-template/pwa/blob/master/packages/cra-template-pwa/template/public/manifest.json), that you can customize with details specific to your web application. When a user adds a web app to their homescreen using Chrome or Firefox on -Android, the metadata in [`manifest.json`](public/manifest.json) determines what +Android, the metadata in [`manifest.json`](https://github.com/cra-template/pwa/blob/master/packages/cra-template-pwa/template/public/manifest.json) determines what icons, names, and branding colors to use when the web app is displayed. [The Web App Manifest guide](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/) provides more context about what each field means, and how your customizations diff --git a/docusaurus/docs/measuring-performance.md b/docusaurus/docs/measuring-performance.md new file mode 100644 index 00000000000..a41635cbe40 --- /dev/null +++ b/docusaurus/docs/measuring-performance.md @@ -0,0 +1,65 @@ +--- +id: measuring-performance +title: Measuring Performance +--- + +By default, Create React App includes a performance relayer that allows you to measure and analyze +the performance of your application using different metrics. + +To measure any of the supported metrics, you only need to pass a function into the `reportWebVitals` +function in `index.js`: + +```js +reportWebVitals(console.log); +``` + +This function is fired when the final values for any of the metrics have finished calculating on the +page. You can use it to log any of the results to the console or send to a particular endpoint. + +## Web Vitals + +[Web Vitals](https://web.dev/vitals/) are a set of useful metrics that aim to capture the user +experience of a web page. In Create React App, a third-party library is used to measure these +metrics ([web-vitals](https://github.com/GoogleChrome/web-vitals)). + +To understand more about the object returned to the function when a metric value is calculated, +refer to the [documentation](https://github.com/GoogleChrome/web-vitals/#types). The [Browser +Support](https://github.com/GoogleChrome/web-vitals/#browser-support) section also explains which browsers are supported. + +## Sending results to analytics + +With the `reportWebVitals` function, you can send any of results to an analytics endpoint to measure and track real user performance on your site. For example: + +```js +function sendToAnalytics(metric) { + const body = JSON.stringify(metric); + const url = 'https://example.com/analytics'; + + // Use `navigator.sendBeacon()` if available, falling back to `fetch()` + if (navigator.sendBeacon) { + navigator.sendBeacon(url, body); + } else { + fetch(url, { body, method: 'POST', keepalive: true }); + } +} + +reportWebVitals(sendToAnalytics); +``` + +> **Note:** If you use Google Analytics, use the `id` value to make it easier to construct metric distributions manually (to calculate percentiles, etc…). +> +> ```js +> function sendToAnalytics({ id, name, value }) { +> ga('send', 'event', { +> eventCategory: 'Web Vitals', +> eventAction: name, +> eventValue: Math.round(name === 'CLS' ? value * 1000 : value), // values must be integers +> eventLabel: id, // id unique to current page load +> nonInteraction: true, // avoids affecting bounce rate +> }); +> } +> +> reportWebVitals(sendToAnalytics); +> ``` +> +> Read more about sending results to Google Analytics [here](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics). diff --git a/docusaurus/docs/post-processing-css.md b/docusaurus/docs/post-processing-css.md index 3fb4556a836..1a456b9f1c5 100644 --- a/docusaurus/docs/post-processing-css.md +++ b/docusaurus/docs/post-processing-css.md @@ -39,5 +39,6 @@ becomes this: If you need to disable autoprefixing for some reason, [follow this section](https://github.com/postcss/autoprefixer#disabling). [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) prefixing is disabled by default, but it will **not** strip manual prefixing. -If you'd like to opt-in to CSS Grid prefixing, [first familiarize yourself about its limitations](https://github.com/postcss/autoprefixer#does-autoprefixer-polyfill-grid-layout-for-ie).
-To enable CSS Grid prefixing, add `/* autoprefixer grid: on */` to the top of your CSS file. +If you'd like to opt-in to CSS Grid prefixing, [first familiarize yourself about its limitations](https://github.com/postcss/autoprefixer#does-autoprefixer-polyfill-grid-layout-for-ie). + +To enable CSS Grid prefixing, add `/* autoprefixer grid: autoplace */` to the top of your CSS file. diff --git a/docusaurus/docs/pre-rendering-into-static-html-files.md b/docusaurus/docs/pre-rendering-into-static-html-files.md index f9bab58190e..5551745f648 100644 --- a/docusaurus/docs/pre-rendering-into-static-html-files.md +++ b/docusaurus/docs/pre-rendering-into-static-html-files.md @@ -4,7 +4,7 @@ title: Pre-Rendering into Static HTML Files sidebar_label: Pre-Rendering Static HTML --- -If you’re hosting your `build` with a static hosting provider you can use [react-snapshot](https://www.npmjs.com/package/react-snapshot) or [react-snap](https://github.com/stereobooster/react-snap) to generate HTML pages for each route, or relative link, in your application. These pages will then seamlessly become active, or “hydrated”, when the JavaScript bundle has loaded. +If you’re hosting your `build` with a static hosting provider you can use [react-snapshot](https://www.npmjs.com/package/react-snapshot) or [react-snap](https://www.npmjs.com/package/react-snap) to generate HTML pages for each route, or relative link, in your application. These pages will then seamlessly become active, or “hydrated”, when the JavaScript bundle has loaded. There are also opportunities to use this outside of static hosting, to take the pressure off the server when generating and caching routes. diff --git a/docusaurus/docs/production-build.md b/docusaurus/docs/production-build.md new file mode 100644 index 00000000000..8acb30fc9eb --- /dev/null +++ b/docusaurus/docs/production-build.md @@ -0,0 +1,36 @@ +--- +id: production-build +title: Creating a Production Build +--- + +`npm run build` creates a `build` directory with a production build of your app. Inside the `build/static` directory will be your JavaScript and CSS files. Each filename inside of `build/static` will contain a unique hash of the file contents. This hash in the file name enables [long term caching techniques](#static-file-caching). + +When running a production build of freshly created Create React App application, there are a number of `.js` files (called _chunks_) that are generated and placed in the `build/static/js` directory: + +`main.[hash].chunk.js` + +- This is your _application_ code. `App.js`, etc. + +`[number].[hash].chunk.js` + +- These files can either be _vendor_ code, or [code splitting chunks](code-splitting.md). _Vendor_ code includes modules that you've imported from within `node_modules`. One of the potential advantages with splitting your _vendor_ and _application_ code is to enable [long term caching techniques](#static-file-caching) to improve application loading performance. Since _vendor_ code tends to change less often than the actual _application_ code, the browser will be able to cache them separately, and won't re-download them each time the app code changes. + +`runtime-main.[hash].js` + +- This is a small chunk of [webpack runtime](https://webpack.js.org/configuration/optimization/#optimization-runtimechunk) logic which is used to load and run your application. The contents of this will be embedded in your `build/index.html` file by default to save an additional network request. You can opt out of this by specifying `INLINE_RUNTIME_CHUNK=false` as documented in our [advanced configuration](advanced-configuration.md), which will load this chunk instead of embedding it in your `index.html`. + +If you're using [code splitting](code-splitting.md) to split up your application, this will create additional chunks in the `build/static` folder as well. + +## Static File Caching + +Each file inside of the `build/static` directory will have a unique hash appended to the filename that is generated based on the contents of the file, which allows you to use [aggressive caching techniques](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#invalidating_and_updating_cached_responses) to avoid the browser re-downloading your assets if the file contents haven't changed. If the contents of a file changes in a subsequent build, the filename hash that is generated will be different. + +To deliver the best performance to your users, it's best practice to specify a `Cache-Control` header for `index.html`, as well as the files within `build/static`. This header allows you to control the length of time that the browser as well as CDNs will cache your static assets. If you aren't familiar with what `Cache-Control` does, see [this article](https://jakearchibald.com/2016/caching-best-practices/) for a great introduction. + +Using `Cache-Control: max-age=31536000` for your `build/static` assets, and `Cache-Control: no-cache` for everything else is a safe and effective starting point that ensures your user's browser will always check for an updated `index.html` file, and will cache all of the `build/static` files for one year. Note that you can use the one year expiration on `build/static` safely because the file contents hash is embedded into the filename. + +## Profiling + +ReactDOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small +additional overhead it is opt-in for production mode. You can opt-in by using the `--profile` flag. Use `npm run build -- --profile` or `yarn build --profile` to enable profiling in the production build. See the [React docs](https://reactjs.org/docs/optimizing-performance.html#profiling-components-with-the-devtools-profiler) for details about profiling +using the React DevTools. diff --git a/docusaurus/docs/proxying-api-requests-in-development.md b/docusaurus/docs/proxying-api-requests-in-development.md index fe238bb1a18..11cf1198265 100644 --- a/docusaurus/docs/proxying-api-requests-in-development.md +++ b/docusaurus/docs/proxying-api-requests-in-development.md @@ -6,26 +6,25 @@ sidebar_label: Proxying in Development > Note: this feature is available with `react-scripts@0.2.3` and higher. -People often serve the front-end React app from the same host and port as their backend implementation.
+People often serve the front-end React app from the same host and port as their backend implementation. + For example, a production setup might look like this after the app is deployed: -``` -/ - static server returns index.html with React app -/todos - static server returns index.html with React app -/api/todos - server handles any /api/* requests using the backend implementation -``` + / - static server returns index.html with React app + /todos - static server returns index.html with React app + /api/todos - server handles any /api/* requests using the backend implementation Such setup is **not** required. However, if you **do** have a setup like this, it is convenient to write requests like `fetch('/api/todos')` without worrying about redirecting them to another host or port during development. To tell the development server to proxy any unknown requests to your API server in development, add a `proxy` field to your `package.json`, for example: -```js +```json "proxy": "http://localhost:4000", ``` This way, when you `fetch('/api/todos')` in development, the development server will recognize that it’s not a static asset, and will proxy your request to `http://localhost:4000/api/todos` as a fallback. The development server will **only** attempt to send requests without `text/html` in its `Accept` header to the proxy. -Conveniently, this avoids [CORS issues](http://stackoverflow.com/questions/21854516/understanding-ajax-cors-and-security-considerations) and error messages like this in development: +Conveniently, this avoids [CORS issues](https://stackoverflow.com/questions/21854516/understanding-ajax-cors-and-security-considerations) and error messages like this in development: ``` Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. @@ -33,12 +32,13 @@ Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow- Keep in mind that `proxy` only has effect in development (with `npm start`), and it is up to you to ensure that URLs like `/api/todos` point to the right thing in production. You don’t have to use the `/api` prefix. Any unrecognized request without a `text/html` accept header will be redirected to the specified `proxy`. -The `proxy` option supports HTTP, HTTPS and WebSocket connections.
+The `proxy` option supports HTTP, HTTPS and WebSocket connections. + If the `proxy` option is **not** flexible enough for you, alternatively you can: - [Configure the proxy yourself](#configuring-the-proxy-manually) -- Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)). -- Use [environment variables](/docs/adding-custom-environment-variables) to inject the right server host and port into your app. +- Enable CORS on your server ([here’s how to do it for Express](https://enable-cors.org/server_expressjs.html)). +- Use [environment variables](adding-custom-environment-variables.md) to inject the right server host and port into your app. ## "Invalid Host Header" Errors After Configuring Proxy @@ -76,7 +76,7 @@ You can use this feature in conjunction with the `proxy` property in `package.js First, install `http-proxy-middleware` using npm or Yarn: -```bash +```sh $ npm install http-proxy-middleware --save $ # or $ yarn add http-proxy-middleware @@ -85,9 +85,9 @@ $ yarn add http-proxy-middleware Next, create `src/setupProxy.js` and place the following contents in it: ```js -const proxy = require('http-proxy-middleware'); +const { createProxyMiddleware } = require('http-proxy-middleware'); -module.exports = function(app) { +module.exports = function (app) { // ... }; ``` @@ -95,10 +95,16 @@ module.exports = function(app) { You can now register proxies as you wish! Here's an example using the above `http-proxy-middleware`: ```js -const proxy = require('http-proxy-middleware'); - -module.exports = function(app) { - app.use(proxy('/api', { target: 'http://localhost:5000/' })); +const { createProxyMiddleware } = require('http-proxy-middleware'); + +module.exports = function (app) { + app.use( + '/api', + createProxyMiddleware({ + target: 'http://localhost:5000', + changeOrigin: true, + }) + ); }; ``` diff --git a/docusaurus/docs/running-tests.md b/docusaurus/docs/running-tests.md index ea1b32579f0..281995868f9 100644 --- a/docusaurus/docs/running-tests.md +++ b/docusaurus/docs/running-tests.md @@ -3,11 +3,11 @@ id: running-tests title: Running Tests --- -> Note: this feature is available with `react-scripts@0.3.0` and higher.
+> Note: this feature is available with `react-scripts@0.3.0` and higher. -> [Read the migration guide to learn how to enable it in older projects!](https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md#migrating-from-023-to-030) +> [Read the migration guide to learn how to enable it in older projects!](https://github.com/facebook/create-react-app/blob/main/CHANGELOG-0.x.md#migrating-from-023-to-030) -Create React App uses [Jest](https://facebook.github.io/jest/) as its test runner. To prepare for this integration, we did a [major revamp](https://facebook.github.io/jest/blog/2016/09/01/jest-15.html) of Jest so if you heard bad things about it years ago, give it another try. +Create React App uses [Jest](https://jestjs.io/) as its test runner. To prepare for this integration, we did a [major revamp](https://jestjs.io/blog/2016/09/01/jest-15.html) of Jest so if you heard bad things about it years ago, give it another try. Jest is a Node-based runner. This means that the tests always run in a Node environment and not in a real browser. This lets us enable fast iteration speed and prevent flakiness. @@ -25,15 +25,17 @@ Jest will look for test files with any of the following popular naming conventio The `.test.js` / `.spec.js` files (or the `__tests__` folders) can be located at any depth under the `src` top level folder. -We recommend to put the test files (or `__tests__` folders) next to the code they are testing so that relative imports appear shorter. For example, if `App.test.js` and `App.js` are in the same folder, the test just needs to `import App from './App'` instead of a long relative path. Colocation also helps find tests more quickly in larger projects. +We recommend to put the test files (or `__tests__` folders) next to the code they are testing so that relative imports appear shorter. For example, if `App.test.js` and `App.js` are in the same folder, the test only needs to `import App from './App'` instead of a long relative path. Collocation also helps find tests more quickly in larger projects. ## Command Line Interface -When you run `npm test`, Jest will launch in the watch mode. Every time you save a file, it will re-run the tests, just like `npm start` recompiles the code. +When you run `npm test`, Jest will launch in watch mode\*. Every time you save a file, it will re-run the tests, like how `npm start` recompiles the code. The watcher includes an interactive command-line interface with the ability to run all tests, or focus on a search pattern. It is designed this way so that you can keep it open and enjoy fast re-runs. You can learn the commands from the “Watch Usage” note that the watcher prints after every run: -![Jest watch mode](http://facebook.github.io/jest/img/blog/15-watch.gif) +![Jest watch mode](https://jestjs.io/img/blog/15-watch.gif) + +> \*Although we recommend running your tests in watch mode during development, you can disable this behavior by passing in the `--watchAll=false` flag. In most CI environments, this is handled for you (see [On CI servers](#on-ci-servers)). ## Version Control Integration @@ -58,23 +60,24 @@ it('sums numbers', () => { }); ``` -All `expect()` matchers supported by Jest are [extensively documented here](https://facebook.github.io/jest/docs/en/expect.html#content).
-You can also use [`jest.fn()` and `expect(fn).toBeCalled()`](https://facebook.github.io/jest/docs/en/expect.html#tohavebeencalled) to create “spies” or mock functions. +All `expect()` matchers supported by Jest are [extensively documented here](https://jestjs.io/docs/expect). + +You can also use [`jest.fn()` and `expect(fn).toBeCalled()`](https://jestjs.io/docs/expect#tohavebeencalled) to create “spies” or mock functions. ## Testing Components There is a broad spectrum of component testing techniques. They range from a “smoke test” verifying that a component renders without throwing, to shallow rendering and testing some of the output, to full rendering and testing component lifecycle and state changes. -Different projects choose different testing tradeoffs based on how often components change, and how much logic they contain. If you haven’t decided on a testing strategy yet, we recommend that you start with creating simple smoke tests for your components: +Different projects choose different testing tradeoffs based on how often components change, and how much logic they contain. If you haven’t decided on a testing strategy yet, we recommend that you start with creating basic smoke tests for your components: ```js import React from 'react'; -import ReactDOM from 'react-dom'; +import ReactDOMClient from 'react-dom/client'; import App from './App'; it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(, div); + ReactDOMClient.createRoot(div).render(); }); ``` @@ -82,141 +85,50 @@ This test mounts a component and makes sure that it didn’t throw during render When you encounter bugs caused by changing components, you will gain a deeper insight into which parts of them are worth testing in your application. This might be a good time to introduce more specific tests asserting specific expected output or behavior. -### Option 1: Shallow Rendering - -If you’d like to test components in isolation from the child components they render, we recommend using [`shallow()` rendering API](http://airbnb.io/enzyme/docs/api/shallow.html) from [Enzyme](http://airbnb.io/enzyme/). To install it, run: +### React Testing Library -```sh -npm install --save enzyme enzyme-adapter-react-16 react-test-renderer -``` - -Alternatively you may use `yarn`: - -```sh -yarn add enzyme enzyme-adapter-react-16 react-test-renderer -``` - -As of Enzyme 3, you will need to install Enzyme along with an Adapter corresponding to the version of React you are using. (The examples above use the adapter for React 16.) - -The adapter will also need to be configured in your [global setup file](#initializing-test-environment): - -### `src/setupTests.js` - -```js -import { configure } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; - -configure({ adapter: new Adapter() }); -``` - -> Note: When using TypeScript with Babel, all your files need to have at least one export, otherwise you will get the error `Cannot compile namespaces when the '--isolatedModules' flag is provided.`. To fix this, you can add `export default undefined` to `src/setupTests.ts`. - -> Note: Keep in mind that if you decide to "eject" before creating `src/setupTests.js`, the resulting `package.json` file won't contain any reference to it. [Read here](#initializing-test-environment) to learn how to add this after ejecting. - -Now you can write a smoke test with it: - -```js -import React from 'react'; -import { shallow } from 'enzyme'; -import App from './App'; - -it('renders without crashing', () => { - shallow(); -}); -``` - -Unlike the previous smoke test using `ReactDOM.render()`, this test only renders `` and doesn’t go deeper. For example, even if `` itself renders a `