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.
Why I love Create React App and don't want to eject
- Add BuildProgressPlugin #1011
- Add runtime error overlay #1101
- Make all vars accessiable in index.html #1440
- Adding support for custom babel configuration #1357
- Feature/different env config files #1344
- Fix workflow if react-scripts package is linked via npm-link #1356
- Allow to configure any options of babel-preset-env #1415
- Create git repository with initial commit #1288
- Export render function #1292
- Add SASS support documentation #1008
Open:
- Sharing components between apps, "create-react-component"
- Plugin System #670
- src/node_modules as official solution for absolute imports #1065
- Maintaining a fork of react-scripts as an alternative to ejecting #682
- Make it possible to disable Live reloading #1428
- How to start https server with SSL cert? #1411
- Customize build folder #1354
Closed:
- Optional Sass Support #78
- Preprocess future-proof CSS features #130
- A global CLI for running a single component #645
- Proposal: "configurator" field in package.json #215
- Less/Sass #351
- 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
- How to get "create-react-app" to work with your API
- 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!
- React Storybooks meets Create React App
- 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
- Tweaking Configuration For React Scripts In Create React App
- Customizing create-react-app
- Configure create-react-app without ejecting ⏏
- 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
- Start Using React to Build Web Applications
- Getting Started with Redux
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.
- React Storybook Scripts - Create React App scripts with React Storyboard built in
- React App Rewired - Configure the unconfigurable, override create-react-app webpack configs.
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.js
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
NOTE: this feature is done but not yet released
- First Pull Request with implementation - Configure which browser to open in npm start #1148
- Real code that maybe released - react-dev-utils/openBrowser.js
Add BROWSER
env variable. Use cross-env to set environment variables across platforms.
"scripts": {
"start": "cross-env BROWSER=firefox react-scripts start"
}
If you use .env
config - just add BROWSER
variable:
BROWSER=firefox
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 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.
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
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
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:
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.
"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.