Fork of the official Create React App!
yarn create @everlutionsk/react-app <directory>
Your global NPM registry must be set to Everlution NPM.
Please use
yarn config set registry https://npm.everlution.skif necessary.
- Monorepo support
- Improved styled-components support
- enable experimental react-refresh
- Automatic per-component CSS import for AntD
- Optimize Material-UI imports to reduce bundle size in dev mode
- Optimize lodash imports to reduce bundle size in dev mode
- Safe environment loader for
environment.tsfiles. - Bundle analyzer - usage:
react-scripts build --analyze-bundle - Apollo React types generator
- Alias
lodashtolodash-esif possible to reduce bundle size - support for
project.config.js- usage: see below - customized ESLint rules
- Build ID available as
BUILD_IDenv variable and asbuild-idmeta inindex.html - Support hot-reload for linked packages. See
link-withfor more details. - Disable inline-runtime-chunk by default in production
- Reduce default IMAGE_INLINE_SIZE_LIMIT to 3000 (from 10000)
- Simplified source maps: always use
cheap-module-source-mapand ignore source maps fromnode_modules - build configuration support (see below)
Build process supports project.config.js as a source of ENV values, CSP configuration, etc.
The following code is supported:
module.exports = {
environmentValues: {
STAGE: 'dev',
},
contentSecurityPolicy: {
scriptSrc: ["'self'"],
imgSrc: ["'self'", 'data:'],
},
htmlParameters: {
title: 'App title',
},
};Config will allow you to:
- access
process.env.STAGEin anyenvironment.tsfile - inject Content Security Policy into
index.html - use
<%= title %>placeholder inindex.html
For more info about project.config.js, please see @everlutionsk/project-config.
Build process supports cra.config.js as a source of custom webpack plugins which will be used during compilation.
The following code is supported:
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = function () {
return {
plugins: [
new MonacoWebpackPlugin({
languages: ['json', 'javascript', 'typescript'],
features: ['!snippets'],
}),
],
};
};If you are using monorepo setup, then make sure that you have a correct paths setting in tsconfig.base.json.
Otherwise, TypeScript can suffer from performance issues in watch mode.
For example, for a namespace @project, you need to add the following:
{
"compilerOptions": {
"paths": {
"@project/*": ["packages/*"]
}
}
}Babel is already trying to include all necessary polyfills for the not dead browsers. However, to support IE, you need to include additional polyfills.
We recommend to use polyfill.io with the nomodule attribute to ignore it in moder browsers.
Example:
<!-- public/index.html -->
<head>
<script
nomodule
crossorigin="anonymous"
src="https://polyfill.io/v3/polyfill.min.js?features=fetch%2CArray.prototype.find%2CArray.prototype.findIndex%2CArray.prototype.includes%2CString.prototype.includes%2CObject.assign%2CObject.entries%2CSymbol"
></script>
</head>This will load the necessary polyfills for IE11. However, every blocking dependency on an external service could be harmfull, so please make sure you include nomodule attribute, which will inform the modern browsers that they need to ignore it completelly.
A provided polyfill.io link includes only the basic polyfills. To fully support IE11, you need to go trough the every page/functionality and check if there is no missing polyfill.