├── .travis.yml ├── CONTRIBUTING.md ├── LICENSE └── README.md /.travis.yml: -------------------------------------------------------------------------------- 1 | language: ruby 2 | rvm: 3 | - 2.2 4 | before_script: 5 | - gem install awesome_bot 6 | script: 7 | - awesome_bot README.md --allow-dupe --allow-redirect 8 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | We love pull requests from everyone. The only stipulation is that you ensure the added resource is _awesome_, and kind to everyone involved. 4 | 5 | ## Step-by-step 6 | 7 | 1. Fork, then clone the repo: `git clone git@github.com:your-username/awesome-create-react-app.git` 8 | 2. Make your change 9 | 3. Push to your fork and [submit a pull request][pr]. 10 | 11 | Please ensure your pull request adheres to the following guidelines: 12 | 13 | - Search previous suggestions before making a new one, as yours may be a duplicate. 14 | - Make an individual pull request for each suggestion. 15 | - Use [title-casing](http://titlecapitalization.com) (AP style). 16 | - New categories, or improvements to the existing categorization are welcome. 17 | - Keep descriptions short and simple, but descriptive. 18 | - End all descriptions with a full stop/period. 19 | - Check your spelling and grammar. 20 | - Make sure your text editor is set to remove trailing whitespace. 21 | 22 | Thank you for your suggestions! 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | CC0 1.0 Universal 2 | 3 | Statement of Purpose 4 | 5 | The laws of most jurisdictions throughout the world automatically confer 6 | exclusive Copyright and Related Rights (defined below) upon the creator and 7 | subsequent owner(s) (each and all, an "owner") of an original work of 8 | authorship and/or a database (each, a "Work"). 9 | 10 | Certain owners wish to permanently relinquish those rights to a Work for the 11 | purpose of contributing to a commons of creative, cultural and scientific 12 | works ("Commons") that the public can reliably and without fear of later 13 | claims of infringement build upon, modify, incorporate in other works, reuse 14 | and redistribute as freely as possible in any form whatsoever and for any 15 | purposes, including without limitation commercial purposes. These owners may 16 | contribute to the Commons to promote the ideal of a free culture and the 17 | further production of creative, cultural and scientific works, or to gain 18 | reputation or greater distribution for their Work in part through the use and 19 | efforts of others. 20 | 21 | For these and/or other purposes and motivations, and without any expectation 22 | of additional consideration or compensation, the person associating CC0 with a 23 | Work (the "Affirmer"), to the extent that he or she is an owner of Copyright 24 | and Related Rights in the Work, voluntarily elects to apply CC0 to the Work 25 | and publicly distribute the Work under its terms, with knowledge of his or her 26 | Copyright and Related Rights in the Work and the meaning and intended legal 27 | effect of CC0 on those rights. 28 | 29 | 1. Copyright and Related Rights. A Work made available under CC0 may be 30 | protected by copyright and related or neighboring rights ("Copyright and 31 | Related Rights"). Copyright and Related Rights include, but are not limited 32 | to, the following: 33 | 34 | i. the right to reproduce, adapt, distribute, perform, display, communicate, 35 | and translate a Work; 36 | 37 | ii. moral rights retained by the original author(s) and/or performer(s); 38 | 39 | iii. publicity and privacy rights pertaining to a person's image or likeness 40 | depicted in a Work; 41 | 42 | iv. rights protecting against unfair competition in regards to a Work, 43 | subject to the limitations in paragraph 4(a), below; 44 | 45 | v. rights protecting the extraction, dissemination, use and reuse of data in 46 | a Work; 47 | 48 | vi. database rights (such as those arising under Directive 96/9/EC of the 49 | European Parliament and of the Council of 11 March 1996 on the legal 50 | protection of databases, and under any national implementation thereof, 51 | including any amended or successor version of such directive); and 52 | 53 | vii. other similar, equivalent or corresponding rights throughout the world 54 | based on applicable law or treaty, and any national implementations thereof. 55 | 56 | 2. Waiver. To the greatest extent permitted by, but not in contravention of, 57 | applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and 58 | unconditionally waives, abandons, and surrenders all of Affirmer's Copyright 59 | and Related Rights and associated claims and causes of action, whether now 60 | known or unknown (including existing as well as future claims and causes of 61 | action), in the Work (i) in all territories worldwide, (ii) for the maximum 62 | duration provided by applicable law or treaty (including future time 63 | extensions), (iii) in any current or future medium and for any number of 64 | copies, and (iv) for any purpose whatsoever, including without limitation 65 | commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes 66 | the Waiver for the benefit of each member of the public at large and to the 67 | detriment of Affirmer's heirs and successors, fully intending that such Waiver 68 | shall not be subject to revocation, rescission, cancellation, termination, or 69 | any other legal or equitable action to disrupt the quiet enjoyment of the Work 70 | by the public as contemplated by Affirmer's express Statement of Purpose. 71 | 72 | 3. Public License Fallback. Should any part of the Waiver for any reason be 73 | judged legally invalid or ineffective under applicable law, then the Waiver 74 | shall be preserved to the maximum extent permitted taking into account 75 | Affirmer's express Statement of Purpose. In addition, to the extent the Waiver 76 | is so judged Affirmer hereby grants to each affected person a royalty-free, 77 | non transferable, non sublicensable, non exclusive, irrevocable and 78 | unconditional license to exercise Affirmer's Copyright and Related Rights in 79 | the Work (i) in all territories worldwide, (ii) for the maximum duration 80 | provided by applicable law or treaty (including future time extensions), (iii) 81 | in any current or future medium and for any number of copies, and (iv) for any 82 | purpose whatsoever, including without limitation commercial, advertising or 83 | promotional purposes (the "License"). The License shall be deemed effective as 84 | of the date CC0 was applied by Affirmer to the Work. Should any part of the 85 | License for any reason be judged legally invalid or ineffective under 86 | applicable law, such partial invalidity or ineffectiveness shall not 87 | invalidate the remainder of the License, and in such case Affirmer hereby 88 | affirms that he or she will not (i) exercise any of his or her remaining 89 | Copyright and Related Rights in the Work or (ii) assert any associated claims 90 | and causes of action with respect to the Work, in either case contrary to 91 | Affirmer's express Statement of Purpose. 92 | 93 | 4. Limitations and Disclaimers. 94 | 95 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 96 | surrendered, licensed or otherwise affected by this document. 97 | 98 | b. Affirmer offers the Work as-is and makes no representations or warranties 99 | of any kind concerning the Work, express, implied, statutory or otherwise, 100 | including without limitation warranties of title, merchantability, fitness 101 | for a particular purpose, non infringement, or the absence of latent or 102 | other defects, accuracy, or the present or absence of errors, whether or not 103 | discoverable, all to the greatest extent permissible under applicable law. 104 | 105 | c. Affirmer disclaims responsibility for clearing rights of other persons 106 | that may apply to the Work or any use thereof, including without limitation 107 | any person's Copyright and Related Rights in the Work. Further, Affirmer 108 | disclaims responsibility for obtaining any necessary consents, permissions 109 | or other rights required for any use of the Work. 110 | 111 | d. Affirmer understands and acknowledges that Creative Commons is not a 112 | party to this document and has no duty or obligation with respect to this 113 | CC0 or use of the Work. 114 | 115 | For more information, please see 116 | 117 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Awesome Create React App [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) [![Build Status](https://travis-ci.org/tuchk4/awesome-create-react-app.svg?branch=master)](https://travis-ci.org/tuchk4/awesome-create-react-app) 2 | 3 | A collection of awesome things regarding Create React App ecosystem. 4 | 5 | ## Table of Contents 6 | 7 | - [Create-React-App General Resources](#create-react-app-general-resources) 8 | - [Tools](#tools) 9 | - [CRAFT Templates](#craft-templates) 10 | - [Deployment](#deployment) 11 | - [Articles](#articles) 12 | - [Tweaking Configuration](#tweaking-configuration) 13 | - [Video Tutorials](#video-tutorials) 14 | - [React Scripts Versions](#react-scripts-versions) 15 | - [Alternatives](#alternatives) 16 | - [FAQ](#faq) 17 | - [How to Use Env Config](#how-to-use-env-config) 18 | - [How to Use Multiple Env Configs](#how-to-use-multiple-env-configs) 19 | - [Advanced Configuration](#advanced-configuration) 20 | - [Lazy Loading](#lazy-loading) 21 | - [How to Setup Root Dir for Require?](#how-to-setup-root-dir-for-require) 22 | - [HMR (Hot Module Replacement)](#hmr-hot-module-replacement) 23 | - [How to Use Custom Babel Presets](#how-to-use-custom-babel-presets) 24 | - [How to Change Webpack Entry Point and Output Dir?](#how-to-change-webpack-entry-point-and-output-dir) 25 | - [Watching Build Mode on Create React App](#watching-build-mode-on-create-react-app) 26 | - [How to Change Webpack Config](#how-to-change-webpack-config) 27 | - [How to Add Custom Webpack Plugins](#how-to-add-custom-webpack-plugins) 28 | 29 | 30 | ## Create-React-App General Resources 31 | 32 | - [Create React App GitHub](https://github.com/facebookincubator/create-react-app) 33 | - [Create React App 2.0](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html) 34 | - [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) 35 | - [Why I Love Create React App and Don't Want to Eject](https://medium.com/@valeriy.sorokobatko/why-i-love-create-react-app-e63b1be689a3) 36 | 37 | 38 | ## Tools 39 | 40 | - [CRA Generate: Scaffold a React Component](https://github.com/rthor/cra-generate) - Scaffold a React component. 41 | - [CRAFT: Create React App From Template](https://medium.com/@stoyanstefanov/craft-create-react-app-from-template-7fd3383d0954) - Create-React-App from the template 42 | - [CRA Universal CLI](https://github.com/antonybudianto/cra-universal) - CLI for SSR Create React App, without eject 43 | 44 | ## CRAFT Templates 45 | 46 | - [CRA + Progressive Web App goodness](https://github.com/jeffposnick/create-react-pwa/) - Progressive Web App tempalte. 47 | - [File API Input Layer](https://github.com/stoyan/fail) - File Upload Tempalte 48 | - [An Almost Static Stack. CRA + react-snapshot](https://github.com/superhighfives/an-almost-static-stack) - Bridge the gap between static sites and single page apps. 49 | - [CRA + Redux](https://github.com/tuchk4/craft-redux) - Create React App Template with Redux and Router 50 | - [Craft Template - MobX + React Router](https://github.com/timarney/cra-mobx-reactrouter) - CRA Template with Mobx and Router 51 | 52 | ## Deployment 53 | 54 | - [Surge VS GitHub Pages: How to Deploy A Create-React-App Project](https://medium.freecodecamp.com/surge-vs-github-pages-deploying-a-create-react-app-project-c0ecbf317089#.7mahr7kyj) 55 | - [How to Deploy a Create-React-App (Nginx)](https://www.peterbe.com/plog/how-to-deploy-a-create-react-app) 56 | - [Netlify: Deploy React Apps in Less Than 30 Seconds](https://www.netlify.com/blog/2016/07/22/deploy-react-apps-in-less-than-30-seconds/) 57 | - [Zero Configuration Deployment for React Apps With Zeit's Now and Now-Deploy](https://medium.com/@kawixiao/zero-configuration-deployment-for-react-apps-with-zeits-now-4f002be98c) 58 | - [Heroku: Deploying React With Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration) 59 | - [Create React App Buildpack](https://github.com/mars/create-react-app-buildpack) 60 | - [Creare React App - now.sh](https://github.com/xkawi/create-react-app-now) 61 | 62 | ## Articles 63 | 64 | - [Learning React With Create-React-App (Part 1)](https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-1-a12e1833fdc) 65 | - [Learning React With Create-React-App (Part 2)](https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-2-3ad99f38b48d) 66 | - [Learning React With Create-React-App (Part 3)](https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-3-322447d14192) 67 | - [Learning React With Create-React-App (Part 4)](https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-4-9f843c8c1ccc) 68 | - [How to Create ClojureScript App](https://medium.com/@roman01la/how-to-create-clojurescript-app-4e38778c4762) 69 | - [How to Create Elm App](https://medium.com/@eduardkyvenko/how-to-create-elm-app-cf052629a11a) 70 | - [Creare React App - now.sh](https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/) 71 | - [How to Get "Create-React-App" to Work With Your Rails API](https://www.fullstackreact.com/articles/how-to-get-create-react-app-to-work-with-your-rails-api/) 72 | - [Using Create-React-App With React Router + Express.js](https://medium.com/@patriciolpezjuri/using-create-react-app-with-react-router-express-js-8fa658bf892d) 73 | - [Adding Hot Module Reloading to Create React App](https://medium.com/@sheepsteak/adding-hot-module-reloading-to-create-react-app-e053fadf569d) 74 | - [How You Can Use React-Toolbox With Create-React-App](https://github.com/react-toolbox/react-toolbox-themr) 75 | - [How to Use Ant Design With Create-React-App](https://ant.design/docs/react/use-with-create-react-app) 76 | - [How to Build an Electron App Using Create-React-App. No Webpack Configuration Or "Ejecting" Necessary](https://medium.freecodecamp.com/building-an-electron-application-with-create-react-app-97945861647c) 77 | - [Tip: Create React App and SASS](https://medium.com/@dan_abramov/well-to-be-perfectly-clear-you-can-just-outside-of-create-react-app-setup-6e44f91cc086) 78 | - [React / Create React App — but I Don't Wanna Eject](https://medium.com/@timarney/but-i-dont-wanna-eject-3e3da5826e39) 79 | - [Jumpstate + Redux + Create-React-App — No Dispatching or Action-Creators Required!](https://medium.com/@tannerlinsley/jumpstate-redux-create-react-app-no-dispatch-or-action-creators-required-374e18dbcfe1) 80 | - [Getting Started With Create React App and AVA](https://semaphoreci.com/community/tutorials/getting-started-with-create-react-app-and-ava) 81 | - [Cabin: 7 Tutorials That Teach You How to Build a Feature-Rich, Scalable Social Network App Using React and Redux](http://cabin.getstream.io/) 82 | - [Using Rekit to Quickly Create a React App](https://medium.com/@nate_wang/using-rekit-to-quickly-create-a-react-app-108bcc07e7f) 83 | - [Create React App vs Other Starter Projects](http://andrewhfarmer.com/create-react-app/) 84 | - [An Almost Static Stack](https://medium.com/superhighfives/an-almost-static-stack-6df0a2791319) 85 | - [Upgrading a create-react-app project to SSR + code splitting](https://medium.com/@andreiduca/upgrading-a-create-react-app-project-to-a-ssr-code-splitting-setup-9da57df2040a) 86 | 87 | 88 | ## Tweaking Configuration 89 | 90 | - [Tweaking Configuration for React Scripts in Create React App](https://medium.com/@shubheksha/tweaking-configuration-for-react-scripts-in-create-react-app-d91e9d03a42f) 91 | - [Customizing Create-React-App](https://medium.com/@tacomanator/customizing-create-react-app-aa9ffb88165) 92 | - [Configure Create-React-App Without Ejecting ⏏](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a) 93 | - [Create-React-Scripts — create your own react-scripts without fork](https://medium.com/@szer0601/create-react-scripts-create-your-own-react-scripts-without-fork-e73d384c7369) 94 | 95 | ## Video Tutorials 96 | 97 | - [Getting Started With React With Create React App](https://www.youtube.com/watch?v=pCgDRgmfilE) 98 | - [Create React App - What's All the Fuss About?](https://www.youtube.com/watch?v=wLgHjZM4pWM) 99 | - [Create React App With ExpressJS and Now](https://www.youtube.com/watch?v=HfAPmRpxQEY) 100 | - [Migrate to Create React App](https://www.youtube.com/watch?v=g8O0FT0uoDA) 101 | - [Use Create-React-App to Setup a Simple React App](https://egghead.io/lessons/react-react-fundamentals-development-environment-setup) 102 | - [Why I Love Create React App (React Allicante 2017)](https://www.youtube.com/watch?v=Jn18gZ9jO0U) 103 | 104 | 105 | ## React Scripts Versions 106 | 107 | This is not documented yet. More info at [Maintaining a fork of react-scripts as an alternative to ejecting #682](https://github.com/facebookincubator/create-react-app/issues/682) 108 | 109 | - [React Super Scripts](https://github.com/shrynx/react-super-scripts) - Adds super powers to create-react-app and allows custom configs without ejecting. 110 | - [React Scripts (Isomorphic)](https://github.com/firstlookmedia/react-scripts) - Provides configuration for FLM's isomorphic React apps. 111 | - [Create React App Sass](https://github.com/rickharrison/create-react-app-sass) - Enhances create-react-app to include support for Sass. 112 | - [Custom React Scripts](https://www.npmjs.com/package/custom-react-scripts) - Configuration and scripts for Create React App. 113 | - [Typescript React Starter](https://github.com/Microsoft/TypeScript-React-Starter) - CRA scripts version maintained by Microsoft's team to start apps with Typescript. 114 | - [React Scripts Web](https://github.com/raymondsze/create-react-scripts/tree/master/packages/react-scripts-web) - React-scripts built using create-react-scripts, supports workbox(PWA), vendorDll, babelrc and eslintrc. 115 | - [React Scripts With SSR](https://github.com/joernb/react-scripts-with-ssr) - Adds server-side rendering to create-react-app projects. 116 | 117 | 118 | ## Alternatives 119 | 120 | - [React App Rewired](https://github.com/timarney/react-app-rewired) - Configure the unconfigurable, override create-react-app webpack configs. 121 | - [Create React Scripts](https://github.com/raymondsze/create-react-scripts/tree/master/packages/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. 122 | 123 | Alternatives from [Create React App README](https://github.com/facebookincubator/create-react-app#alternatives): 124 | 125 | - [insin/nwb](https://github.com/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). 126 | - [mozilla/neo](https://github.com/mozilla/neo) - Create and build React web applications with zero initial configuration and minimal fuss. 127 | - [NYTimes/kyt](https://github.com/NYTimes/kyt) - Drowning in Webpack configs? Try this build, test and development tool for advanced JavaScript apps. 128 | - [zeit/next.js](https://github.com/zeit/next.js) - Framework for server-rendered React apps. 129 | - [gatsbyjs/gatsby](https://github.com/gatsbyjs/gatsby) - Transform plain text into dynamic blogs and websites using React. 130 | 131 | Notable alternatives also include: 132 | 133 | - [enclave](https://github.com/eanplatter/enclave) - A simpler way to compile React applications. 134 | - [motion](https://github.com/motion/motion) - A simple CLI for running React projects. 135 | - [quik](https://github.com/satya164/quik)- A quick way to prototype and build apps with React and Babel with zero-setup. 136 | - [sagui](https://github.com/saguijs/sagui) - Front-end tooling in a single dependency. 137 | - [roc](https://github.com/rocjs/roc)- Modern JavaScript Development Ecosystem. 138 | - [aik](https://github.com/d4rkr00t/aik)- Frontend Playground. 139 | - [react-app](https://github.com/kriasoft/react-app) - CLI tools and templates for authoring React applications with a single dev dependency and no configurations. 140 | - [dev-toolkit](https://github.com/stoikerty/dev-toolkit) - Development Toolkit for React Veterans. 141 | - [tarec](https://github.com/geowarin/tarec) - The Awesome React Cli. 142 | 143 | 144 | ## FAQ 145 | 146 | ### How to Use Env Config 147 | 148 | - [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) 149 | 150 | > 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 151 | 152 | - [Adding Development Environment Variables In `.env`](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) 153 | 154 | > To define permanent environment variables, create a file called .env in the root of your project 155 | 156 | ### How to Use Multiple Env Configs 157 | 158 | Right now it is possible installing [dotenv](https://github.com/motdotla/dotenv) and updating npm scripts: 159 | 160 | ```json 161 | "scripts": { 162 | "start": "node -r dotenv/config ./node_modules/.bin/react-scripts start dotenv_config_path=development.env", 163 | "build": "node -r dotenv/config ./node_modules/.bin/react-scripts build dotenv_config_path=production.env" 164 | } 165 | ``` 166 | 167 | There is the Pull Request [#1344](https://github.com/facebookincubator/create-react-app/pull/1344) that implements [Support different env configs](https://github.com/facebookincubator/create-react-app/issues/1343): 168 | 169 | Read different `.env` configs according to current command (start / test / build). 170 | 171 | What .env* files are used? 172 | 173 | * `.env` - Default 174 | * `.env.development`, `.env.test`, `.env.production` - Environment-specific settings. 175 | * `.env.local` - Local overrides. This file is loaded for all environments except test. 176 | * `.env.development.local`, `.env.test.local`, `.env.production.local` - Local overrides of environment-specific settings. 177 | 178 | Files priority (file is skipped if does not exist): 179 | 180 | * npm test - `.env.test.local`, `env.test`, `.env.local`, `.env` 181 | * npm run build - `.env.production.local`, `env.production`, `.env.local`, `.env` 182 | * npm start - `.env.development.local`, `env.development`, `.env.local`, `.env` 183 | 184 | Priority from left to right. 185 | 186 | By default (if custom config does not exist) read env variables from .env file. 187 | 188 | ### Advanced Configuration 189 | 190 | Create React App Advanced Configuration 191 | 192 | These are environment variables. Use [cross-env](https://github.com/kentcdodds/cross-env) to set environment variables across platforms or *.env* config. 193 | 194 | ```json 195 | "scripts": { 196 | "start": "cross-env BROWSER=firefox react-scripts start" 197 | } 198 | ``` 199 | 200 | If you use `.env` config - just add `BROWSER` variable: 201 | 202 | ``` 203 | BROWSER=none 204 | ``` 205 | 206 | ### Lazy Loading 207 | 208 | Original issue - [Lazy load (chunking) feature? #925](https://github.com/facebookincubator/create-react-app/issues/925) 209 | 210 | > You can use require.ensure() because we use webpack under the hood. 211 | When we switch to webpack 2, you can use System.import instead. 212 | 213 | ### How to Setup Root Dir for Require 214 | 215 | What is the alternative for `webpack module.resolveDirectory`? 216 | 217 | Official solution: create `node_modules` at `src` directory - [src/node_modules as official solution for absolute imports #1065](https://github.com/facebookincubator/create-react-app/issues/1065) 218 | 219 | 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](https://webpack.js.org/configuration/resolve/#resolve-modules) for webpack. More details at node official documentation ["Loading from the global folders"](https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders). 220 | 221 | ```json 222 | "scripts": { 223 | "start": "cross-env NODE_PATH=src/scripts react-scripts start" 224 | } 225 | ``` 226 | 227 | If you use `.env` config - just add `NODE_PATH` variable: 228 | 229 | ``` 230 | NODE_PATH=src/scripts 231 | ``` 232 | 233 | ## HMR (Hot Module Replacement) 234 | 235 | By default HMR works only for CSS modules. If you want to use for components add these lines to *index.js*: 236 | 237 | > NOTE: This will work but not preserve the components state, but redux / mobx / whatever state managers will be preserved 238 | 239 | ```js 240 | // App - root component 241 | import App from './App'; 242 | 243 | const render = Root => { 244 | ReactDOM.render(, 245 | document.getElementById('root') 246 | ); 247 | } 248 | 249 | render(App); 250 | 251 | if (module.hot) { 252 | module.hot.accept('./App', () => { 253 | var NextApp = require('./App').default; 254 | render(NextApp); 255 | }); 256 | } 257 | ``` 258 | 259 | ### How to Use Custom Babel Presets 260 | 261 | Create React App [doesn’t support decorator syntax](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) at the moment. 262 | 263 | There are PR [Adding support for custom babel configuration #1357](https://github.com/facebookincubator/create-react-app/pull/1357). If PR is merged then these features will be available: 264 | 265 | - [Decorators](https://www.npmjs.com/package/babel-plugin-transform-decorators ) 266 | - Features from [stage-0 preset](https://babeljs.io/docs/plugins/preset-stage-0/) 267 | - Any new babel features and presets 268 | 269 | PR is closed but 270 | 271 | - As soon as feature becomes candidate - CRA will support it. Here is [tweet](https://twitter.com/dan_abramov/status/818626114037968899) about decorators. 272 | - 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. 273 | 274 | [@dan_abramov](https://twitter.com/dan_abramov) wrote: 275 | 276 | > - [I'm happy to add decorators after they've moved to stage 3](https://twitter.com/dan_abramov/status/818626114037968899) 277 | 278 | > - [Bind proposal hasn't been updated in a long time and doesn't appear to progress. Might not make it at all either.](https://twitter.com/dan_abramov/status/818626659926609920) 279 | 280 | > - [Imagine the horror of building / maintaining an app that relies on dead syntax features five years from now.](https://twitter.com/dan_abramov/status/818627079306694658) 281 | 282 | 283 | So we do not recommend to use babel presets besides the [babel-preset-react-app](https://github.com/facebookincubator/create-react-app/tree/master/packages/babel-preset-react-app) that is already configured at Create React App. 284 | 285 | ### How to Change Webpack Entry Point and Output Dir? 286 | 287 | There is the issue - [Customize build folder #1354](https://github.com/facebookincubator/create-react-app/issues/1354). 288 | This is feature is very useful along with entry point customizing and I have left [comment](https://github.com/facebookincubator/create-react-app/issues/1354#issuecomment-275647959) about this. 289 | 290 | But according to this Pull Request [Fix- react-scripts build doesn't allow for specified path #1362](https://github.com/facebookincubator/create-react-app/pull/1362#issuecomment-271284738) we should not expect such customizations in near future. 291 | 292 | > 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. 293 | 294 | There are some hacks how to change webpack config but note that it is officially unsupported and can break in any version. 295 | 296 | ### Watching Build Mode on Create React App 297 | 298 | Example is [here](https://gist.github.com/int128/e0cdec598c5b3db728ff35758abdbafd) 299 | 300 | ### How to Change Webpack Config? 301 | ### How to Add Custom Webpack Plugins? 302 | 303 | ```json 304 | "scripts": { 305 | "build:custom": "node scripts/webpack" 306 | } 307 | ``` 308 | 309 | ```js 310 | // scripts/webpack.js 311 | const webpack = require('react-scripts/node_modules/webpack'); 312 | const craWebpackConfig = require('react-scripts/config/webpack.config.prod'); 313 | const OfflinePlugin = require('offline-plugin'); 314 | 315 | const config = { 316 | ...craWebpackConfig, 317 | plugins: [ 318 | ...craWebpackConfig.plugins, 319 | new OfflinePlugin() 320 | ] 321 | }; 322 | 323 | webpack(config).run(function(err, stats) { 324 | if (err !== null) { 325 | console.log('done'); 326 | } else { 327 | console.log(err); 328 | } 329 | }); 330 | ``` 331 | 332 | **Note: this is officially unsupported and can break in any version.** 333 | 334 | 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. 335 | 336 | 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](https://github.com/facebookincubator/create-react-app/issues/796). Just override webpack entry point and output. 337 | 338 | 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. 339 | --------------------------------------------------------------------------------