- Purpose
- Setup
- What is inside
- Documentation
- Using TypeScript
- Using Flow
- 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 you 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-domand add scripts to your package.json:
{
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"analyze": "react-scripts analyze"
"test": "react-scripts test"
}
}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
analyzecommand- TypeScript Just Works™
- Flow Just Works™
To start a development server:
react-scripts startTo build the app for production:
react-scripts buildTo analyze production build with Bundle Analyzer:
react-scripts analyzeTo run tests:
react-scripts testSee an official documentation.
Follow the official documentaion guide.
To learn more about TypeScript, check out its documentation or this React/TypeScript cheatsheet.
To learn more about how do Babel and TypeScript work together I recommend reading this blogpost.
Follow the official documentaion guide.
To learn more about Flow, check out its 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
},
};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"]
}To see what is included in Babel preset, you can check it out here.
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.