Awesome Create React App

A collection of awesome things regarding Create React App ecosystem.

Please feel free to file an issue or suggest articles, videos and other useful resources via Pull Requests.

Create React App General Resources

Most discussed / interested issues

Tools

CRA generate: Scaffold a React component

Articles

Video tutorials

Alternatives

FAQ

How to use env config

Adding Custom Environment Variables

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

Adding Development Environment Variables In .env

To define permanent environment variables, create a file called .env in the root of your project

How to use multiple env configs

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 feature request with implemented Pull Request - Support different env configs:

Read different .env configs according to current command (start / test / build).

Read dev.env when npm start and npm test
Read prod.env when npm run build

By default (if custom config does not exist) read env variables from .env file.

How to change dev server port

Add PORT env variable. Use cross-env to set environment variables across platforms.

"scripts": {
  "start": "cross-env PORT=9001 react-scripts start"
}

If you use .env config - just add PORT variable:

PORT=9001

How to setup root dir for require (webpack module.resolveDirectory analog)?

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.modulesDirectories 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

How to use custom babel presets

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:

Decorators
Features from stage-0 preset
Any new babel features and presets

@dan_abramov wrote:

I'm happy to add decorators after they've moved to stage 3

Bind proposal hasn't been updated in a long time and doesn't appear to progress. Might not make it at all either.

Imagine the horror of building / maintaining an app that relies on dead syntax features five years from now.

So we do not recommend to use babel presets besides the babel-preset-react-app that is already configured at Create React App.

How to change webpack config?

How to add custom webpack plugins?

"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.

cibrian/awesome-create-react-app