From 102411c2866d6c400dbc60a776779e33c6235da4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Mo=C4=8Dko=C5=99?= Date: Wed, 19 Feb 2020 18:30:28 +0100 Subject: [PATCH] Feat/cra update (#204) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Publish - babel-plugin-named-asset-import@0.3.4 - babel-preset-react-app@9.0.2 - confusing-browser-globals@1.0.9 - create-react-app@3.1.2 - eslint-config-react-app@5.0.2 - react-app-polyfill@1.0.3 - react-dev-utils@9.0.4 - react-error-overlay@6.0.2 - react-scripts@3.1.2 * Update runtime chunk name separator in docs (#7705) * Remove 'shortcut' link type before 'icon' (#7707) * Guard polyfills against window possibly being undefined (#7205) * Enable .eslintignore with extend flag (#7562) * Add "entrypoints" key to asset manifest (#7721) * Update adding flow documentation (#7731) * set output.globalObject to 'this' (#7742) Closes #7741 * Update logic and log errors for EXTEND_ESLINT (#7530) * update list of supported jest config overrides (#7601) * Upgrade Webpack version (#7740) * Close br tags in template README files (#7668) * Fix variable name casing in fileTransform (#7752) * Documentation typo fix (#7757) * Fix linting error when using rest props (#7754) * Add TSC_COMPILE_ON_ERROR setting (#6931) * Remove switch case (#7729) * docs: note that v2 to v3 migration may require deletion of node_modules (#7302) * Stop hiding the column number of ESLint errors (#6980) * Support setting baseUrl to root directory (#7755) * Use installing package manager in README (#7687) * Support production profiling with React Developer Tools (#7737) * Added the alias for profiling and output change to keep the classNames and functionNames for human readbility * defined isEnvProductionProfile with other isEnv checks * moved the keep_classnames and keep_fnames to terserOptions scope * resolve merge conflict for yarn.lock.cache * revert yarn.lock.cache to master yarn.lock.cache - git checkout origin/master -- packages/create-react-app/yarn.lock.cached * Comment and Boolean Check - I clarified the comment and specified the use case - Changed the environment check to check for the specific true rather than the assumed primitive value as before. * Replaced env with flag - Per suggestion --profile flag used instead of env variable PROFILE_APP * documentation in available scripts section with suggested information * resolved a local git issue. Fixed documentation error. * moved documentation to suggested file - Added a brief summary of profiling in available scripts section. The summary references the production-build document. Which is the file I moved the new documentation into under a new Header for production support. * Update production-build.md Co-authored-by: Ian Sutherland * Prepare 3.2.0 release * Publish - create-react-app@3.2.0 - react-app-polyfill@1.0.4 - react-dev-utils@9.1.0 - react-error-overlay@6.0.3 - react-scripts@3.2.0 * Temporarily disable Windows in CI (#7773) * Add babel runtime version to transform-runtime plugin to reduce… (#7726) * Add Babel sourcemap to resolve VSCode debugging issues (#7022) * Fix process type in TypeScript template (#7796) * Account for browserslist environment variables (#7764) * Clarify dynamic import stage in docs (#7813) * Update adding-typescript.md (#7815) * Document how to use the .env file to enforce HTTPS (#7821) * Fix absolute paths issue in Jest (#7822) * Document correct default behavior for HOST var (#7823) * Fix grammar error in troubleshooting.md (#7824) * Upgrade to docusaurus 2 (#7785) * chore: upgrade to docusaurus 2 * address review * Update doc publishing instructions * Revert logo in templates (#7830) * feat: add additional Jest keys to whitelist (#7832) * Link to React documentation for code splitting (#7686) The official documentation offers a simpler way of achieving route based code splitting. * Add a note about .eslingignore files being respected (#7809) * added check for typescript template and unsupported node version (#7839) * added check for typescript template and unsupported node version * addressed code review feedback regarding syntax and spelling mistakes * Update getting-started.md (#7841) Update the initial project structure generated by create-react-app. * Link to ASP.NET Core docs (#7840) * Update readme gif links (#7849) * Update adding-bootstrap.md (#7853) typo fix * Move unused eslint webpack import into @remove-on-eject block (#7856) * 📖 DOC: Improvement (#7819) * Upgrade terser & enable parallel minification in wsl (#7857) * Add a GitHub Action that runs the build script (#7861) * Edit InterpolateHtmlPlugin hook (#6448) (#6449) * Fix notations of loopback addresses (#7474) * Add Service-Worker header to checkValidServiceWorker (#6753) * Add header to checkValidServiceWorker (ts) * Add header to checkValidServiceWorker * Add additional information for postcss errors (#6282) (#6352) * Add additional information for postcss errors * Add additional information for postcss errors (simplify) * Remove chunkname from postCSS compile error * Remove line number from postCSS compile error * Fix eslint complaints in build.js (#7870) * Add Alex to lint documentation (#7852) * Add Alex to lint documentation * Attempt to trigger GitHub Action * Configure Alex and update docs * More docs updates * Bump docusaurus 🦖 (#7874) * Dark scheme overlay (#7052) * Bump react (#7875) * Bump styling related loaders (#7876) * Remove alex precommit check (#7878) * Add template support (#7716) * Add template support * Update templates version check * Update TypeScript template README * Prepare 3.3.0 beta * If template name already starts with cra-template leave it alone (#7880) * Update prerelease publishing instructions * Upgrade packages and tweak config to adapt to new config format (#7814) Rebased again now with smaller changes in this one which will make it easier to revert in case of eventual regressions. * refactor: remove double coerce (#7882) * Add yarn.lock to .gitignore (#7789) * chore: Fix broken link for CRA deployment (#7897) * chore: Fix broken link for e2e README (#7896) * Add @testing-library to the default templates (#7881) * Add numeric separator support (#7817) * Update open (#7910) * Mark TypeScript as an optional peer dependency (#7860) * Add restoreMocks to supported jest config keys (#7921) * fix seperators typo (#7932) Its the little things that makes the big difference! 😁 Thanks * No spinning React logo if `prefers-reduced-motion` (#7931) * Made PRs welcome badge point to contributors guide (#7792) * Make JavaScript and TypeScript templates consistent (#7944) * Fix CI (#7951) * Add optional chaining and nullish coalescing operators support (#7438) * Add tests for optional chaining and null coalescing (#7952) * Upgrade jest-watch-typeahead (#7956) * Fix light background in docusaurus night mode (#7936) * Fix light background in docusaurus night mode Closes #7930 * Rename lightBackground to gettingStartedSection * Add placeholders where old template READMEs used to be (#7972) * Temporarily disable GitHub Actions (#7978) * Prepare 3.3.0 beta * Bump dependencies (#7986) * Support scoped templates (#7991) * Add contributors section to readme (#7995) * added e2e test for checking typescript template with unsupported node (#7844) * Unpin dependencies in react-app-polyfill (#7999) * Add scripts support to templates (#7989) * Override no-unused-expressions with the typescript-eslint version (#8003) Fixes issues with optional chaining * Prefix apple-touch-icon links with PUBLIC_URL. (#8005) * Bump webpack-dev-server (#7988) * Bump dependencies (#8024) * Re-enable GitHub Actions (#8029) * Update CHANGELOG * Update CODEOWNERS * Remove no-unexpected-multiline rule (#8039) * Add TypeScript peer dependency to react-scripts (#8038) * Update template docs (#8050) * Update template docs * Update custom-templates.md * Update custom-templates.md Co-authored-by: Ian Sutherland * Prepare 3.3.0 release * Update CHANGELOG * Publish - babel-plugin-named-asset-import@0.3.5 - babel-preset-react-app@9.1.0 - cra-template-typescript@1.0.0 - cra-template@1.0.0 - create-react-app@3.3.0 - eslint-config-react-app@5.1.0 - react-app-polyfill@1.0.5 - react-dev-utils@10.0.0 - react-error-overlay@6.0.4 - react-scripts@3.3.0 * webpackHotDev now uses wss when https is used (#8079) * Add custom-templates to docs sidebar (#8077) * Fix typo in CHANGELOG.md (#8080) * Remove error for @typescript-eslint/no-namespace (#7803) Declare namespaces are supported by babel now, and babel will throw with a nice error message for non-declare namespaces, so this rule is unnecessary. Closes #7651. * Fix CI build (#8122) * Fix CSS font-face minification (#8106) * Add slashes to WebSocket protocol URL (#8116) * Fix typo in comment: `?.` is right, not `.?` (#8124) This is just a comment fix. Actual optional chaining operator syntax is `?.`, not `.?`. * chore: update docusaurus & tweak site (#8111) * [Security] Update terser webpack plugin (#8102) * security: update terser webpack plugin * Add current version and bin location to --info output (#8168) Make the --info subcommand outuput the current version information and the location of the file being run. Our issue template tells users to provide the output of --info, so having the current version is incredibly helpful, especially since it doesn't necessarily match the globally installed version that envinfo outputs. Knowing the location helps us determine whether the running bin is globally installed or in the local node_modules. * Bump pkgUp (#8163) * Bump chalk (#8164) * Add link to Netlify in README * Bump internal dependencies (#8176) * Bump dependencies in react-dev-utils * Bump dependencies in react-app-polyfill * Bump dependencies in create-react-app * Bump dependencies in react-error-overlay * Bump dependencies in react-scripts * Bump react * Add package-runner note to readme (#8132) * Add package-runner note to readme * Add link to `yarn create` * Update PWA docs links to point to template package (#8147) * Minor refactors in create-react-app (#8178) - Remove templates version minimum stopgap. - Replace indexOf with more idiomatic alternatives. - Inline errorLogFilePatterns. - Alphabetize validFiles. - Simplify log file removal code. - Move unconditional console.log() call outside of isSafe. - Differentiate conflicting directories from files. - Document yarn version special case. - Inline printValidationResults. - Standardize checkAppName output on failure. - Add link for checkThatNpmCanReadCwd. Functionally the code should be exactly the same. * fix: proactively append to .gitignore during init (#8028) * Bump babel-plugin-tester and fix breaking changes (#8171) * Little typo (#8212) * Replace favicon in templates (#8194) The old favicon was the same as the official react documentation, which is a minor annoyance during development when trying to find the tab you want. The new favicon is just the old with inverted colors. Closes #7957 * Support shorthand scoped templates (#8298) * Allow additional package keys and add blacklist (#8082) (#8219) * Minor grammatical edit (#8293) * Update Dependencies (#8324) * Remove React.FC from Typescript template (#8177) This removes `React.FC` from the base template for a Typescript project. Long explanation for a small change: `React.FC` is unnecessary: it provides next to no benefits and has a few downsides. (See below.) I see a lot of beginners to TS+React using it, however, and I think that it's usage in this template is a contributing factor to that, as the prominence of this template makes it a de facto source of "best practice". ### Downsides to React.FC/React.FunctionComponent ##### Provides an implicit definition of `children` Defining a component with `React.FC` causes it to implicitly take `children` (of type `ReactNode`). It means that all components accept children, even if they're not supposed to, allowing code like: ```ts const App: React.FC = () => { /*... */ }; const Example = () => {
Unwanted children
 } ``` This isn't a run-time error, but it is a mistake and one that would be caught by Typescript if not for `React.FC`. ##### Doesn't support generics. I can define a generic component like: ```ts type GenericComponentProps = { prop: T callback: (t: T) => void } const GenericComponent = (props: GenericComponentProps) => {/*...*/} ``` But it's not possible when using `React.FC` - there's no way to preserve the unresolved generic `T` in the type returned by `React.FC`. ```ts const GenericComponent: React.FC = (props: GenericComponentProps) => {/*...*/} ``` ##### Makes "component as namespace pattern" more awkward. It's a somewhat popular pattern to use a component as a namespace for related components (usually children): ```jsx ``` This is possible, but awkward, with `React.FC`: ```tsx const Select: React.FC & { Item: React.FC } = (props) => {/* ... */ } Select.Item = (props) => { /*...*/ } ``` but "just works" without `React.FC`: ```tsx const Select = (props: SelectProps) => {/* ... */} Select.Item = (props) => { /*...*/ } ``` ##### Doesn't work correctly with defaultProps This is a fairly moot point as in both cases it's probably better to use ES6 default arguments, but... ```tsx type ComponentProps = { name: string; } const Component = ({ name }: ComponentProps) => (
{name.toUpperCase()} /* Safe since name is required */
); Component.defaultProps = { name: "John" }; const Example = () => () /* Safe to omit since name has a default value */ ``` This compiles correctly. Any approach with `React.FC` will be slightly wrong: either `React.FC<{name: string}>` will make the prop required by consumers, when it should be optional, or `React.FC<{name?: string}>` will cause `name.toUpperCase()` to be a type error. There's no way to replicate the "internally required, externally optional" behavior which is desired. ##### It's as long, or longer than the alternative: (especially longer if you use `FunctionalComponent`): Not a huge point, but it isn't even shorter to use `React.FC` ```ts const C1: React.FC = (props) => { } const C2 = (props: CProps) => {}; ``` ### Benefits of React.FC ##### Provides an explicit return type The only benefit I really see to `React.FC` (unless you think that implicit `children` is a good thing) is that it specifies the return type, which catches mistakes like: ```ts const Component = () => { return undefined; // components aren't allowed to return undefined, just `null` } ``` In practice, I think this is fine, as it'll be caught as soon as you try to use it: ```ts const Example = () => ; // Error here, due to Component returning the wrong thing ``` But even with explicit type annotations, `React.FC` still isn't saving very much boilerplate: ```ts const Component1 = (props: ComponentProps): ReactNode => { /*...*/ } const Component2: FC = (props) => { /*...*/ } ``` * Downgrade open from 7.0.0 to 6.4.0 (#8364) * Remove outdated babel plugins (#8353) Updates dependencies and removes babel plugins that are now covered by `@babel/preset-env`. Co-authored-by: hdineen * Add titleProp to SVGR ReactComponent type definition (#8099) * Sync dependencies babel config (#8120) * Update custom template docs with instructions for testing custom template locally (#8092) Co-authored-by: Ian Schmitz * Update setting-up-your-editor.md (#8247) `Auto Fix is enabled by default. Use the single string form.` warning is shown in `.vscode/settings.json` due to changes in vscode-eslint. As autoFix is set to default, object format in `eslint.validate` is deprecated. * Remove outdated docs regarding vscode eslint extension and type… (#8307) Co-authored-by: Ian Schmitz * Fix sass importLoaders (#8281) * Add "Disallow:" to robots.txt (#8255) * Add helpful message to the footer (#6548) * Update docs according to lint-staged v10 (#8394) * docs: Add troubleshooting documentation on ENOSPC (#8380) Co-authored-by: Ian Schmitz * Prepare 3.3.1 release * Publish - babel-plugin-named-asset-import@0.3.6 - babel-preset-react-app@9.1.1 - cra-template-typescript@1.0.1 - cra-template@1.0.1 - create-react-app@3.3.1 - eslint-config-react-app@5.2.0 - react-app-polyfill@1.0.6 - react-dev-utils@10.1.0 - react-error-overlay@6.0.5 - react-scripts@3.3.1 * Make the PWA link point to the right place (#8379) * Update commit message to use imperative mood (#8377) Why: * As per best practice: https://git.kernel.org/pub/scm/git/git.git/tree/Documentation/SubmittingPatches#n135 See also: https://chris.beams.io/posts/git-commit/#imperative * Wider Chromium support for openBrowser (#8367) * Expands scope of openBrowser tab control Adjust openChrome.applescript to allow manipulation of other Chromium-based browsers (defaulting to Chrome). Requires list of compatible browsers to try in openBrowser.js * Fix typo * Remove Safari * fix(test): force install npm in e2e-behaviour (#8402) This will fix e2e-behaviour on macos Related: https://github.com/npm/cli/issues/611#issuecomment-575287540 * setupTestFrameworkScriptFile is deprecated (#8390) * setupTestFrameworkScriptFile is deprecated __Note:_ `_setupTestFrameworkScriptFile_` _is deprecated in favor of_ `_setupFilesAfterEnv_`_.__ ref: https://jestjs.io/docs/en/configuration#setupfilesafterenv-array * Update docusaurus/docs/running-tests.md Co-Authored-By: Simen Bekkhus Co-authored-by: Simen Bekkhus * Fix robots.txt for TS (#8403) * Update public folder usage docs to clarify globals (#8299) Added the relevant topic linked directly, instead of saying it's just in the next section. Adjusted the text so it sounds more like a recommendation rather than a requirement. The topic linked is basically explainer to how you'd reference it using the global window object and ways to avoid linter errors. Thus I used 'reference' to give users a hint of what it the linked page would be for. * Run git init before template dependencies are installed (#8282) * Support JetBrains Rider IDE as an editor (#7948) Rider is JetBrains .NET IDE, which supports the React plugin identically to other JetBrains IDEs such as Idea and WebStorm. * Enable custom sockjs pathname for hot reloading server. (#7750) * Enable custom sockjs pathname for hot reloading server. * Update docusaurus/docs/advanced-configuration.md Co-Authored-By: Brody McKee * let WDS_SOCKET_PATH be undefined * adding env variables for sockHost and sockPort options Co-authored-by: Brody McKee * Add option to provide custom ssl certificates during development (#5845) * Add option to provide custom SSL certificates when using HTTPS * Update documentation with custom HTTPS certs * Improve certificate validation and move to its own file * Update https in development docs Co-Authored-By: Brody McKee * Add custom cert example to docs * Rename https file and update error message * Include original error message when custom ssl cert is invalid * Add chalk to react-scripts dependencies * Bump docs version to say that the new config will be available in 3.2.0 * Remove chalk dependency * Update custom ssl version to 3.4.0 in docs * Remove version from custom ssl certificate docs Co-authored-by: Brody McKee * Handle service worker error in Firefox (#8272) * Handle service worker error in Firefox See https://bugzilla.mozilla.org/show_bug.cgi?id=1429714 for more details. * Update serviceWorker.js * feat(react-scripts): allow PUBLIC_URL in develoment mode (#7259) Co-authored-by: Eric Clemmons Co-authored-by: Alex Guerra Co-authored-by: Kelly Co-authored-by: Eric Clemmons Co-authored-by: Alex Guerra Co-authored-by: Kelly * Change arrow functions to function declarations (#8412) - The JavaScript template uses a function declaration to define the component, the TypeScript template and a page of the documentation used arrow functions. Changed it to use function declarations for consistency and readability. * Fix navbar line break in header (#8437) * Fixes unchecked access to 'deploy' script on build (#8292) * Downgrade chalk for ie 11 support (#8439) * Downgrade chalk for ie 11 support * Update lockfile * fix(react-scripts): do not redirect served path if request may proxy (#8442) Moved redirect middleware and noopSW middleware in WDS after hook So proxy, and before proxy will take precedence before redirect Closes #8417 * fix(typescriptFormatter): use chalk@2 constructor (#8450) Related #8164 Related #8439 * update open to v7.0.2 (#8459) * Correct webpack name casing (#8475) webpack should always be written in lower-case, according to webpack's branding guidelines https://webpack.js.org/branding * Downgrade style-loader to v0.23.1 due to CSS modules hot reload… (#8378) * Prepare 3.4.0 release * Publish - cra-template-typescript@1.0.2 - cra-template@1.0.2 - create-react-app@3.4.0 - react-dev-utils@10.2.0 - react-error-overlay@6.0.6 - react-scripts@3.4.0 * fix missing packages in react-scripts Co-authored-by: Ian Sutherland Co-authored-by: Samuel Meuli Co-authored-by: Lewis Llobera Co-authored-by: Jake Moxey Co-authored-by: Iguchi Tomokatsu Co-authored-by: Federico Zivolo <5382443+FezVrasta@users.noreply.github.com> Co-authored-by: Kent C. Dodds Co-authored-by: Laurin Quast Co-authored-by: neilbryson Co-authored-by: Reece Dunham Co-authored-by: Rakan Nimer Co-authored-by: Tomer Cohen Co-authored-by: Alexandr Tovmach Co-authored-by: Kyle Bebak Co-authored-by: André Lins Co-authored-by: Kim Persson Co-authored-by: Justin Grant Co-authored-by: Robert van Steen Co-authored-by: Ashrith Reddy Co-authored-by: Jacob M-G Evans <27247160+JacobMGEvans@users.noreply.github.com> Co-authored-by: Ian Schmitz Co-authored-by: Damian Senn Co-authored-by: Róbert FUSZENECKER Co-authored-by: May Co-authored-by: Orta Co-authored-by: Tomáš Hübelbauer Co-authored-by: Jesse Jackson Co-authored-by: Jake Boone Co-authored-by: Endi Co-authored-by: Brody McKee Co-authored-by: Hugo David-Boyet Co-authored-by: Sean Lafferty Co-authored-by: Ali Waseem Co-authored-by: reactjser <54932880+reactjser@users.noreply.github.com> Co-authored-by: Daniel Lo Nigro Co-authored-by: Chun <11034578+cchanxzy@users.noreply.github.com> Co-authored-by: Xuhao Co-authored-by: Sean Baines Co-authored-by: Abdul Wahab ⚡️ Co-authored-by: Guillaume Hertault Co-authored-by: Wataru Ashihara Co-authored-by: darthmaim Co-authored-by: Joshua Robinson <1865690+buildbreakdo@users.noreply.github.com> Co-authored-by: Andreas Cederström Co-authored-by: Fabiano Brito Co-authored-by: Kanitkorn Sujautra Co-authored-by: Havit Rovik Co-authored-by: Tharun Rajendran Co-authored-by: Dylan Staley <88163+dstaley@users.noreply.github.com> Co-authored-by: Donavon West Co-authored-by: James George Co-authored-by: RJ <22164266+suprj@users.noreply.github.com> Co-authored-by: Renato Augusto Gama dos Santos Co-authored-by: Mateusz Burzyński Co-authored-by: Alex Guerra Co-authored-by: Klas Björkqvist Co-authored-by: Max Davidson Co-authored-by: Ben Blank Co-authored-by: Mike Caulley Co-authored-by: Trontor Co-authored-by: Sean Zhu Co-authored-by: Simon Donaldson Co-authored-by: Wojciech Zieliński Co-authored-by: Vadzim Co-authored-by: Jerome De Leon <32805276+JeromeDeLeon@users.noreply.github.com> Co-authored-by: Peet Goddard Co-authored-by: Brian Muenzenmeyer Co-authored-by: Sony AK Co-authored-by: Kai Hao Co-authored-by: Tom Valorsa Co-authored-by: Evan Grim Co-authored-by: Retsam Co-authored-by: Vincent Semrau Co-authored-by: Henry Q. Dineen Co-authored-by: Rasmus Nørskov Co-authored-by: Kevin Old Co-authored-by: Boyuan Xu <52206564+dev-xu@users.noreply.github.com> Co-authored-by: Alex James Vukovity <57100733+alex-vukovity-cko@users.noreply.github.com> Co-authored-by: Marius Craciunoiu Co-authored-by: Tomoya Fujita <32614176+tomoyaf@users.noreply.github.com> Co-authored-by: Joshua Pollak Co-authored-by: Hu Chen Co-authored-by: Cassidy Williams Co-authored-by: Christopher Button <38411730+devgeist@users.noreply.github.com> Co-authored-by: Matthew Curtis Co-authored-by: Andrew Luca Co-authored-by: 吕立青 Co-authored-by: Simen Bekkhus Co-authored-by: Martin Litvaj Co-authored-by: Kevin Pham Co-authored-by: Łukasz Fiszer Co-authored-by: David Powell Co-authored-by: Grady Kuhnline Co-authored-by: Alex Brazier Co-authored-by: Rohit Singhal Co-authored-by: Eric Clemmons Co-authored-by: Kelly Co-authored-by: Eugene Sviridov <46542370+esvyridov@users.noreply.github.com> Co-authored-by: Renato Böhler Co-authored-by: Eugene Chybisov --- CHANGELOG-1.x.md | 8 +- CHANGELOG-2.x.md | 8 +- docusaurus/docs/adding-a-stylesheet.md | 8 +- .../docs/adding-images-fonts-and-files.md | 27 +- docusaurus/docs/advanced-configuration.md | 5 +- docusaurus/docs/available-scripts.md | 2 +- docusaurus/docs/custom-templates.md | 45 +- docusaurus/docs/folder-structure.md | 2 +- docusaurus/docs/getting-started.md | 4 +- docusaurus/docs/importing-a-component.md | 2 +- .../docs/making-a-progressive-web-app.md | 8 +- docusaurus/docs/running-tests.md | 4 +- docusaurus/docs/setting-up-your-editor.md | 18 +- .../docs/supported-browsers-features.md | 4 +- docusaurus/docs/troubleshooting.md | 22 +- docusaurus/docs/using-https-in-development.md | 10 + docusaurus/docs/using-the-public-folder.md | 6 +- docusaurus/website/docusaurus.config.js | 2 +- docusaurus/website/package.json | 8 +- docusaurus/website/src/css/custom.css | 24 + docusaurus/website/src/pages/index.js | 2 +- docusaurus/website/yarn.lock | 2319 ++++++------ package.json | 3 + .../index.test.js | 4 +- .../package.json | 4 +- packages/babel-preset-react-app/create.js | 64 +- .../babel-preset-react-app/dependencies.js | 55 +- packages/babel-preset-react-app/package.json | 32 +- packages/cra-template-typescript/package.json | 2 +- .../cra-template-typescript/template.json | 20 +- .../template/README.md | 2 +- .../template/public/robots.txt | 1 + .../template/src/App.tsx | 2 +- .../template/src/serviceWorker.ts | 10 +- packages/cra-template/package.json | 2 +- packages/cra-template/template.json | 10 +- packages/cra-template/template/README.md | 2 +- .../cra-template/template/public/robots.txt | 1 + .../template/src/serviceWorker.js | 10 +- packages/create-react-app/createReactApp.js | 161 +- packages/create-react-app/package.json | 16 +- packages/create-react-app/yarn.lock.cached | 3127 +++++++++-------- packages/eslint-config-react-app/index.js | 1 - packages/react-app-polyfill/package.json | 4 +- .../react-dev-utils/InterpolateHtmlPlugin.js | 2 +- packages/react-dev-utils/README.md | 43 +- .../WatchMissingNodeModulesPlugin.js | 4 +- .../react-dev-utils/WebpackDevServerUtils.js | 33 +- .../__tests__/getPublicUrlOrPath.test.js | 128 + packages/react-dev-utils/browsersHelper.js | 2 +- .../react-dev-utils/formatWebpackMessages.js | 4 +- .../react-dev-utils/getPublicUrlOrPath.js | 65 + packages/react-dev-utils/launchEditor.js | 9 + .../noopServiceWorkerMiddleware.js | 6 +- packages/react-dev-utils/openBrowser.js | 45 +- .../react-dev-utils/openChrome.applescript | 115 +- packages/react-dev-utils/package.json | 32 +- .../printHostingInstructions.js | 4 +- .../redirectServedPathMiddleware.js | 26 + .../react-dev-utils/webpackHotDevClient.js | 15 +- packages/react-error-overlay/package.json | 36 +- .../src/containers/RuntimeErrorContainer.js | 2 +- .../src/utils/getPrettyURL.js | 4 +- packages/react-scripts/config/env.js | 14 +- .../react-scripts/config/getHttpsConfig.js | 74 + packages/react-scripts/config/paths.js | 40 +- .../react-scripts/config/webpack.config.js | 56 +- .../config/webpackDevServer.config.js | 52 +- .../template/integration/webpack.test.js | 2 +- packages/react-scripts/lib/react-app.d.ts | 4 +- packages/react-scripts/package.json | 46 +- packages/react-scripts/scripts/init.js | 126 +- packages/react-scripts/scripts/start.js | 13 +- tasks/e2e-behavior.sh | 2 +- tasks/e2e-simple.sh | 5 +- tasks/local-test.sh | 2 +- test/fixtures/typescript/src/App.ts | 7 + 77 files changed, 3931 insertions(+), 3158 deletions(-) create mode 100644 packages/react-dev-utils/__tests__/getPublicUrlOrPath.test.js create mode 100644 packages/react-dev-utils/getPublicUrlOrPath.js create mode 100644 packages/react-dev-utils/redirectServedPathMiddleware.js create mode 100644 packages/react-scripts/config/getHttpsConfig.js diff --git a/CHANGELOG-1.x.md b/CHANGELOG-1.x.md index fb1b1cc1d2c..d8b8ee9cb90 100644 --- a/CHANGELOG-1.x.md +++ b/CHANGELOG-1.x.md @@ -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 @@ -1104,7 +1104,7 @@ or 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. @@ -1724,7 +1724,7 @@ Please [file an issue](https://github.com/facebook/create-react-app/issues/new) - `react-dev-utils` - [#2125](https://github.com/facebook/create-react-app/pull/2125) Only show the first compilation error. ([@gaearon](https://github.com/gaearon)) - [#2120](https://github.com/facebook/create-react-app/pull/2120) Omit ESLint warnings when there are ESLint errors. ([@gaearon](https://github.com/gaearon)) - - [#2113](https://github.com/facebook/create-react-app/pull/2113) Prettify errors and warnings for Webpack 2. ([@gaearon](https://github.com/gaearon)) + - [#2113](https://github.com/facebook/create-react-app/pull/2113) Prettify errors and warnings for webpack 2. ([@gaearon](https://github.com/gaearon)) - [#1842](https://github.com/facebook/create-react-app/pull/1842) Modularize and extract crash overlay to iframe. ([@Timer](https://github.com/Timer)) - `create-react-app` - [#1811](https://github.com/facebook/create-react-app/pull/1811) Allow creation of apps in empty Mercurial repos. ([@GreenGremlin](https://github.com/GreenGremlin)) @@ -1770,7 +1770,7 @@ Please [file an issue](https://github.com/facebook/create-react-app/issues/new) - [#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)) - - [#1715](https://github.com/facebook/create-react-app/pull/1715) Remove unused `url` import in Webpack config. ([@pd4d10](https://github.com/pd4d10)) + - [#1715](https://github.com/facebook/create-react-app/pull/1715) Remove unused `url` import in webpack config. ([@pd4d10](https://github.com/pd4d10)) - [#1700](https://github.com/facebook/create-react-app/pull/1700) Update extract-text-webpack-plugin to stable. ([@SimenB](https://github.com/SimenB)) - `react-dev-utils`, `react-scripts` - [#2209](https://github.com/facebook/create-react-app/pull/2209) Move more logic from react-scripts to react-dev-utils. ([@gaearon](https://github.com/gaearon)) diff --git a/CHANGELOG-2.x.md b/CHANGELOG-2.x.md index e30c5e63ec0..5080171a165 100644 --- a/CHANGELOG-2.x.md +++ b/CHANGELOG-2.x.md @@ -827,7 +827,7 @@ You can read more about [these polyfills here](https://github.com/facebook/creat ### Dynamic `import()` of a CommonJS module now has a `.default` property -[Webpack 4 changed the behavior of `import()`](https://medium.com/webpack/webpack-4-import-and-commonjs-d619d626b655) to be closer in line with the specification. +[webpack 4 changed the behavior of `import()`](https://medium.com/webpack/webpack-4-import-and-commonjs-d619d626b655) to be closer in line with the specification. Previously, importing a CommonJS module did not require you specify the default export. In most cases, this is now required. If you see errors in your application about `... is not a function`, you likely need to update your dynamic import, e.g.: @@ -973,7 +973,7 @@ If you used 2.x alphas, please [follow these instructions](https://gist.github.c - `react-scripts` - [#5218](https://github.com/facebook/create-react-app/pull/5218) Support globalSetup and globalTeardown Jest options ([@gaearon](https://github.com/gaearon)) - [#5073](https://github.com/facebook/create-react-app/pull/5073) Add user defined proxy via middleware ([@Timer](https://github.com/Timer)) - - [#3945](https://github.com/facebook/create-react-app/pull/3945) Allow bundles to be analyzed with Webpack-specific tools ([@joshwcomeau](https://github.com/joshwcomeau)) + - [#3945](https://github.com/facebook/create-react-app/pull/3945) Allow bundles to be analyzed with webpack-specific tools ([@joshwcomeau](https://github.com/joshwcomeau)) - [#4195](https://github.com/facebook/create-react-app/pull/4195) Sass loader ([@Fabianopb](https://github.com/Fabianopb)) - [#3909](https://github.com/facebook/create-react-app/pull/3909) Add loader for .graphql files ([@petetnt](https://github.com/petetnt)) - [#1288](https://github.com/facebook/create-react-app/pull/1288) Create git repository with initial commit ([@mauricedb](https://github.com/mauricedb)) @@ -988,7 +988,7 @@ If you used 2.x alphas, please [follow these instructions](https://gist.github.c - [#3865](https://github.com/facebook/create-react-app/pull/3865) Add opt-out for preset-flow to work with @babel/preset-typescript ([@oieduardorabelo](https://github.com/oieduardorabelo)) - [#3675](https://github.com/facebook/create-react-app/pull/3675) add experimental babel-plugin-macros support ([@kentcdodds](https://github.com/kentcdodds)) - `babel-preset-react-app`, `confusing-browser-globals`, `eslint-config-react-app`, `react-dev-utils`, `react-error-overlay`, `react-scripts` - - [#4077](https://github.com/facebook/create-react-app/pull/4077) Webpack 4 ([@andriijas](https://github.com/andriijas)) + - [#4077](https://github.com/facebook/create-react-app/pull/4077) webpack 4 ([@andriijas](https://github.com/andriijas)) - `create-react-app` - [#4350](https://github.com/facebook/create-react-app/pull/4350) Support package distribution tags ([@miraage](https://github.com/miraage)) - `babel-preset-react-app`, `react-scripts` @@ -1125,7 +1125,7 @@ If you used 2.x alphas, please [follow these instructions](https://gist.github.c - [#4846](https://github.com/facebook/create-react-app/pull/4846) Update jest version ([@skoging](https://github.com/skoging)) - [#4362](https://github.com/facebook/create-react-app/pull/4362) Bumped jest version to 22.4.1 ([@CGreenburg](https://github.com/CGreenburg)) - `babel-preset-react-app`, `confusing-browser-globals`, `eslint-config-react-app`, `react-dev-utils`, `react-error-overlay`, `react-scripts` - - [#4077](https://github.com/facebook/create-react-app/pull/4077) Webpack 4 ([@andriijas](https://github.com/andriijas)) + - [#4077](https://github.com/facebook/create-react-app/pull/4077) webpack 4 ([@andriijas](https://github.com/andriijas)) - `babel-preset-react-app` - [#4432](https://github.com/facebook/create-react-app/pull/4432) Update babel-plugin-macros to fix a bug ([@stereobooster](https://github.com/stereobooster)) - [#3818](https://github.com/facebook/create-react-app/pull/3818) Remove PropTypes from production build (#209) ([@iansu](https://github.com/iansu)) 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-images-fonts-and-files.md b/docusaurus/docs/adding-images-fonts-and-files.md index 3489670e705..67cc4b53d22 100644 --- a/docusaurus/docs/adding-images-fonts-and-files.md +++ b/docusaurus/docs/adding-images-fonts-and-files.md @@ -3,9 +3,9 @@ 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). 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). @@ -13,7 +13,7 @@ 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,9 +35,9 @@ 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, 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). @@ -51,12 +51,15 @@ One way to add SVG files was described in the section above. You can also import ```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 significant and tells Create React App that you want a React component that renders an SVG, rather than its filename. diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md index 871edd2f49d..bf7777a413b 100644 --- a/docusaurus/docs/advanced-configuration.md +++ b/docusaurus/docs/advanced-configuration.md @@ -14,7 +14,10 @@ You can adjust various development and production settings by setting environmen | 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. | -| PUBLIC_URL | 🚫 Ignored | ✅ Used | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](deployment#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. | +| 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 `/sockjs-node` 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#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. | diff --git a/docusaurus/docs/available-scripts.md b/docusaurus/docs/available-scripts.md index effdc2b7936..808d3d92005 100644 --- a/docusaurus/docs/available-scripts.md +++ b/docusaurus/docs/available-scripts.md @@ -30,7 +30,7 @@ Your app is ready to be deployed! See the section about [deployment](deployment. 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.) 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. +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. diff --git a/docusaurus/docs/custom-templates.md b/docusaurus/docs/custom-templates.md index 98acb9b1a75..4cf863e984e 100644 --- a/docusaurus/docs/custom-templates.md +++ b/docusaurus/docs/custom-templates.md @@ -9,16 +9,10 @@ Custom Templates enable you to select a template to create your project from, wh 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. -### npm +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 -npm init react-app my-app --template [template-name] -``` - -### Yarn - -```sh -yarn create react-app my-app --template [template-name] +npx create-react-app my-app --template [template-name] ``` ## Finding custom templates @@ -50,6 +44,14 @@ my-app/ 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`. @@ -58,18 +60,31 @@ You can add whatever files you want in here, but you must have at least the file ### The `template.json` file -This is where you can define dependencies (only dependencies are supported for now), as well as any custom scripts that your template relies on. +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 (only dependencies are supported for now) and any custom scripts that your template relies on. + +Below is an example `template.json` file: ```json { - "dependencies": { - "serve": "^11.2.0" - }, - "scripts": { - "serve": "serve -s build", - "build-and-serve": "npm run build && npm run serve" + "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/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 98484f9ac6d..f23236110b3 100644 --- a/docusaurus/docs/getting-started.md +++ b/docusaurus/docs/getting-started.md @@ -28,7 +28,7 @@ When you’re ready to deploy to production, create a minified bundle with `npm ### 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. Create a project, and you’re good to go. @@ -147,7 +147,7 @@ The page will automatically reload if you make changes to the code. You will see 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://facebook.github.io/create-react-app/docs/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 61fc9b0d492..2f4a4c56a69 100644 --- a/docusaurus/docs/importing-a-component.md +++ b/docusaurus/docs/importing-a-component.md @@ -3,7 +3,7 @@ id: importing-a-component title: Importing a Component --- -This project setup supports ES6 modules thanks to Webpack. +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. diff --git a/docusaurus/docs/making-a-progressive-web-app.md b/docusaurus/docs/making-a-progressive-web-app.md index e8e9c1bddde..227b21eb4e6 100644 --- a/docusaurus/docs/making-a-progressive-web-app.md +++ b/docusaurus/docs/making-a-progressive-web-app.md @@ -10,7 +10,7 @@ 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. 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: +following in their [`src/index.js`](https://github.com/facebook/create-react-app/blob/master/packages/cra-template/template/src/index.js) file: ```js // If you want your app to work offline and load faster, you can change @@ -62,7 +62,7 @@ following into account: 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 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/serviceWorker.js`](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/src/serviceWorker.js), which + starting point, you can make use of the logic included in [`src/serviceWorker.js`](https://github.com/facebook/create-react-app/blob/master/packages/cra-template/template/src/serviceWorker.js), which demonstrates which service worker lifecycle events to listen for to detect each scenario, and which as a default, only logs appropriate messages to the JavaScript console. @@ -93,11 +93,11 @@ following into account: ## Progressive Web App Metadata The default configuration includes a web app manifest located at -[`public/manifest.json`](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/public/manifest.json), that you can customize with +[`public/manifest.json`](https://github.com/facebook/create-react-app/blob/master/packages/cra-template/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`](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/public/manifest.json) determines what +Android, the metadata in [`manifest.json`](https://github.com/facebook/create-react-app/blob/master/packages/cra-template/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/running-tests.md b/docusaurus/docs/running-tests.md index f416b64d33f..7b81c1d2340 100644 --- a/docusaurus/docs/running-tests.md +++ b/docusaurus/docs/running-tests.md @@ -245,12 +245,12 @@ const localStorageMock = { global.localStorage = localStorageMock; ``` -> 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, so you should manually create the property `setupTestFrameworkScriptFile` in the configuration for Jest, something like the following: +> 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, so you should manually create the property `setupFilesAfterEnv` in the configuration for Jest, something like the following: > ```js > "jest": { > // ... -> "setupTestFrameworkScriptFile": "/src/setupTests.js" +> "setupFilesAfterEnv": ["/src/setupTests.js"] > } > ``` diff --git a/docusaurus/docs/setting-up-your-editor.md b/docusaurus/docs/setting-up-your-editor.md index 95dbaa598b6..17c11255d71 100644 --- a/docusaurus/docs/setting-up-your-editor.md +++ b/docusaurus/docs/setting-up-your-editor.md @@ -22,21 +22,6 @@ Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plug They are not required for linting. You should see the linter output right in your terminal as well as the browser console. If you prefer the lint results to appear right in your editor, please make sure you install an ESLint plugin/extension. -If you're using TypeScript and Visual Studio Code, the [ESLint Visual Studio Code extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint#overview) currently [doesn't have TypeScript support enabled by default](https://github.com/Microsoft/vscode-eslint/issues/609). To enable TypeScript support in the ESLint extension, add the following to your project's Visual Studio Code settings file, located at `.vscode/settings.json` (you can create this file if it doesn't already exist): - -```json -{ - "eslint.validate": [ - "javascript", - "javascriptreact", - { "language": "typescript", "autoFix": true }, - { "language": "typescriptreact", "autoFix": true } - ] -} -``` - -Now your editor should report the linting warnings. - Note that even if you customise your ESLint config, these changes will **only affect the editor integration**. They won’t affect the terminal and in-browser lint output. This is because Create React App intentionally provides a minimal set of rules that find common mistakes. If you want to enforce a coding style for your project, consider using [Prettier](https://github.com/jlongster/prettier) instead of ESLint style rules. @@ -166,8 +151,7 @@ Next we add a 'lint-staged' field to the `package.json`, for example: }, + "lint-staged": { + "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [ -+ "prettier --write", -+ "git add" ++ "prettier --write" + ] + }, "scripts": { diff --git a/docusaurus/docs/supported-browsers-features.md b/docusaurus/docs/supported-browsers-features.md index b43648bb1bf..6a7123de5be 100644 --- a/docusaurus/docs/supported-browsers-features.md +++ b/docusaurus/docs/supported-browsers-features.md @@ -50,6 +50,6 @@ Here is an example `browserslist` that is specified in `package.json`: } ``` -> Note that this does not include polyfills automatically for you. You will still need to polyfill language features (see above) as needed based on the browsers your are supporting. +> Note that this does not include polyfills automatically for you. You will still need to polyfill language features (see above) as needed based on the browsers you are supporting. -> When editing the `browserslist` config, you may notice that your changes don't get picked up right away. This is due to an [issue in babel-loader](https://github.com/babel/babel-loader/issues/690) not detecting the change in your `package.json`. An quick solution is to delete the `node_modules/.cache` folder and try again. +> When editing the `browserslist` config, you may notice that your changes don't get picked up right away. This is due to an [issue in babel-loader](https://github.com/babel/babel-loader/issues/690) not detecting the change in your `package.json`. A quick solution is to delete the `node_modules/.cache` folder and try again. diff --git a/docusaurus/docs/troubleshooting.md b/docusaurus/docs/troubleshooting.md index 38892e77a78..0d0b247b2b7 100644 --- a/docusaurus/docs/troubleshooting.md +++ b/docusaurus/docs/troubleshooting.md @@ -12,14 +12,32 @@ If this doesn’t happen, try one of the following workarounds: - Check that your file is imported by your entrypoint. TypeScript will show errors on any of your source files, but webpack only reloads your files if they are directly or indirectly imported by one of your entrypoints. - If your project is in a Dropbox folder, try moving it out. -- If the watcher doesn’t see a file called `index.js` and you’re referencing it by the folder name, you [need to restart the watcher](https://github.com/facebook/create-react-app/issues/1164) due to a Webpack bug. +- If the watcher doesn’t see a file called `index.js` and you’re referencing it by the folder name, you [need to restart the watcher](https://github.com/facebook/create-react-app/issues/1164) due to a webpack bug. - Some editors like Vim and IntelliJ have a “safe write” feature that currently breaks the watcher. You will need to disable it. Follow the instructions in [“Adjusting Your Text Editor”](https://webpack.js.org/guides/development/#adjusting-your-text-editor). -- If your project path contains parentheses, try moving the project to a path without them. This is caused by a [Webpack watcher bug](https://github.com/webpack/watchpack/issues/42). +- If your project path contains parentheses, try moving the project to a path without them. This is caused by a [webpack watcher bug](https://github.com/webpack/watchpack/issues/42). - On Linux and macOS, you might need to [tweak system settings](https://github.com/webpack/docs/wiki/troubleshooting#not-enough-watchers) to allow more watchers. - If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox, create an `.env` file in your project directory if it doesn’t exist, and add `CHOKIDAR_USEPOLLING=true` to it. This ensures that the next time you run `npm start`, the watcher uses the polling mode, as necessary inside a VM. If none of these solutions help please leave a comment [in this thread](https://github.com/facebook/create-react-app/issues/659). +## `npm start` fail due to watch error + +If you are using a Linux operating system and see an error similar to: `ENOSPC: System limit for number of file watchers reached`, you can fix the issue by increasing the `fs.inotify.max_user_watches` setting of your operating system. + +If you are running Debian, RedHat, or another similar Linux distribution, run the following in a terminal: + +```sh +echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p +``` + +If you are running ArchLinux, run the following command instead: + +```sh +echo fs.inotify.max_user_watches=524288 | sudo tee /etc/sysctl.d/40-max-user-watches.conf && sudo sysctl --system +``` + +Then paste it in your terminal and press on enter to run it. You could find more information [here](https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers#the-technical-details). + ## `npm test` hangs or crashes on macOS Sierra If you run `npm test` and the console gets stuck after printing `react-scripts test` to the console there might be a problem with your [Watchman](https://facebook.github.io/watchman/) installation as described in [facebook/create-react-app#713](https://github.com/facebook/create-react-app/issues/713). diff --git a/docusaurus/docs/using-https-in-development.md b/docusaurus/docs/using-https-in-development.md index 3541e356b8e..1d921532d05 100644 --- a/docusaurus/docs/using-https-in-development.md +++ b/docusaurus/docs/using-https-in-development.md @@ -32,6 +32,16 @@ HTTPS=true npm start Note that the server will use a self-signed certificate, so your web browser will almost definitely display a warning upon accessing the page. +## Custom SSL certificate + +To set a custom certificate, set the `SSL_CRT_FILE` and `SSL_KEY_FILE` environment variables to the path of the certificate and key files in the same way you do for `HTTPS` above. Note that you will also need to set `HTTPS=true`. + +### Linux, macOS (Bash) + +```bash +HTTPS=true SSL_CRT_FILE=cert.crt SSL_KEY_FILE=cert.key npm start +``` + To avoid having to set the environment variable each time, you can either include in the `npm start` script like so: ```json diff --git a/docusaurus/docs/using-the-public-folder.md b/docusaurus/docs/using-the-public-folder.md index 378bdb604c3..b2b6874346e 100644 --- a/docusaurus/docs/using-the-public-folder.md +++ b/docusaurus/docs/using-the-public-folder.md @@ -24,7 +24,7 @@ This mechanism provides a number of benefits: However there is an **escape hatch** that you can use to add an asset outside of the module system. -If you put a file into the `public` folder, it will **not** be processed by Webpack. Instead it will be copied into the build folder untouched. To reference assets in the `public` folder, you need to use an environment variable called `PUBLIC_URL`. +If you put a file into the `public` folder, it will **not** be processed by webpack. Instead it will be copied into the build folder untouched. To reference assets in the `public` folder, you need to use an environment variable called `PUBLIC_URL`. Inside `index.html`, you can use it like this: @@ -61,6 +61,6 @@ The `public` folder is useful as a workaround for a number of less common cases: - You need a file with a specific name in the build output, such as [`manifest.webmanifest`](https://developer.mozilla.org/en-US/docs/Web/Manifest). - You have thousands of images and need to dynamically reference their paths. - You want to include a small script like [`pace.js`](https://github.hubspot.com/pace/docs/welcome/) outside of the bundled code. -- Some library may be incompatible with Webpack and you have no other option but to include it as a `