A collection of awesome things regarding Create React App ecosystem.

• Create-React-App General Resources
• Tools
• CRAFT Templates
• Deployment
• Articles
• Tweaking Configuration
• Video Tutorials
• React Scripts Versions
• Alternatives
• FAQ
  • How to Use Env Config
  • How to Use Multiple Env Configs
  • Advanced Configuration
  • Lazy Loading
  • How to Setup Root Dir for Require?
  • HMR (Hot Module Replacement)
  • How to Use Custom Babel Presets
  • How to Change Webpack Entry Point and Output Dir?
  • Watching Build Mode on Create React App
  • How to Change Webpack Config
  • How to Add Custom Webpack Plugins

• Create React App GitHub
• Create React App 2.0
• User Guide
• Why I Love Create React App and Don't Want to Eject

• CRA Generate: Scaffold a React Component - Scaffold a React component.
• CRAFT: Create React App From Template - Create-React-App from the template
• CRA Universal CLI - CLI for SSR Create React App, without eject

• CRA Progressive Web App goodness - Progressive Web App tempalte.
• File API Input Layer - File Upload Tempalte
• An Almost Static Stack. CRA react-snapshot - Bridge the gap between static sites and single page apps.
• CRA Redux - Create React App Template with Redux and Router
• Craft Template - MobX React Router - CRA Template with Mobx and Router

• Surge VS GitHub Pages: How to Deploy A Create-React-App Project
• How to Deploy a Create-React-App (Nginx)
• Netlify: Deploy React Apps in Less Than 30 Seconds
• Zero Configuration Deployment for React Apps With Zeit's Now and Now-Deploy
• Heroku: Deploying React With Zero Configuration
• Create React App Buildpack
• Creare React App - now.sh

• Learning React With Create-React-App (Part 1)
• Learning React With Create-React-App (Part 2)
• Learning React With Create-React-App (Part 3)
• Learning React With Create-React-App (Part 4)
• How to Create ClojureScript App
• How to Create Elm App
• Creare React App - now.sh
• How to Get "Create-React-App" to Work With Your Rails API
• Using Create-React-App With React Router Express.js
• Adding Hot Module Reloading to Create React App
• How You Can Use React-Toolbox With Create-React-App
• How to Use Ant Design With Create-React-App
• How to Build an Electron App Using Create-React-App. No Webpack Configuration Or "Ejecting" Necessary
• Tip: Create React App and SASS
• React / Create React App — but I Don't Wanna Eject
• Jumpstate Redux Create-React-App — No Dispatching or Action-Creators Required!
• Getting Started With Create React App and AVA
• Cabin: 7 Tutorials That Teach You How to Build a Feature-Rich, Scalable Social Network App Using React and Redux
• Using Rekit to Quickly Create a React App
• Create React App vs Other Starter Projects
• An Almost Static Stack
• Upgrading a create-react-app project to SSR code splitting

• Tweaking Configuration for React Scripts in Create React App
• Customizing Create-React-App
• Configure Create-React-App Without Ejecting ⏏
• Create-React-Scripts — create your own react-scripts without fork

• Getting Started With React With Create React App
• Create React App - What's All the Fuss About?
• Create React App With ExpressJS and Now
• Migrate to Create React App
• Use Create-React-App to Setup a Simple React App
• Why I Love Create React App (React Allicante 2017)

This is not documented yet. More info at Maintaining a fork of react-scripts as an alternative to ejecting #682

• React Super Scripts - Adds super powers to create-react-app and allows custom configs without ejecting.
• React Scripts (Isomorphic) - Provides configuration for FLM's isomorphic React apps.
• Create React App Sass - Enhances create-react-app to include support for Sass.
• Custom React Scripts - Configuration and scripts for Create React App.
• Typescript React Starter - CRA scripts version maintained by Microsoft's team to start apps with Typescript.
• React Scripts Web - React-scripts built using create-react-scripts, supports workbox(PWA), vendorDll, babelrc and eslintrc.
• React Scripts With SSR - Adds server-side rendering to create-react-app projects.

• React App Rewired - Configure the unconfigurable, override create-react-app webpack configs.
• Create React Scripts - Easily extend the react-scripts from create-react-app to your own version of react-scripts. Package for SSR, Less, Sass, Workbox(PWA), VendorDll are included.

Alternatives from Create React App README:

• insin/nwb - A toolkit for React, Preact & Inferno apps, React libraries and other npm modules for the web, with no configuration (until you need it).
• mozilla/neo - Create and build React web applications with zero initial configuration and minimal fuss.
• NYTimes/kyt - Drowning in Webpack configs? Try this build, test and development tool for advanced JavaScript apps.
• zeit/next.js - Framework for server-rendered React apps.
• gatsbyjs/gatsby - Transform plain text into dynamic blogs and websites using React.

Notable alternatives also include:

• enclave - A simpler way to compile React applications.
• motion - A simple CLI for running React projects.
• quik- A quick way to prototype and build apps with React and Babel with zero-setup.
• sagui - Front-end tooling in a single dependency.
• roc- Modern JavaScript Development Ecosystem.
• aik- Frontend Playground.
• react-app - CLI tools and templates for authoring React applications with a single dev dependency and no configurations.
• dev-toolkit - Development Toolkit for React Veterans.
• tarec - The Awesome React Cli.

• 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

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):

• npm test - .env.test.local, env.test, .env.local, .env
• npm run build - .env.production.local, env.production, .env.local, .env
• npm start - .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:

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

PR is closed but

• As soon as feature becomes candidate - CRA will support it. Here is tweet about decorators.
• Features from stages 0 - 2 are not support because a lot of them hasn't been updated in a long time and doesn't appear to progress.

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

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.