Set up a modern web app by running one command.
MIT License
Bot releases are visible (Hide)
Published by Timer about 7 years ago
react-dev-utils
react-error-overlay
react-dev-utils
Other
react-scripts
#2908 Note that class fields have progressed to stage 3. (@rickbeerendonk)
#3160 Update unclear wording in webpack configuration (file loader section). (@kristiehoward)
eslint-config-react-app
react-scripts
#2989 Update install template to match accessibility guidelines. (@davidleger95)
react-error-overlay
create-react-app
, react-dev-utils
, react-error-overlay
, react-scripts
#3058 Re-run prettier for all files and pin the version. (@viankakrisna)
#3107 Run CI on npm@^4
. (@viankakrisna)
Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]
Published by gaearon about 7 years ago
react-error-overlay
react-dev-utils
react-scripts
react-scripts
child_process
to let some libraries compile. (@McFlurriez)react-dev-utils
, react-error-overlay
Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]
Published by gaearon about 7 years ago
react-error-overlay
react-dev-utils
react-scripts
react-scripts
react-dev-utils
react-error-overlay
, react-scripts
babel-runtime
dependency (@christophehurpeau)react-dev-utils
, react-error-overlay
, react-scripts
react-error-overlay
to React (@tharakawj)Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]
Published by Timer about 7 years ago
create-react-app
#2884 Improve offline heuristic for proxied environments. (@bsyk)
When a Yarn proxy is set, we will check its connectivity if we cannot reach Yarn's registry. This is often the case when DNS lookups must be made through the proxy.
#2853 Allow use of scoped packages with a pinned version. (@wileybenet)
react-dev-utils
react-dev-utils
, react-scripts
react-scripts
node
file resolution. (@mostafah)react-scripts
#2818 Allow sourcemaps to be disabled. (@viankakrisna)
As applications grow more complex, it is possible webpack may run out of memory while generating source maps. They may now be disabled by setting GENERATE_SOURCEMAP=false
.
#2913 Allow flags to be passed to node when running react-scripts
. (@koistya)
#2747 Simplify webpack configuration using Rule.oneOf
. (@Furizaa)
react-dev-utils
, react-scripts
package.json
. (@iamdoron)create-react-app
react-dev-utils
eslint-config-react-app
, react-scripts
eslint@4
. (@trungdq88)eslint-config-react-app
allowTaggedTemplates
to true (eslint). (@denkristoffer)react-dev-utils
webpackHotDevClient
support. (@ForbesLindesay)react-scripts
babel-preset-react-app
create-react-app
, eslint-config-react-app
, react-dev-utils
, react-error-overlay
, react-scripts
eslint-config-react-app
react-scripts
Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]
Published by gaearon over 7 years ago
react-dev-utils
create-react-app
README
gluestick
to the alternatives section. (@JoeCortopassi)Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]
Published by gaearon over 7 years ago
react-scripts
Inside any created project that has not been ejected, run:
npm install --save --save-exact [email protected]
or
yarn add --exact [email protected]
Published by gaearon over 7 years ago
react-scripts
CI
variable is set to true. (@varnav)PUBLIC_URL
for CDN. (@jeffposnick)index.css
over App.css
. (@bryankang)react-dev-utils
ModuleScopePlugin
. (@diligiant)react-scripts
.web.js
extension for React Native Web. (@mini-eggs)sw-precache-webpack-plugin
to lastest version. (@goldhand)dgram
Node module. (@micopiira)service-worker.js
is not found. (@ro-savage)babel-preset-react-app
, react-dev-utils
, react-scripts
create-react-app
, react-scripts
react-dev-utils
yarn build
in output. (@gaearon)create-react-app
User Guide
source-map-explorer
. (@gr33nfury)REACT_EDITOR
environment variable. (@wirmar)jest-enzyme
section. (@luftywiranda13)README
Other
react-scripts
react-dev-utils
Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
or
yarn add --dev --exact [email protected]
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.
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. You can read more about the vulnerability here.
If you left the service worker integration enabled and didnβt change how it works, you can replace src/registerServiceWorker.js
with this updated version.
If you haven't changed the default CSS organization, you may want to apply this fix that makes index.css
take precedence over App.css
in your project.
Published by gaearon over 7 years ago
react-scripts
comparisons
feature in uglify compression. (@davidascher)react-scripts
react-dev-utils
, react-scripts
react-scripts
now
deployments. (@purplecones)Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
or
yarn add --dev --exact [email protected]
Published by gaearon over 7 years ago
eslint-config-react-app
, react-error-overlay
, react-scripts
react-dev-utils
react-scripts
/__*
URLs to fix Firebase hosting. (@ryansully)README
Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
or
yarn add --dev --exact [email protected]
Published by gaearon over 7 years ago
react-dev-utils
, react-scripts
react-dev-utils
eslint-config-react-app
Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
or
yarn add --dev --exact [email protected]
Published by gaearon over 7 years ago
react-error-overlay
Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
or
yarn add --dev --exact [email protected]
Published by gaearon over 7 years ago
react-dev-utils
eslint-config-react-app
react-dev-utils
, react-error-overlay
console
calls into a check. (@BrodaNoel)react-scripts
Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
or
yarn add --dev --exact [email protected]
Published by gaearon over 7 years ago
react-dev-utils
, react-scripts
react-dev-utils
, react-error-overlay
react-dev-utils
react-scripts
git status
. (@milocosmopolitan)Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
or
yarn add --dev --exact [email protected]
If you previously had issues with an Invalid Host Header
error, follow these new instructions to fix it.
Published by gaearon over 7 years ago
react-scripts
NODE_PATH=src
for npm start
and npm run build
. (@ApacheEx)NODE_PATH=src
for Jest. (@gaearon)"homepage"
field. (@gaearon).env.local
in test
environment. (@gaearon)react-dev-utils
react-dev-utils
, react-error-overlay
react-error-overlay
eslint-config-react-app
react-scripts
<noscript>
to template's index.html
. (@viankakrisna)react-scripts
.env.*
files are supported. (@AJamesPhillips)Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
or
yarn add --dev --exact [email protected]
Published by gaearon over 7 years ago
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.
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.
Have you read it? Now let's see how to update your app to the latest version.
First, ensure you are using the latest Node 6 LTS or newer. In 1.0.0, we have dropped support for Node 4 and NPM 2.
Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
You may also optionally update the global command-line utility for bug fixes:
npm install -g create-react-app
src/
We've never supported importing files from outside src/
, nor have we supported running tests outside of src/
.
We also never explicitly forbid doing so, which caused confusion when things didn't work like they should.
When running or building your application, you may see a message like so:
You attempted to import ... which falls outside of the project src/ directory.
To remedy this, simply move any files that you import
within src/
and update your relative imports accordingly. This enforces that files that import
each other stay in src/
, and other folders serve different purposes (e.g. the public/
folder just gets served from the root).
If you used relative imports outside the project directory as a way to share code with another project, consider using a monorepo instead, so that other projects are symlinked to your project's node_modules/
. Then you can import them as a Node modules.
While running npm test
, you may notice some of your tests are missing. Please move any top-level test directory (i.e. __test__
, __spec__
) or files (i.e. *.test.js
, *.spec.js
) into src/
. Conversely, if you have some similarly named files that you donβt want Jest to run, move them outside of src/
.
Moment.js locales are now purposely excluded from the bundle unless explicitly depended on.
Please import the locales you need:
import moment from 'moment';
import 'moment/locale/fr';
import 'moment/locale/es';
You can no longer import a file and expect to receive its contents as an encoded string.
This behavior was confusing and inconsistent depending on the file size.
Importing files with unknown extensions will now always include them into the build and return a valid URL.
If you'd like to import a file's contents as a string, consider contributing to #1944.
For the time being, you must embed assets within an export:
// sample.txt
export default `i want
this data as a string
`;
You can then import this as so:
import sampleText from './sample.txt';
// ...
window
qualifierPlease prefix any global method with window.
, you may experience this with methods such as confirm
.
Simply update references from confirm
to window.confirm
.
Note that this new lint error will likely uncover legitimate accidental uses of global variables where you meant to define a local variable instead.
You can no longer use AMD import syntax, nor define an import anywhere other than the top of the file.
This is to reduce confusion around import statements, which do not allow you to evaluate code between them.
We have enabled a new set of rules to help make applications more accessible, please take time to learn about the errors and fix them.
You can search for every lint rule name in the right column and read its description on the web. The fixes are usually very simple.
We have enabled the lint warnings about React APIs deprecated in React 15.5.
You can automatically convert your project to fix them by running the corresponding codemods.
Please refer to the Jest 19 and Jest 20 breaking changes for migration instructions.
If you use snapshots, you will likely need to update them once because of the change in format.
The old, 2009 specification for Flexbox is deprecated and is 2.3x slower than the latest specification.
We are no longer polyfilling it automatically.
Follow these steps if you see errors about missing lint rules in the editor.
npm install
in your project (or yarn
)If you still have the problem please file an issue.
After the regular update procedure above, add these line to <head>
in public/index.html
:
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
Then create a file called public/manifest.json
that looks like this:
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
Finally, create src/registerServiceWorker.js
with this template, import it from src/index.js
and call the function it exports.
This was a large release, and we might have missed something.
Please file an issue and we will try to help.
Unhandled Promise rejections will now crash tests. You can fix them by explicitly catching the errors you donβt care about.
For a readable summary of the changes, check out our blog post.
react-dev-utils
, react-scripts
react-scripts
src/
(#544). (@motevets)eslint-config-react-app
, react-dev-utils
eslint-config-react-app
, react-error-overlay
, react-scripts
eslint-plugin-jsx-a11y
and activate more rules. (@AlmeroSteyn)eslint-config-react-app
, react-scripts
react-scripts
react-dev-utils
, react-scripts
eslint-config-react-app
, react-scripts
eslint-plugin-jsx-a11y
and activate more rules. (@AlmeroSteyn)react-scripts
react-scripts
and add require.resolve()
to loaders. (@gaearon).eslintignore
. (@Timer)localhost
when offline (Windows). (@bunshar)http://
or https://
. (@bunshar)detect-port
. (@Andreyco)react-dev-utils
openBrowser
now supports urls with more than one parameter. (@alisonmonteiro)openBrowser()
when BROWSER=open
on macOS. (@bpierre)cwd
. (@chrisdrackett)create-react-app
react-dev-utils
, react-scripts
react-dev-utils
, react-error-overlay
react-scripts
yarn build
instead of yarn run build
. (@geoffdavis92)serve
for running in production. (@leo)yarn
instead of yarnpkg
when creating a new application. (@lpalmes)X-FORWARDED
headers for proxy requests. (@johann-sonntagbauer)eslint-config-react-app
, react-dev-utils
react-error-overlay
, react-scripts
babel-preset-react-app
, eslint-config-react-app
, react-dev-utils
, react-error-overlay
, react-scripts
eslint-config-react-app
eslint-config-react-app
, react-scripts
react-dev-utils
create-react-app
react-scripts
.eslintrc
effects. (@luftywiranda13).eslintrc
for IDE lint plugins. (@gaearon)node-sass
alternative. (@michaelwayman).env
for enabling polling mode. (@gaearon)npm run watch-css
command. (@mklemme)yarn.lock
. (@viankakrisna)babel-preset-react-app
react-scripts
url
import in Webpack config. (@pd4d10)react-dev-utils
, react-scripts
babel-preset-react-app
, react-scripts
create-react-app
, react-dev-utils
, react-scripts
appveyor.yml
. (@Timer)babel-preset-react-app
, create-react-app
, eslint-config-react-app
, react-dev-utils
, react-scripts
eslint-config-react-app
eslint-config-react-app
, react-dev-utils
, react-scripts
react-dev-utils
Published by gaearon over 7 years ago
react-scripts
npm start
. (@ryanwalters)eslint-config-react-app
react-scripts
Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
Published by Timer over 7 years ago
create-react-app
react-scripts
react-dev-utils
#1690 Fix openBrowser()
when BROWSER=open
on macOS. (@bpierre)
#1696 Improve reliability of port detection. (@chrisdrackett)
eslint-config-react-app
, react-scripts
#1705 Add support for ignoreRestSiblings
in no-unused-vars
. (@chrisdrackett)
Linter no longer warns when using rest properties to remove variables from an object.
react-dev-utils
, react-scripts
react-dev-utils
. (@viankakrisna)Other
react-scripts
react-scripts
eslint-config-react-app
eslint-config-react-app
, react-dev-utils
, react-scripts
react-dev-utils
lerna
version. (@viankakrisna)Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
You may also optionally update the global command-line utility for scoped package support:
npm install -g [email protected]
Published by gaearon over 7 years ago
create-react-app
If you are using Yarn, and you have created at least one app previously, Create React App now works offline.
react-scripts
create-react-app
react-scripts
X-FORWARDED
headers for proxy requests. (@johann-sonntagbauer)react-scripts
Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
You may also optionally update the global command-line utility for offline Yarn cache support:
npm install -g [email protected]
Published by gaearon over 7 years ago
create-react-app
#1253 Install time optimization. (@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 Graceful error handling. (@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 Suggest upgrading to NPM >= 3 for faster install times. (@mobinni)
#1603 Allow app creation in a WebStorm project. (@driquelme)
#1570 Allow git urls in --scripts-version
. (@tomconroy)
react-scripts
recursive-readdir
. (@wtgtybhertgeghgtwtg)react-scripts
#1635 Fix Jest configuration. (@Timer)
Fixes ejecting on Windows for macOS and Linux machines.
#1356 Fix workflow if react-scripts package is linked via npm-link. (@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 Ensure PORT environment variable is an integer. (@matoilic)
#1628 Show correct port for pushstate-server URL text. (@mattccrampton)
react-snapshot
. (@superhighfives)jest-enzyme
documentation. (@kiranps)jest-enzyme
for simplifying test matchers. (@blainekasten)babel-preset-react-app
test -e
in e2e. (@igetgames)Note: 0.9.1 had known issues so you should skip it.
Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
You may also optionally update the global command-line utility for more efficient installs (thanks @n3tr):
npm install -g [email protected]
Published by Timer over 7 years ago
This release has known issue. Please skip it and update to 0.9.2 instead.