Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@raumobil/react-scripts

raumobil5MIT1.1.4-raumo.7

Configuration and scripts for Create React App.

readme

Create React App Build Status PRs Welcome

Create React apps with no build configuration.

Create React App works on macOS, Windows, and Linux.
If something doesn’t work, please file an issue.

Quick Overview

npx create-react-app my-app
cd my-app
npm start

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

Then open http://localhost:3000/ to see your app.
When you’re ready to deploy to production, create a minified bundle with npm run build.

npm start

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.

Just create a project, and you’re good to go.

Creating an App

You’ll need to have Node 8.10.0 or later on your local development machine (but it’s not required on the server). You can use nvm (macOS/Linux) or nvm-windows to easily switch Node versions between different projects.

To create a new app, you may choose one of the following methods:

npx

npx create-react-app my-app

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

npm

npm init react-app my-app

npm init <initializer> is available in npm 6+

Yarn

yarn create react-app my-app

yarn create is available in Yarn 0.25+

It will create a directory called my-app inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

No configuration or complicated folder structures, just the files you need to build your app.
Once the installation is done, you can open your project folder:

cd my-app

Inside the newly created project, you can run some built-in commands:

npm start or yarn start

Runs the app in development mode.
Open http://localhost:3000 to view it in the browser.

The page will automatically reload if you make changes to the code.
You will see the build errors and lint warnings in the console.

Build errors

npm test or yarn test

Runs the test watcher in an interactive mode.
By default, runs tests related to files changed since the last commit.

Read more about testing.

npm run build or yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Your app is ready to be deployed.

User Guide

You can find detailed instructions on using Create React App and many tips in its documentation.

How to Update to New Versions?

Please refer to the User Guide for this and other information.

Philosophy

  • One Dependency: There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them.

  • No Configuration Required: You don't need to configure anything. A reasonably good configuration of both development and production builds is handled for you so you can focus on writing code.

  • No Lock-In: You can “eject” to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off.

What’s Included?

Your environment will have everything you need to build a modern single-page React app:

  • React, JSX, ES6, TypeScript and Flow syntax support.
  • Language extras beyond ES6 like the object spread operator.
  • Autoprefixed CSS, so you don’t need -webkit- or other prefixes.
  • A fast interactive unit test runner with built-in support for coverage reporting.
  • A live development server that warns about common mistakes.
  • A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
  • An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria. (Note: Using the service worker is opt-in as of `react-scripts@2.0.0` and higher)
  • Hassle-free updates for the above tools with a single dependency.

Check out this guide for an overview of how these tools fit together.

The tradeoff is that these tools are preconfigured to work in a specific way. If your project needs more customization, you can "eject" and customize it, but then you will need to maintain this configuration.

Create React App is a great fit for:

  • Learning React in a comfortable and feature-rich development environment.
  • Starting new single-page React applications.
  • Creating examples with React for your libraries and components.

Here are few common cases where you might want to try something else:

  • If you want to try React without hundreds of transitive build tool dependencies, consider using a single HTML file or an online sandbox instead.

  • If you need to integrate React code with a server-side template framework like Rails, Django or Symfony, or if you’re not building a single-page app, consider using nwb, or Neutrino which are more flexible. For Rails specifically, you can use Rails Webpacker. For Symfony, try Symfony's Webpack Encore.

  • If you need to publish a React component, nwb can also do this, as well as Neutrino's react-components preset.

  • If you want to do server rendering with React and Node.js, check out Next.js or Razzle. Create React App is agnostic of the backend, and just produces static HTML/JS/CSS bundles.

  • If your website is mostly static (for example, a portfolio or a blog), consider using Gatsby instead. Unlike Create React App, it pre-renders the website into HTML at the build time.

  • Finally, if you need more customization, check out Neutrino and its React preset.

All of the above tools can work with little to no configuration.

If you prefer configuring the build yourself, follow this guide.

Contributing

We'd love to have your helping hand on create-react-app! See CONTRIBUTING.md for more information on what we're looking for and how to get started.

React Native

Looking for something similar, but for React Native?
Check out Expo CLI.

Acknowledgements

We are grateful to the authors of existing related projects for their ideas and collaboration:

License

Create React App is open source software licensed as MIT.

changelog

2.1.3 (January 4, 2019)

v2.1.3 is a maintenance release to fix a vulnerability in webpack-dev-server.

:memo: Documentation

:house: Internal

:hammer: Underlying Tools

  • react-scripts
    • #6064 Update webpack-dev-server 3.1.9 -> 3.1.14. (@Friss)

Committers: 8

Migrating from 2.1.2 to 2.1.3

Inside any created project that has not been ejected, run:

npm install --save --save-exact react-scripts@2.1.3

or

yarn add --exact react-scripts@2.1.3

2.1.2 (December 23, 2018)

v2.1.2 is a maintenance release including various bug fixes.

:rocket: New Feature

  • babel-preset-react-app
    • #5487 Add allowESModules option to babel-preset-react-app (@Pajn)

:bug: Bug Fix

  • create-react-app
  • babel-preset-react-app
  • babel-plugin-named-asset-import
    • #5573 Fix named-asset-import plugin to work with export-as syntax (@NShahri)
  • react-app-polyfill
  • react-scripts

:nail_care: Enhancement

:memo: Documentation

:house: Internal

  • react-scripts
  • Other
  • react-dev-utils
  • react-error-overlay
    • #5451 fix: add sideEffects: false to react-error-overlay. (@SimenB)
  • babel-preset-react-app
    • #5487 Add allowESModules option to babel-preset-react-app. (@Pajn)
  • create-react-app

Committers: 36

Migrating from 2.1.1 to 2.1.2

Inside any created project that has not been ejected, run:

npm install --save --save-exact react-scripts@2.1.2

or

yarn add --exact react-scripts@2.1.2

2.1.1 (October 31, 2018)

Happy Halloween 🎃 👻! This spooky release brings a treat: decorator support in TypeScript files!

:bug: Bug Fix

  • babel-preset-react-app
  • react-scripts

:nail_care: Enhancement

  • babel-preset-react-app

:memo: Documentation

:house: Internal

  • react-error-overlay
  • babel-plugin-named-asset-import
  • react-scripts
    • #5651 Make serviceWorker config argument optional in typescript. (@eddedd88)

Committers: 8

Migrating from 2.1.0 to 2.1.1

Inside any created project that has not been ejected, run:

npm install --save --save-exact react-scripts@2.1.1

or

yarn add --exact react-scripts@2.1.1

2.1.0 (October 29, 2018)

Create React App 2.1 adds support for TypeScript! Read the documentation to get started.

New applications can be created using TypeScript by running:

$ npx create-react-app my-app --typescript

:rocket: New Feature

  • create-react-app, react-scripts
  • babel-preset-react-app, react-scripts

:bug: Bug Fix

:nail_care: Enhancement

  • create-react-app, react-scripts
    • #5593 Refine how TypeScript types are handled. (@Timer)
  • react-scripts
  • react-dev-utils, react-scripts

:memo: Documentation

:house: Internal

Committers: 15

Migrating from 2.0.5 to 2.1.0

Inside any created project that has not been ejected, run:

npm install --save --save-exact react-scripts@2.1.0

or

yarn add --exact react-scripts@2.1.0

2.0.5 (October 14, 2018)

:bug: Bug Fix

  • react-dev-utils

  • create-react-app

    • #5362 Fix CI: non-semver compliant Yarn versions. (@Timer)

  • react-scripts

    • #5301 Fix TypeError when registering service workers without config. (@peterbe)

:nail_care: Enhancement

  • babel-preset-react-app

    • #4984 Use the correct dependency for babel-plugin-dynamic-import-node. (@vikr01)

  • react-scripts

:memo: Documentation

:house: Internal

  • Other

  • create-react-app

    • #5362 Fix CI: non-semver compliant Yarn versions. (@Timer)
  • react-scripts
    • #5317 Remove unused require for getCacheIdentifier after ejecting. (@benbrandt)

Committers: 23

Migrating from 2.0.4 to 2.0.5

Inside any created project that has not been ejected, run:

npm install --save --save-exact react-scripts@2.0.5

or

yarn add --exact react-scripts@2.0.5

2.0.4 (October 3, 2018)

:bug: Bug Fix

  • react-scripts
  • babel-preset-react-app

:nail_care: Enhancement

  • create-react-app
  • react-scripts

:memo: Documentation

:house: Internal

Committers: 11

Migrating from 2.0.3 to 2.0.4

Inside any created project that has not been ejected, run:

npm install --save --save-exact react-scripts@2.0.4

or

yarn add --exact react-scripts@2.0.4

2.0.3 (October 1, 2018)

Create React App 2.0 brings a year’s worth of improvements in a single dependency update. We summarized all of the changes in a blog post!

Check it out: Create React App 2.0: Babel 7, Sass, and More.

It provides a high-level overview of new features and improvements. Now let's see how to update your app to the latest version in detail.

Migrating from 1.x to 2.0.3

Inside any created project that has not been ejected, run:

npm install --save --save-exact react-scripts@2.0.3

or

yarn add --exact react-scripts@2.0.3

If you previously ejected but now want to upgrade, one common solution is to find the commits where you ejected (and any subsequent commits changing the configuration), revert them, upgrade, and later optionally eject again. It’s also possible that the feature you ejected for (maybe Sass or CSS Modules?) is now supported out of the box. You can find a list of notable new features in the Create React App 2.0 blog post.

Breaking Changes

Like any major release, `react-scripts@2.0` contains a few breaking changes. We expect that they won't affect every user, but we recommend to scan over these sections to see if something is relevant to you. If we missed something, please file a new issue.

Node 6 is no longer supported

Please upgrade to Node 8 (LTS) or later.

Polyfills for IE 9, IE 10, and IE 11 are no longer included by default (but you can opt in!)

We have dropped default support for Internet Explorer 9, 10, and 11. If you still need to support these browsers, follow the instructions below.

First, install react-app-polyfill:

npm install react-app-polyfill

or

yarn add react-app-polyfill

Next, place one of the following lines at the very top of src/index.js:

import 'react-app-polyfill/ie9'; // For IE 9-11 support
import 'react-app-polyfill/ie11'; // For IE 11 support

You can read more about these polyfills here.

Dynamic import() of a CommonJS module now has a .default property

Webpack 4 changed the behavior of import() 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.:

const throttle = await import('lodash/throttle');
// replace with
const throttle = await import('lodash/throttle').then(m => m.default);

require.ensure() is superseded by dynamic import()

We previously allowed code splitting with a webpack-specific directive, require.ensure(). It is now disabled in favor of import(). To switch to import(), follow the examples below:

Single Module

require.ensure(['module-a'], function() {
  var a = require('module-a');
  // ...
});

// Replace with:
import('module-a').then(a => {
  // ...
});

Multiple Module

require.ensure(['module-a', 'module-b'], function() {
  var a = require('module-a');
  var b = require('module-b');
  // ...
});

// Replace with:
Promise.all([import('module-a'), import('module-b')]).then(([a, b]) => {
  // ...
});

The default Jest environment was changed to jsdom

Look at the test entry in the scripts section of your package.json. Here's a table how to change it from "before" and "after", depending on what you have there:

1.x (if you have this...) 2.x (...change it to this!)
react-scripts test --env=jsdom react-scripts test
react-scripts test react-scripts test --env=node

Object proxy configuration is superseded by src/setupProxy.js

To check if action is required, look for the proxy key in package.json and follow this table:

  1. I couldn't find a proxy key in package.json
    • No action is required!
  2. The value of proxy is a string (e.g. http://localhost:5000)
    • No action is required!
  3. The value of proxy is an object
    • Follow the migration instructions below.

It's worth highlighting: if your proxy field is a string, e.g. http://localhost:5000, or you don't have it, skip this section. This feature is still supported and has the same behavior.

If your proxy is an object, that means you are using the advanced proxy configuration. It has become fully customizable so we removed the limited support for the object-style configuration. Here's how to recreate it.

First, install http-proxy-middleware using npm or Yarn:

npm install http-proxy-middleware

or

yarn add http-proxy-middleware

Next, create src/setupProxy.js and place the following contents in it:

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  // ...
};

Now, migrate each entry in your proxy object one by one, e.g.:

"proxy": {
  "/api": {
    "target": "http://localhost:5000/"
    },
  "/*.svg": {
    "target": "http://localhost:5000/"
  }
}

Place entries into src/setupProxy.js like so:

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://localhost:5000/' }));
  app.use(proxy('/*.svg', { target: 'http://localhost:5000/' }));
};

You can also use completely custom logic there now! This wasn't possible before.

.mjs file extension support is removed

Change the extension of any files in your project using .mjs to just .js.

It was removed because of inconsistent support from underlying tools. We will add it back after it stops being experimental, and Jest gets built-in support for it.

PropTypes definitions are now removed in production

Normally, this shouldn't affect your logic and should make the resulting bundle smaller. However, you may be relying on PropTypes definition for production logic. This is not recommended, and will break now. If a library does it, one possible solution is to file an issue in it with a proposal to use a different field (not propTypes) to signal that the declaration needs to be retained.

Anything missing?

This was a large release, and we might have missed something.

Please file an issue and we will try to help.

Migrating from 2.0.0-next.xyz

If you used 2.x alphas, please follow these instructions.

Detailed Changelog

For a readable summary of the changes, check out our blog post.

:rocket: New Feature

  • react-scripts
  • react-dev-utils, react-scripts
  • babel-preset-react-app
  • babel-preset-react-app, confusing-browser-globals, eslint-config-react-app, react-dev-utils, react-error-overlay, react-scripts
  • create-react-app
  • babel-preset-react-app, react-scripts

:boom: Breaking Change

  • react-app-polyfill, react-scripts
  • react-scripts
  • react-dev-utils
  • babel-preset-react-app
    • #3818 Remove PropTypes from production build (#209) (@iansu)
  • eslint-config-react-app
    • #2319 Changes no-unused-expressions lint from warning to error (@amupitan)
  • eslint-config-react-app, react-error-overlay, react-scripts
  • eslint-config-react-app, react-scripts

:bug: Bug Fix

  • react-scripts
  • react-error-overlay
    • #5203 Fix IE 11 compatibility (@Timer)
    • #5198 Polyfill error overlay for IE9 support (@Timer)
    • #4024 Fix floating caret position incorrect while scrolling overlay (@jihchi)
  • react-dev-utils
  • babel-preset-react-app
  • babel-preset-react-app, react-error-overlay, react-scripts
  • react-app-polyfill
  • react-error-overlay, react-scripts
  • babel-preset-react-app, react-scripts
    • #5078 Prevent the cache of files using Babel Macros (@Timer)
  • react-dev-utils, react-error-overlay, react-scripts
  • create-react-app
    • #4677 Support scoped package names for scripts-version option in create-react-app cli (@bugzpodder)
    • #2705 Don't delete error logs when install fails (@mg)
  • react-dev-utils, react-scripts
  • babel-plugin-named-asset-import, babel-preset-react-app, eslint-config-react-app, react-dev-utils, react-error-overlay, react-scripts
  • create-react-app, react-dev-utils, react-scripts

:nail_care: Enhancement

  • create-react-app, react-scripts
  • react-dev-utils, react-scripts
  • react-dev-utils
  • react-scripts
  • babel-preset-react-app, react-error-overlay, react-scripts
  • react-dev-utils, react-error-overlay, react-scripts
    • #4930 Switch from cheap-module-source-map eval-source-map (@jasonLaster)
    • #3124 update jest to 22 and support watchPathIgnorePatterns configuration (@aisensiy)
  • confusing-browser-globals, react-dev-utils, react-error-overlay, react-scripts
  • babel-preset-react-app, confusing-browser-globals, eslint-config-react-app, react-dev-utils, react-error-overlay, react-scripts
  • babel-preset-react-app
  • create-react-app
    • #4375 fix: update envinfo + implementation, update issue_template (@tabrindle)
  • eslint-config-react-app, react-error-overlay, react-scripts
    • #4048 Add ESLint check for incorrect propTypes usage (#3840) (@iansu)
    • #2690 Bump eslint-plugin-jsx-a11y version (@gaearon)
  • eslint-config-react-app
  • create-react-app, react-dev-utils, react-scripts
  • babel-preset-react-app, create-react-app, react-dev-utils, react-error-overlay, react-scripts
  • babel-preset-react-app, react-scripts
    • #3770 Loosen Babel preset to use browserslist (@Timer)
  • babel-preset-react-app, eslint-config-react-app, react-dev-utils, react-error-overlay, react-scripts

:memo: Documentation

:house: Internal

  • eslint-config-react-app
    • #5205 Disable react/no-deprecated rule (@Timer)
    • #5051 Adjust ESLint configuration for v5 (@Timer)
    • #4187 Change no-unused-vars 'args' from none to all to show warning on dest… (@goncy)
  • babel-plugin-named-asset-import, babel-preset-react-app, confusing-browser-globals, create-react-app, eslint-config-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
  • Other
  • react-scripts
  • react-dev-utils
    • #5150 Run behavioral smoke tests with Jest, add output tests (@Timer)
    • #4514 Make Sass missing message friendlier (@Timer)
    • #4138 Allow ModuleScopePlugin accecpts an array as its appSrc (@froyog)
    • #4016 (chore): Alphabetize and clean files-array in react-dev-utils package.json (@petetnt)
  • babel-preset-react-app, react-error-overlay, react-scripts
  • babel-preset-react-app
    • #5119 Clean up @babel/plugin-transform-regenerator (@lixiaoyan)
    • #5033 Lock babel configuration back to IE 9 support (ES5) (@Timer)
  • react-dev-utils, react-scripts
  • babel-preset-react-app, create-react-app, react-dev-utils, react-error-overlay, react-scripts
  • react-error-overlay, react-scripts
  • babel-plugin-named-asset-import, babel-preset-react-app, react-dev-utils, react-error-overlay, react-scripts
  • confusing-browser-globals, react-dev-utils, react-error-overlay, react-scripts
  • react-dev-utils, react-error-overlay, react-scripts
  • create-react-app
  • react-error-overlay
  • confusing-browser-globals, eslint-config-react-app
  • eslint-config-react-app, react-scripts

Committers: 116

Releases Before 2.x

Please refer to CHANGELOG-1.x.md for earlier versions.