Set up a modern web app by running one command.
MIT License
Bot releases are visible (Hide)
Published by Timer over 7 years ago
react-scripts
#1489 Support setting "homepage"
to "."
to generate relative asset paths. (@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.
#937 Add PUBLIC_URL
environment variable for advanced use. (@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 section.
#1440 Make all REACT_APP_*
environment variables accessible in index.html
. (@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.
react-dev-utils
#1148 Configure which browser to open with npm start
. (@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 that we use under the hood. See Advanced Configuration.
react-scripts
#1311 Updated babel-jest
and jest
packages to 18.0.0. (@lopezator)
Jest has been updated to 18 and has introduced some breaking changes and new features.
react-scripts
, react-dev-utils
#1264 Remove interactive shell check when opening browser on start. (@CaryLandholt)
Non-interactive terminals no longer automatically disable launching of the browser. Instead, you need to specify none
as BROWSER
environment variable if you wish to disable it.
react-scripts
#1441 Added babel-runtime
dependency to deduplicate dependencies when using Yarn. (@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.
#1458 Additionally remove react-scripts
from dependencies on eject. (@creynders)
#1309 Bump babel-loader
version (#1009). (@frontsideair)
#1267 Only gitignore directories in root, not deep. (@jayphelps)
react-dev-utils
react-scripts
env.CI = true
warnings causing failures. (@jayphelps)babel-jest
and jest
packages to 18.0.0. (@lopezator)'\n'
to the end of package.json
file. (@pd4d10)&&
in deploy script. (@zpao)create-react-app
Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
Then, run your tests. If you are affected by breaking changes from Jest 18, consult blog post, changelog, and documentation. 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.
Published by fson almost 8 years ago
create-react-app
, 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:
npm install -g [email protected]
Published by gaearon almost 8 years ago
react-scripts
#1233 Disable subresource integrity temporarily. (@Timer)
We added 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
create-react-app
Fixes noisy output on Windows when Yarn is not installed.
react-scripts
#1237 Clear scrollback in test mode. (@gaearon)
Ensures test watcher clears the console before running.
#1229 Disable jest watch mode when --coverage flag is present [#1207]. (@BenoitAverty)
Since coverage doesn't work well with watch mode, we don’t run the watcher on npm test -- --coverage
anymore.
#1212 Proxy rewrites Origin header to match the target server URL. (@koles)
Makes sure more API endpoints can work with the proxy
setting.
#1222 Disable gh-page setup instruction if scripts.deploy has been added. (@n3tr)
Suppresses the instructions printed at the end of npm run build
if npm run deploy
already exists.
create-react-app
#1236 Tweak console messages. (@gaearon)
Makes error messages more friendly.
#1195 Use "commander" for cli argv handling. (@EnoahNetzach)
Adds create-react-app --help
with a list of options.
react-dev-utils
react-dev-utils
react-scripts
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:
npm install -g [email protected]
Published by gaearon almost 8 years ago
create-react-app
react-scripts
#1203 Update webpack-subresource-integrity to fix Windows builds. (@gaearon)
Fixes a crash when running npm run build
on Windows.
#1201 Instruct Jest to load native components from RNW instead of RN. (@remon-georgy)
Fixes tests for users of React Native Web.
react-scripts
Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
You can optionally update the global CLI too:
npm install -g [email protected]
Published by gaearon almost 8 years ago
react-scripts
#1176 Add Subresource Integrity support. (@XVincentX)
The generated HTML now includes Subresource Integrity attributes ensuring that your users aren't served malicious code if your CDN gets compromised.
react-scripts
#1197 Let Jest handle all file types. (@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 Only honor relative NODE_PATH
. (@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 Update Webpack to fix source map issues. (@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.
#1180 Use file-loader
for svgs. (@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. 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
babel-preset-react-app
eslint-config-react-app
#1191 Relax peerDependencies for ESLint preset. (@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 Make jsx-no-undef rule an error. (@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 Remove path module from webpack config on eject. (@harunhasdal)
This makes the output after ejecting a bit cleaner.
#1120 Add testURL
to Jest config. (@spudly)
This fixes an error when running tests that interact with History API in jsdom.
react-scripts
Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
Published by fson almost 8 years ago
react-scripts
Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
Published by fson almost 8 years ago
react-scripts
#944 Crash the build during CI whenever linter warnings are encountered. (@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 for more information.
create-react-app
, react-scripts
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
create-react-app my-app # Packages are now installed with Yarn.
babel-preset-react-app
#902 Enable useBuiltIns option on object-rest-spread. (@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
).
Note: react-scripts
already adds this polyfill, so no changes are necessary in Create React App projects.
react-scripts
#978 Move the remove-on-eject-end tag at the end of the file. (@EnoahNetzach)
Fixes a bug in ejected configuration.
#1017 Don't look for .babelrc
file during test. (@nhajidin)
Fixes a .babelrc
file in a parent directory interfering with the npm test
command.
#951 Check for presence of folders before continuing eject. (@heldinz)
Fixes a bug where eject
failed when a scripts
or config
folder already existed in the project.
react-dev-utils
#1035 Fix Chrome tab reuse. (@einarlove)
Fixes a bug with the app not opening in the existing tab in Chrome.
#964 Catch and noop call to open web browser. (@spadin)
Not being able to open a browser doesn't crash the development server now.
eslint-config-react-app
, react-scripts
react-scripts
#1059 Use url-loader
with limit 10k as a default loader. (@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. Any file that's not JS or CSS is now handled the same way.
#924 Enable JavaScript source maps in development. (@ekaradon)
#1058 Add missing dev argument in build script message. (@nhajidin)
#961 Add collectCoverageFrom
option to collect coverage on files without any tests. (@pmackcode)
The test script now considers all files in the project when calculating test coverage.
#968 Enable gzip compression in the development server (#966). (@frontsideair)
react-dev-utils
, react-scripts
#816 add logging of existing default port process on start. (@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
in /Users/ian/dev/my-app
Would you like to run the app on another port instead?
react-dev-utils
react-scripts
function
from export statement. (@gnowoel)react-scripts
babel-preset-react-app
You may optionally update the global command (it’s not required, but it adds Yarn support for new projects):
npm install -g [email protected]
Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
Published by fson almost 8 years ago
react-scripts
)src/setupTests.js
is now called after test framework initialization to support loading custom matchers. (@just-boris in #846)process.env
object. (@dvkndn in #807)@import
statements. (@nhunzaker in #929)eslint-config-react-app
)import/no-webpack-loader-syntax
rule that forbids using custom Webpack specific syntax to specify Webpack loaders in import statements. (@fson in #803)react/react-in-jsx-scope
rule ("React must be in scope") is now an error. (@gaearon in #822)no-unused-expressions
rule now allows the use of short circuit and ternary expressions. (@cannona in #724)babel-preset-react-app
)babel-preset-env
. (@shubheksha in #878, @JeffreyATW in #927babel-plugin-transform-regenerator
. (@akofman in #864)react-dev-utils
)webpackHotDevClient
. (@michalkvasnicak in #840)create-react-app
)--scripts-version
argument. (@pdillon in #826)--scripts-version
argument. (@jihchi in #876)You may optionally update the global command (it’s not required):
npm install -g [email protected]
Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
Jest 16 includes improvements to snapshot testing and changes to the snapshot format. If your project uses snapshot testing, you'll need to update the snapshot files. To update the snapshots, run:
npm test -- -u
Published by gaearon about 8 years ago
react-scripts
)package.json
after ejecting. (@montogeek in #773)react-dev-utils
)Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
Published by gaearon about 8 years ago
react-scripts
)react-dev-utils
)Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
Note: If the project fails to start, remove node_modules
, ensure react-scripts
is 0.6.0
in your package.json
, and run npm install
again. There seems to be an npm bug affecting this update.
This is the browser window when you make a syntax error:
Published by gaearon about 8 years ago
react-scripts
)react-dev-utils
dependencyreact-dev-utils
)Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
Published by gaearon about 8 years ago
react-scripts
)public
folder with arbitrary assets. (@gaearon in #703).env
file. (@ayrton in #695).babelrc
and .eslintrc
. (@fson in #689, @gaearon in #705)npm start
doesn’t fail in a composed Docker container. (@arekkas in #711)eject
are now cleaner. (@gaearon in #723)eslint-config-react-app
)react/no-danger-with-children
and react/style-prop-object
rules. (@fson in #696)babel-preset-react-app
)react-dev-utils
)create-react-app
)README
to npm. There were no other changes.Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
If you used a global ESLint installation for the editor integration, you’ll need to install these versions of global ESLint packages.
index.html
into public
FolderYou’ll also need to create a new folder called public
in the root of your project. Then, move index.html
and files it references (such as a favicon) into that folder.
You can no longer reference any files from ./src
in index.html
. Instead, public/index.html
can now only reference files other inside of the public
folder using a special variable called %PUBLIC_URL%
.
For example, instead of:
<link rel="shortcut icon" href="./src/favicon.ico">
You would need to move both index.html
and src/favicon.ico
into the public
folder, and change <link>
to look like this:
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
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 and why these changes were made.
Published by gaearon about 8 years ago
This is a hotfix release for a broken package.
It contained no changes to the code.
react-scripts
)Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
Published by gaearon about 8 years ago
react-scripts
)jpeg
, wav
, mp3
, m4a
, aac
, and oga
. (@mareksuscak in #624, @danharper in #665)*.json.gzip
files are no longer created in the project folder. (@thangngoc89 in #620)@
now works with tests. (@fson in #584)create-react-app
)react-scripts
to create-react-app
with --scripts-version
works again. (@yesmeck in #632)You may optionally update the global command (it’s not required):
npm install -g [email protected]
Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
Published by gaearon about 8 years ago
react-scripts
).jsx
file extension. (@tizmagik in #563)Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
Published by gaearon about 8 years ago
react-scripts
)NODE_PATH
environment variable for absolute import
paths. (@jimmyhmiller in #476)src/setupTests.js
exists, it will be used to setup the test environment. (@gaelduplessix in #548)HTTPS
environment variable is set to true
, development server will run in HTTPS mode. (@dceddia in #552)Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
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. 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. This ensures it gets included into the production build as well, and its filename contains the content hash.
If you used static files with <link href>
, read this new guide on how to make sure these files get included into the builds. For example, you can replace <link href="/src/favicons/favicon-32.png">
with <link href="./src/favicons/favicon-32.png">
, 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.
Published by gaearon about 8 years ago
react-scripts
)Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
Published by gaearon about 8 years ago
react-scripts
)src
directory. (@fson in #504)<link href>
in index.html
will now be correctly resolved, so deleting favicon.ico
is not an error anymore. (@andreypopp in #428)<div ref={node => this.node = node}>
. (@mrscobbler in #529)react-constant-elements
Babel transform because of its bugs. (@gaearon in #534)create-react-app
).idea
folder, which is necessary for future WebStorm integration. (@denofevil in #522)You may optionally update the global command (it’s not required):
npm install -g [email protected]
Inside any created project that has not been ejected, run:
npm install --save-dev --save-exact [email protected]
Now favicon.ico
is not treated specially anymore.
If you use it, move it to src
and add the following line to <head>
in your HTML:
<link rel="shortcut icon" href="./src/favicon.ico">
Since 0.3.0 added a test runner, we recommend that you add it to the scripts
section of your package.json
like this:
// ...
"scripts": {
// ...
"test": "react-scripts test --env=jsdom"
}
Published by gaearon about 8 years ago
react-scripts
)async
and await
syntax. (@gaearon in #327, @fson in #332).webp
extension are now supported. (@gafemoyano in #458)package.json
. (@wdhorton in #477)Update react-scripts
to point to 0.2.3
in your package.json
and run npm install
. You shouldn’t need to do anything else.
Newly created projects will use 0.2.3
automatically. You don’t need to update the global create-react-app
CLI itself. It stays at 0.2.0
for now because it doesn’t have any changes.
Published by gaearon about 8 years ago
react-scripts
)npm install
ing a missing dependency now forces a rebuild. (@gaearon in #349)Object.assign()
polyfill is now bundled by default. (@gaearon in #399)otf
font format is now supported. (@A-gambit in #434)new-cap
linting rule has been disabled thanks to feedback from Immutable.js users. (@rricard in #470)Update react-scripts
to point to 0.2.2
in your package.json
and run npm install
. You shouldn’t need to do anything else.
Newly created projects will use 0.2.2
automatically. You don’t need to update the global create-react-app
CLI itself. It stays at 0.2.0
for now because it doesn’t have any changes.