October 23, 2018

1811 words 9 mins read

tuchk4/awesome-create-react-app

tuchk4/awesome-create-react-app

Awesome list of Create React App articles / tutorials / videos and FAQ
repo name tuchk4/awesome-create-react-app
repo link https://github.com/tuchk4/awesome-create-react-app
homepage
language
size (curr.) 75 kB
stars (curr.) 1265
created 2017-01-23
license Creative Commons Zero v1.0 Universal

Awesome Create React App Awesome Build Status

A collection of awesome things regarding Create React App ecosystem.

Table of Contents

Create-React-App General Resources

Tools

CRAFT Templates

Deployment

Articles

Tweaking Configuration

Video Tutorials

React Scripts Versions

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

Alternatives

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

FAQ

How to Use Env Config

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

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

Advanced Configuration

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

Lazy Loading

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.

How to Setup Root Dir for Require

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

HMR (Hot Module Replacement)

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);
  });
}

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:

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:

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 Entry Point and Output Dir?

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.

Watching Build Mode on Create React App

Example is here

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.

awesome tutorial tutorial video
comments powered by Disqus
micromata/awesome-javascript-learning

micromata/awesome-javascript-learning

October 22, 2018

A tiny list limited to the best JavaScript Learning Resources
TalAter/awesome-service-workers

TalAter/awesome-service-workers

October 20, 2018

:nut_and_bolt: A collection of awesome resources for learning Service Workers
nebgnahz/awesome-iot-hacks

nebgnahz/awesome-iot-hacks

October 20, 2018

A Collection of Hacks in IoT Space so that we can address them (hopefully).
awesomedata/awesome-public-datasets

awesomedata/awesome-public-datasets

October 19, 2018

A topic-centric list of HQ open datasets.
vinta/awesome-python

vinta/awesome-python

October 18, 2018

A curated list of awesome Python frameworks, libraries, software and resources