Awesome list of Create React App articles / tutorials / videos and FAQ
A collection of awesome things regarding Create React App ecosystem.
This is not documented yet. More info at Maintaining a fork of react-scripts as an alternative to ejecting #682
Alternatives from Create React App README:
Notable alternatives also include:
Your project can consume variables declared in your environment as if they were declared locally in your JS files. By default you will have NODE_ENV defined for you, and any other environment variables starting with REACT_APP_. These environment variables will be defined for you on process.env. For example, having an environment variable named REACT_APP_SECRET_CODE will be exposed in your JS as process.env.REACT_APP_SECRET_CODE, in addition to process.env.NODE_ENV
To define permanent environment variables, create a file called .env in the root of your project
Right now it is possible installing dotenv and updating npm scripts:
"scripts": {
"start": "node -r dotenv/config ./node_modules/.bin/react-scripts start dotenv_config_path=development.env",
"build": "node -r dotenv/config ./node_modules/.bin/react-scripts build dotenv_config_path=production.env"
}
There is the Pull Request #1344 that implements Support different env configs:
Read different .env
configs according to current command (start / test / build).
What .env* files are used?
.env
- Default.env.development
, .env.test
, .env.production
- Environment-specific settings..env.local
- Local overrides. This file is loaded for all environments except test..env.development.local
, .env.test.local
, .env.production.local
- Local overrides of environment-specific settings.Files priority (file is skipped if does not exist):
.env.test.local
, env.test
, .env.local
, .env
.env.production.local
, env.production
, .env.local
, .env
.env.development.local
, env.development
, .env.local
, .env
Priority from left to right.
By default (if custom config does not exist) read env variables from .env file.
These are environment variables. Use cross-env to set environment variables across platforms or .env config.
"scripts": {
"start": "cross-env BROWSER=firefox react-scripts start"
}
If you use .env
config - just add BROWSER
variable:
BROWSER=none
Original issue - Lazy load (chunking) feature? #925
You can use require.ensure() because we use webpack under the hood. When we switch to webpack 2, you can use System.import instead.
What is the alternative for webpack module.resolveDirectory
?
Official solution: create node_modules
at src
directory - src/node_modules as official solution for absolute imports #1065
Another way - use NODE_PATH
env variable. It is a directory name to be resolved to the current directory as well as its ancestors, and searched for modules. It is resolve.modules for webpack. More details at node official documentation "Loading from the global folders".
"scripts": {
"start": "cross-env NODE_PATH=src/scripts react-scripts start"
}
If you use .env
config - just add NODE_PATH
variable:
NODE_PATH=src/scripts
By default HMR works only for CSS modules. If you want to use for components add these lines to index.js:
NOTE: This will work but not preserve the components state, but redux / mobx / whatever state managers will be preserved
// App - root component
import App from './App';
const render = Root => {
ReactDOM.render(<Root />,
document.getElementById('root')
);
}
render(App);
if (module.hot) {
module.hot.accept('./App', () => {
var NextApp = require('./App').default;
render(NextApp);
});
}
Create React App doesn’t support decorator syntax at the moment.
There are PR Adding support for custom babel configuration #1357. If PR is merged then these features will be available:
PR is closed but
@dan_abramov wrote:
So we do not recommend to use babel presets besides the babel-preset-react-app that is already configured at Create React App.
There is the issue - Customize build folder #1354. This is feature is very useful along with entry point customizing and I have left comment about this.
But according to this Pull Request Fix- react-scripts build doesn't allow for specified path #1362 we should not expect such customizations in near future.
won’t be introducing more configuration on a case-by-case basis. We might add support for a configuration file at some point, but not now.
There are some hacks how to change webpack config but note that it is officially unsupported and can break in any version.
Example is here
"scripts": {
"build:custom": "node scripts/webpack"
}
// scripts/webpack.js
const webpack = require('react-scripts/node_modules/webpack');
const craWebpackConfig = require('react-scripts/config/webpack.config.prod');
const OfflinePlugin = require('offline-plugin');
const config = {
...craWebpackConfig,
plugins: [
...craWebpackConfig.plugins,
new OfflinePlugin()
]
};
webpack(config).run(function(err, stats) {
if (err !== null) {
console.log('done');
} else {
console.log(err);
}
});
Note: this is officially unsupported and can break in any version.
Also note that this is just webpack config extending, not react-scripts build
. There is not beautiful console logs, comparison of the build size and other react-scitpts build
command features.
Such approach (workaround) also helps to resolve problems when need to build/pubish a single component. There is the related issue - How to publish components without ejecting #796. Just override webpack entry point and output.
Always remember that using not usual loaders (like yaml, markdown, dsv loaders etc.), additional plugins and features from drafts and proposals makes your application more complex, maybe with dead syntax features and it is become impossible to migrate from current webpack configuration.