- Purpose
- Setup
- What is inside
- Documentation
- Customizing webpack config
- Customizing Babel config
- Upgrading react-scripts
- Contributing
@strv/react-scripts
is a fork of facebook/create-react-app, with Next.js-like custom configuration available and other goodies depending on our team's needs.
Having a single toolbox allows us to focus on building and not wasting time on configuration. New features and bug fixes are available with simple a yarn upgrade @strv/react-scripts
command and not doing it manually. Easy maintenance is especially important with increasing number of projects.
It's stable, maintained and battle-tested framework with awesome DX running inside of hundred thousands of React apps.
It allows us to receive new features or bug fixes coming from the huge community, taking away the burden of maintainig custom setup. Having a custom fork allows us to include features according to our needs by default and potentially releasing bug fixes quicker if necessary.
At the same time, it's awesome that other people from the community can benefit from our contributions (#4964, #4852, #4932...) back to the facebook/create-react-app.
When starting a new project, it's highly recommended to do so with create-strv-app, where (not only) @strv/react-scripts
is already included.
But if you need to install it separately:
yarn add @strv/react-scripts react react-dom
and add scripts to your package.json
:
{
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"analyze": "react-scripts analyze"
"test": "react-scripts test --env=jsdom"
}
}
If you are already using facebook/create-react-app it should be a drop-in replacement.
STRV react-scripts
is packed with latest tech to achieve awesome DX and build highly performant apps:
- webpack 4
- Babel 7
analyze
command- Flow Just Works™
- Soon: TypeScript Just Works™
To start a development server:
react-scripts start
To build the app for production:
react-scripts build
To analyze production build with Bundle Analyzer:
react-scripts analyze
To run tests:
react-scripts test
See an official documentation.
In order to extend webpack
config, create a app.config.js
file at the root of your app and define webpack
transform function.
Example of modified webpack
config file:
// app.config.js is not transformed by Babel. So you can only use javascript features supported by your version of Node.js.
module.exports = {
webpack: (config, { dev }) => {
if (dev) {
// modify config used for development
} else {
config.resolve.alias = {
...config.resolve.alias,
react: 'preact-compat',
'react-dom': 'preact-compat'
}
}
return config // return the modified config
},
devServer: config => {
// modify config used for webpack-dev-server
return config
}
}
You usually shouldn't need to modify configuration, maybe it's something what should be included by default?
In order to extend internal Babel config, simply specify a .babelrc
/ .babelrc.js
/ babel.config.js
at the root of your app. This file is optional, but when it exists, it's considered as the source of truth. This is the reason why you have to include @strv/react-scripts/babel
at the top.
This is designed so that you are not surprised by modifications made to the babel configurations.
Example of extended Babel config file:
{
"presets": [
"@strv/react-scripts/babel"
],
"plugins": [
"babel-plugin-styled-components"
]
}
@strv/react-scripts
Babel preset currently includes:
@babel/preset-env
@babel/preset-react
@babel/plugin-transform-destructuring
@babel/plugin-proposal-class-properties
@babel/plugin-proposal-object-rest-spread
@babel/plugin-transform-runtime
@babel/plugin-transform-regenerator
babel-plugin-transform-react-remove-prop-types
@babel/plugin-syntax-dynamic-import
babel-plugin-macros
To see configuration in detail you can inspect the preset by yourself.
@strv/react-scripts
has a Backstroke app set up. So whenever there is a new release of facebook/create-react-app a pull request on this repo will be created. Our scripts are based on next
branch.
To incroporate upstream
changes, please follow these steps:
- Merge the pull request. There shouldn't be any conflicts.
- Pull your changes locally.
- Rebase our modifications on top of theirs and resolve potential conflicts. This will make sure that our changes are always on top and compatible.
git checkout STRV
git rebase next
- Publish the new version
yarn publish
or
npm publish
- Force push new changes to the remote
git push origin -f STRV
Since we are force pushing, your git pull
could fail. Run these commands to get the latest changes:
git checkout STRV
git fetch origin
git reset --hard origin/STRV
If you have any ideas what could be included by default, open an issue.
We are thankful for tremendous work of almost 500 contributors done on facebook/create-react-app.