From 6a7e6e57a488a6405e2cd7e21b6e86aff7e0c33b Mon Sep 17 00:00:00 2001 From: kitze Date: Sat, 24 Sep 2016 17:22:09 +0200 Subject: [PATCH 001/140] allows custom webpack config in .env that will allow configuring support for sass, less, babel stage-0, decorators, and css-modules --- packages/react-scripts/config/customizers.js | 30 +++++++++++++++++++ .../react-scripts/config/get-custom-config.js | 28 +++++++++++++++++ .../config/webpack.config.dev.js | 10 +++++-- .../config/webpack.config.prod.js | 15 +++++++--- packages/react-scripts/package.json | 8 ++++- 5 files changed, 83 insertions(+), 8 deletions(-) create mode 100644 packages/react-scripts/config/customizers.js create mode 100644 packages/react-scripts/config/get-custom-config.js diff --git a/packages/react-scripts/config/customizers.js b/packages/react-scripts/config/customizers.js new file mode 100644 index 00000000000..a3531653ee0 --- /dev/null +++ b/packages/react-scripts/config/customizers.js @@ -0,0 +1,30 @@ +module.exports = { + 'BABEL_STAGE_0': { + array: 'presets', + module: 'babel-preset-stage-0' + }, + 'DECORATORS': { + array: 'plugins', + module: 'babel-plugin-transform-decorators-legacy' + }, + 'CSS_MODULES': { + config: { + dev: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss', + prod: 'style!css?modules&-autoprefixer&importLoaders=1!postcss' + } + }, + 'SASS': { + array: 'loaders', + loader: { + test: /\.scss$/, + loader: "style!css!postcss!sass" + } + }, + 'LESS': { + array: 'loaders', + loader: { + test: /\.less$/, + loader: "style!css!postcss!less" + } + } +} \ No newline at end of file diff --git a/packages/react-scripts/config/get-custom-config.js b/packages/react-scripts/config/get-custom-config.js new file mode 100644 index 00000000000..67d741444e9 --- /dev/null +++ b/packages/react-scripts/config/get-custom-config.js @@ -0,0 +1,28 @@ +var customizers = require('./customizers'); + +function getCustomConfig(env) { + var env = env || {}; + var result = Object + .keys(customizers) + .reduce(function (finalConfig, customizerKey) { + var customizer = customizers[customizerKey]; + if (env && env['process.env.REACT_APP_' + customizerKey]) { + if (customizer.array) { + finalConfig[customizer.array].push(customizer.module ? require.resolve(customizer.module) : customizer.loader); + } + else { + finalConfig.others[customizerKey] = customizer.config; + } + } + return finalConfig; + }, { + presets: [], + plugins: [], + loaders: [], + others: {} + }); + + return result; +} + +module.exports = getCustomConfig; \ No newline at end of file diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 0c3e336e781..db68ad889d3 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -19,6 +19,7 @@ var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); var getClientEnvironment = require('./env'); var paths = require('./paths'); +var getCustomConfig = require('./get-custom-config'); // Webpack uses `publicPath` to determine where the app is being served from. // In development, we always serve from the root. This makes config easier. @@ -29,6 +30,8 @@ var publicPath = '/'; var publicUrl = ''; // Get enrivonment variables to inject into our app. var env = getClientEnvironment(publicUrl); +//Get custom configuration for injecting plugins, presets and loaders +var customConfig = getCustomConfig(env, false); // This is the development configuration. // It is focused on developer experience and fast rebuilds. @@ -123,7 +126,8 @@ module.exports = { query: { // @remove-on-eject-begin babelrc: false, - presets: [require.resolve('babel-preset-react-app')], + presets: [require.resolve('babel-preset-react-app')].concat(customConfig.presets), + plugins: [].concat(customConfig.plugins), // @remove-on-eject-end // This is a feature of `babel-loader` for webpack (not Babel itself). // It enables caching results in ./node_modules/.cache/react-scripts/ @@ -141,7 +145,7 @@ module.exports = { // in development "style" loader enables hot editing of CSS. { test: /\.css$/, - loader: 'style!css!postcss' + loader: customConfig.others.CSS_MODULES ? customConfig.others.CSS_MODULES.dev : 'style!css!postcss' }, // JSON is not enabled by default in Webpack but both Node and Browserify // allow it implicitly so we also enable it. @@ -169,7 +173,7 @@ module.exports = { name: 'static/media/[name].[hash:8].[ext]' } } - ] + ].concat(customConfig.loaders) }, // @remove-on-eject-begin // Point ESLint to our predefined config. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 6549b4d8d1d..61b29582fb5 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -18,6 +18,7 @@ var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); var url = require('url'); var paths = require('./paths'); var getClientEnvironment = require('./env'); +var getCustomConfig = require('./get-custom-config'); function ensureSlash(path, needsSlash) { var hasSlash = path.endsWith('/'); @@ -46,6 +47,10 @@ var publicPath = ensureSlash(homepagePathname, true); var publicUrl = ensureSlash(homepagePathname, false); // Get enrivonment variables to inject into our app. var env = getClientEnvironment(publicUrl); +//Get custom configuration for injecting plugins, presets and loaders +var customConfig = getCustomConfig(env); + +console.log('customConfig', customConfig); // Assert this just to be safe. // Development builds of React are slow and not intended for production. @@ -123,7 +128,8 @@ module.exports = { // @remove-on-eject-begin query: { babelrc: false, - presets: [require.resolve('babel-preset-react-app')], + presets: [require.resolve('babel-preset-react-app')].concat(customConfig.presets), + plugins: [].concat(customConfig.plugins), }, // @remove-on-eject-end }, @@ -149,9 +155,10 @@ module.exports = { // Webpack 1.x uses Uglify plugin as a signal to minify *all* the assets // including CSS. This is confusing and will be removed in Webpack 2: // https://github.com/webpack/webpack/issues/283 - loader: ExtractTextPlugin.extract('style', 'css?-autoprefixer!postcss') + loader: ExtractTextPlugin.extract(customConfig.others.CSS_MODULES ? 'style!css?modules&-autoprefixer&importLoaders=1!postcss' : 'style!css?-autoprefixer!postcss') // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, + // JSON is not enabled by default in Webpack but both Node and Browserify // allow it implicitly so we also enable it. { @@ -177,7 +184,7 @@ module.exports = { name: 'static/media/[name].[hash:8].[ext]' } } - ] + ].concat(customConfig.loaders) }, // @remove-on-eject-begin // Point ESLint to our predefined config. @@ -189,7 +196,7 @@ module.exports = { }, // @remove-on-eject-end // We use PostCSS for autoprefixing only. - postcss: function() { + postcss: function () { return [ autoprefixer({ browsers: [ diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 2cdb9cecefa..f8b5e562713 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,5 +1,5 @@ { - "name": "react-scripts", + "name": "react-scripts-with-config", "version": "0.5.1", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", @@ -29,11 +29,17 @@ "babel-jest": "15.0.0", "babel-loader": "6.2.5", "babel-preset-react-app": "^0.2.1", + "babel-plugin-transform-decorators-legacy": "^1.3.4", + "babel-preset-stage-0": "^6.5.0", "case-sensitive-paths-webpack-plugin": "1.1.4", "chalk": "1.1.3", "connect-history-api-fallback": "1.3.0", "cross-spawn": "4.0.0", "css-loader": "0.24.0", + "less": "^2.7.1", + "less-loader": "^2.2.3", + "node-sass": "^3.10.0", + "sass-loader": "^4.0.2" "detect-port": "1.0.0", "dotenv": "2.0.0", "eslint": "3.5.0", From c323ebdf6c55fa742cce053333a1d7d227da3863 Mon Sep 17 00:00:00 2001 From: kitze Date: Sat, 24 Sep 2016 17:25:09 +0200 Subject: [PATCH 002/140] missing comma in package.json --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index f8b5e562713..839883cd637 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -39,7 +39,7 @@ "less": "^2.7.1", "less-loader": "^2.2.3", "node-sass": "^3.10.0", - "sass-loader": "^4.0.2" + "sass-loader": "^4.0.2", "detect-port": "1.0.0", "dotenv": "2.0.0", "eslint": "3.5.0", From c0a9a0c7ea04ca1de947680f6f8d21b91c23be4b Mon Sep 17 00:00:00 2001 From: kitze Date: Sat, 24 Sep 2016 17:25:54 +0200 Subject: [PATCH 003/140] remove console.log for customConfig --- packages/react-scripts/config/webpack.config.prod.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 61b29582fb5..1fa6a760f43 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -50,8 +50,6 @@ var env = getClientEnvironment(publicUrl); //Get custom configuration for injecting plugins, presets and loaders var customConfig = getCustomConfig(env); -console.log('customConfig', customConfig); - // Assert this just to be safe. // Development builds of React are slow and not intended for production. if (env['process.env.NODE_ENV'] !== '"production"') { From 6d149c60a92b3fafd3ce9481223cc247a4e89d36 Mon Sep 17 00:00:00 2001 From: kitze Date: Sat, 24 Sep 2016 17:27:12 +0200 Subject: [PATCH 004/140] modify default template to use decorators, :: binding, sass, less, and css-modules --- .env | 5 +++ packages/react-scripts/package.json | 2 ++ packages/react-scripts/template/src/App.css | 32 +++++++++++++------ packages/react-scripts/template/src/App.js | 26 +++++++++++---- packages/react-scripts/template/src/App.less | 21 ++++++++++++ packages/react-scripts/template/src/App.scss | 12 +++++++ .../react-scripts/template/src/Modules.css | 10 ++++++ packages/react-scripts/template/src/index.js | 3 +- .../template/src/stores/store.js | 15 +++++++++ 9 files changed, 109 insertions(+), 17 deletions(-) create mode 100644 .env create mode 100644 packages/react-scripts/template/src/App.less create mode 100644 packages/react-scripts/template/src/App.scss create mode 100644 packages/react-scripts/template/src/Modules.css create mode 100644 packages/react-scripts/template/src/stores/store.js diff --git a/.env b/.env new file mode 100644 index 00000000000..cdb0d852745 --- /dev/null +++ b/.env @@ -0,0 +1,5 @@ +REACT_APP_DECORATORS=true +REACT_APP_BABEL_STAGE_0=true +REACT_APP_SASS=true +REACT_APP_LESS=true +REACT_APP_CSS_MODULES=true \ No newline at end of file diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 839883cd637..ba24b02d160 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -75,6 +75,8 @@ }, "devDependencies": { "bundle-deps": "1.0.0", + "mobx": "^2.5.1", + "mobx-react": "^3.5.6", "react": "^15.3.0", "react-dom": "^15.3.0" }, diff --git a/packages/react-scripts/template/src/App.css b/packages/react-scripts/template/src/App.css index 15adfdc710c..851fa2ea0ef 100644 --- a/packages/react-scripts/template/src/App.css +++ b/packages/react-scripts/template/src/App.css @@ -1,24 +1,36 @@ .App { - text-align: center; + text-align: center; } .App-logo { - animation: App-logo-spin infinite 20s linear; - height: 80px; + animation: App-logo-spin infinite 20s linear; + height: 80px; +} + +.App-title { + justify-content: center; +} + +.App-button { + margin-left: 15px; } .App-header { - background-color: #222; - height: 150px; - padding: 20px; - color: white; + background-color: #222; + height: 150px; + padding: 20px; + color: white; } .App-intro { - font-size: large; + font-size: large; } @keyframes App-logo-spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } } diff --git a/packages/react-scripts/template/src/App.js b/packages/react-scripts/template/src/App.js index d7d52a7f38a..e1c0cb256da 100644 --- a/packages/react-scripts/template/src/App.js +++ b/packages/react-scripts/template/src/App.js @@ -1,17 +1,31 @@ -import React, { Component } from 'react'; +import React, {Component} from 'react'; import logo from './logo.svg'; -import './App.css'; +//styles +import './App.less'; +import './App.scss'; +import styles from './Modules.css'; + +//mobx +import {observer} from 'mobx-react'; + +@observer class App extends Component { render() { + + const {app} = this.props.store; + return (
- logo -

Welcome to React

+ logo +

{app.title}

+
-

- To get started, edit src/App.js and save to reload. +

+ To get started, edit src/App.js and save to reload.

); diff --git a/packages/react-scripts/template/src/App.less b/packages/react-scripts/template/src/App.less new file mode 100644 index 00000000000..de56cbfc579 --- /dev/null +++ b/packages/react-scripts/template/src/App.less @@ -0,0 +1,21 @@ +.App { + text-align: center; + + &-logo { + animation: App-logo-spin infinite 20s linear; + height: 80px; + } + + &-title { + justify-content: center; + } +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/packages/react-scripts/template/src/App.scss b/packages/react-scripts/template/src/App.scss new file mode 100644 index 00000000000..af447998e33 --- /dev/null +++ b/packages/react-scripts/template/src/App.scss @@ -0,0 +1,12 @@ +.App { + &-header { + background-color: #222; + height: 180px; + padding: 20px; + color: white; + } + + &-intro { + font-size: large; + } +} \ No newline at end of file diff --git a/packages/react-scripts/template/src/Modules.css b/packages/react-scripts/template/src/Modules.css new file mode 100644 index 00000000000..00249229168 --- /dev/null +++ b/packages/react-scripts/template/src/Modules.css @@ -0,0 +1,10 @@ +.app-intro { + animation: App-logo-spin infinite 20s linear; + height: 80px; +} + +.code { + color: red; + font-weight: bold; + justify-content: center; +} \ No newline at end of file diff --git a/packages/react-scripts/template/src/index.js b/packages/react-scripts/template/src/index.js index 54c5ef1a427..47982360d31 100644 --- a/packages/react-scripts/template/src/index.js +++ b/packages/react-scripts/template/src/index.js @@ -2,8 +2,9 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; +import store from './stores/store'; ReactDOM.render( - , + , document.getElementById('root') ); diff --git a/packages/react-scripts/template/src/stores/store.js b/packages/react-scripts/template/src/stores/store.js new file mode 100644 index 00000000000..961e1fd12f9 --- /dev/null +++ b/packages/react-scripts/template/src/stores/store.js @@ -0,0 +1,15 @@ +import {action, observable} from 'mobx'; + +class AppStore { + @observable title = 'Hello ES7 world ๐Ÿ˜œ'; + + @action changeRandomTitle() { + this.title = `Title #${Math.floor((Math.random() * 100) + 1)} ๐Ÿ˜ฒ`; + } +} + +const store = { + app: new AppStore() +} + +export default store; \ No newline at end of file From 1fc27e658fcbc67d68fb706896544b2cd4350ac8 Mon Sep 17 00:00:00 2001 From: kitze Date: Sat, 24 Sep 2016 17:35:57 +0200 Subject: [PATCH 005/140] change name of package --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index ba24b02d160..e01783a8713 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,5 +1,5 @@ { - "name": "react-scripts-with-config", + "name": "custom-react-scripts", "version": "0.5.1", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", From fc9c7e1b526d7e46880b07bd5abb0f73cd60b2ec Mon Sep 17 00:00:00 2001 From: kitze Date: Sat, 24 Sep 2016 18:36:58 +0200 Subject: [PATCH 006/140] changes plugins name to babelPlugins, changes the way get-custom-config detects customizer types, add support for webpack plugins, adds webpack-dashboard as an option --- .env | 3 ++- packages/react-scripts/config/customizers.js | 17 +++++++++--- .../react-scripts/config/get-custom-config.js | 27 +++++++++++++++---- .../config/webpack.config.dev.js | 6 ++--- .../config/webpack.config.prod.js | 4 +-- packages/react-scripts/package.json | 1 + 6 files changed, 43 insertions(+), 15 deletions(-) diff --git a/.env b/.env index cdb0d852745..8b26a83f71b 100644 --- a/.env +++ b/.env @@ -2,4 +2,5 @@ REACT_APP_DECORATORS=true REACT_APP_BABEL_STAGE_0=true REACT_APP_SASS=true REACT_APP_LESS=true -REACT_APP_CSS_MODULES=true \ No newline at end of file +REACT_APP_CSS_MODULES=true +REACT_APP_WEBPACK_DASHBOARD=true \ No newline at end of file diff --git a/packages/react-scripts/config/customizers.js b/packages/react-scripts/config/customizers.js index a3531653ee0..a10a847790a 100644 --- a/packages/react-scripts/config/customizers.js +++ b/packages/react-scripts/config/customizers.js @@ -1,30 +1,39 @@ module.exports = { 'BABEL_STAGE_0': { - array: 'presets', + type: 'preset', module: 'babel-preset-stage-0' }, 'DECORATORS': { - array: 'plugins', + type: 'babelPlugin', module: 'babel-plugin-transform-decorators-legacy' }, 'CSS_MODULES': { + type: 'config', config: { dev: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss', prod: 'style!css?modules&-autoprefixer&importLoaders=1!postcss' } }, 'SASS': { - array: 'loaders', + type: 'loader', loader: { test: /\.scss$/, loader: "style!css!postcss!sass" } }, 'LESS': { - array: 'loaders', + type: 'loader', loader: { test: /\.less$/, loader: "style!css!postcss!less" } + }, + 'WEBPACK_DASHBOARD': { + type: 'plugin', + getPlugin: function getPlugin() { + var DashboardPlugin = require('webpack-dashboard/plugin'); + var Dashboard = require('webpack-dashboard'); + return new DashboardPlugin(new Dashboard().setData) + } } } \ No newline at end of file diff --git a/packages/react-scripts/config/get-custom-config.js b/packages/react-scripts/config/get-custom-config.js index 67d741444e9..576d1bf49a5 100644 --- a/packages/react-scripts/config/get-custom-config.js +++ b/packages/react-scripts/config/get-custom-config.js @@ -7,16 +7,33 @@ function getCustomConfig(env) { .reduce(function (finalConfig, customizerKey) { var customizer = customizers[customizerKey]; if (env && env['process.env.REACT_APP_' + customizerKey]) { - if (customizer.array) { - finalConfig[customizer.array].push(customizer.module ? require.resolve(customizer.module) : customizer.loader); - } - else { - finalConfig.others[customizerKey] = customizer.config; + switch (customizer.type) { + case 'preset': { + finalConfig.presets.push(require.resolve(customizer.module)); + break; + } + case 'babelPlugin': { + finalConfig.babelPlugins.push(require.resolve(customizer.module)); + break; + } + case 'plugin': { + finalConfig.plugins.push(customizer.getPlugin()); + break; + } + case 'loader': { + finalConfig.loaders.push(customizer.loader); + break; + } + case 'config': { + finalConfig.others[customizerKey] = customizer.config; + break; + } } } return finalConfig; }, { presets: [], + babelPlugins: [], plugins: [], loaders: [], others: {} diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index db68ad889d3..01edded99d8 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -127,7 +127,7 @@ module.exports = { // @remove-on-eject-begin babelrc: false, presets: [require.resolve('babel-preset-react-app')].concat(customConfig.presets), - plugins: [].concat(customConfig.plugins), + plugins: [].concat(customConfig.babelPlugins), // @remove-on-eject-end // This is a feature of `babel-loader` for webpack (not Babel itself). // It enables caching results in ./node_modules/.cache/react-scripts/ @@ -183,7 +183,7 @@ module.exports = { }, // @remove-on-eject-end // We use PostCSS for autoprefixing only. - postcss: function() { + postcss: function () { return [ autoprefixer({ browsers: [ @@ -221,7 +221,7 @@ module.exports = { // makes the discovery automatic so you don't have to restart. // See https://github.com/facebookincubator/create-react-app/issues/186 new WatchMissingNodeModulesPlugin(paths.appNodeModules) - ], + ].concat(customConfig.plugins), // Some libraries import Node modules but don't use them in the browser. // Tell Webpack to provide empty mocks for them so importing them works. node: { diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 1fa6a760f43..a3dc7995fd1 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -127,7 +127,7 @@ module.exports = { query: { babelrc: false, presets: [require.resolve('babel-preset-react-app')].concat(customConfig.presets), - plugins: [].concat(customConfig.plugins), + plugins: [].concat(customConfig.babelPlugins), }, // @remove-on-eject-end }, @@ -256,7 +256,7 @@ module.exports = { }), // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`. new ExtractTextPlugin('static/css/[name].[contenthash:8].css') - ], + ].concat(customConfig.plugins), // Some libraries import Node modules but don't use them in the browser. // Tell Webpack to provide empty mocks for them so importing them works. node: { diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index e01783a8713..1374c13af55 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -70,6 +70,7 @@ "style-loader": "0.13.1", "url-loader": "0.5.7", "webpack": "1.13.2", + "webpack-dashboard": "^0.1.8", "webpack-dev-server": "1.16.1", "whatwg-fetch": "1.0.0" }, From f1cf25ac05ff388add4d54ba49dcdd94ebb5321e Mon Sep 17 00:00:00 2001 From: kitze Date: Sat, 24 Sep 2016 18:41:21 +0200 Subject: [PATCH 007/140] adds a way to skip a customizer in prod mode, skips webpack-dashboard when building --- packages/react-scripts/config/customizers.js | 1 + packages/react-scripts/config/get-custom-config.js | 8 +++++++- packages/react-scripts/config/webpack.config.prod.js | 2 +- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/config/customizers.js b/packages/react-scripts/config/customizers.js index a10a847790a..7d513bd15fb 100644 --- a/packages/react-scripts/config/customizers.js +++ b/packages/react-scripts/config/customizers.js @@ -30,6 +30,7 @@ module.exports = { }, 'WEBPACK_DASHBOARD': { type: 'plugin', + prod: false, getPlugin: function getPlugin() { var DashboardPlugin = require('webpack-dashboard/plugin'); var Dashboard = require('webpack-dashboard'); diff --git a/packages/react-scripts/config/get-custom-config.js b/packages/react-scripts/config/get-custom-config.js index 576d1bf49a5..e8ae6d52133 100644 --- a/packages/react-scripts/config/get-custom-config.js +++ b/packages/react-scripts/config/get-custom-config.js @@ -1,11 +1,17 @@ var customizers = require('./customizers'); -function getCustomConfig(env) { +function getCustomConfig(env, prod) { + var prod = prod || false; var env = env || {}; var result = Object .keys(customizers) .reduce(function (finalConfig, customizerKey) { var customizer = customizers[customizerKey]; + + if(customizer.prod === false && prod === true){ + return finalConfig; + }; + if (env && env['process.env.REACT_APP_' + customizerKey]) { switch (customizer.type) { case 'preset': { diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index a3dc7995fd1..12c4983b642 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -48,7 +48,7 @@ var publicUrl = ensureSlash(homepagePathname, false); // Get enrivonment variables to inject into our app. var env = getClientEnvironment(publicUrl); //Get custom configuration for injecting plugins, presets and loaders -var customConfig = getCustomConfig(env); +var customConfig = getCustomConfig(env, true); // Assert this just to be safe. // Development builds of React are slow and not intended for production. From 69ad766a078046b5e50ccb2194e462c8f52e079b Mon Sep 17 00:00:00 2001 From: kitze Date: Sat, 24 Sep 2016 21:25:26 +0200 Subject: [PATCH 008/140] ignore .idea --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 1900a2f2cf9..cd3e6287cc4 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,4 @@ my-app* template/src/__tests__/__snapshots__/ lerna-debug.log npm-debug.log +.idea \ No newline at end of file From 07e8764f7cead772c2838a09b1667828e4185101 Mon Sep 17 00:00:00 2001 From: kitze Date: Sat, 24 Sep 2016 22:46:38 +0200 Subject: [PATCH 009/140] remove mobx dependencies, change version to 0.0.1, add config options to landing page --- .env | 6 +- packages/react-scripts/package.json | 4 +- packages/react-scripts/template/.env | 4 ++ packages/react-scripts/template/src/App.css | 36 ---------- packages/react-scripts/template/src/App.js | 71 +++++++++++++++---- packages/react-scripts/template/src/App.less | 18 +---- packages/react-scripts/template/src/App.scss | 35 ++++++++- .../react-scripts/template/src/Modules.css | 17 ++++- 8 files changed, 111 insertions(+), 80 deletions(-) create mode 100644 packages/react-scripts/template/.env delete mode 100644 packages/react-scripts/template/src/App.css diff --git a/.env b/.env index 8b26a83f71b..af3d4e4b12e 100644 --- a/.env +++ b/.env @@ -1,6 +1,4 @@ -REACT_APP_DECORATORS=true -REACT_APP_BABEL_STAGE_0=true +REACT_APP_SASS=true REACT_APP_SASS=true REACT_APP_LESS=true -REACT_APP_CSS_MODULES=true -REACT_APP_WEBPACK_DASHBOARD=true \ No newline at end of file +REACT_APP_CSS_MODULES=true \ No newline at end of file diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 1374c13af55..31cc261c1b2 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.5.1", + "version": "0.0.1", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", @@ -76,8 +76,6 @@ }, "devDependencies": { "bundle-deps": "1.0.0", - "mobx": "^2.5.1", - "mobx-react": "^3.5.6", "react": "^15.3.0", "react-dom": "^15.3.0" }, diff --git a/packages/react-scripts/template/.env b/packages/react-scripts/template/.env new file mode 100644 index 00000000000..af3d4e4b12e --- /dev/null +++ b/packages/react-scripts/template/.env @@ -0,0 +1,4 @@ +REACT_APP_SASS=true +REACT_APP_SASS=true +REACT_APP_LESS=true +REACT_APP_CSS_MODULES=true \ No newline at end of file diff --git a/packages/react-scripts/template/src/App.css b/packages/react-scripts/template/src/App.css deleted file mode 100644 index 851fa2ea0ef..00000000000 --- a/packages/react-scripts/template/src/App.css +++ /dev/null @@ -1,36 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 80px; -} - -.App-title { - justify-content: center; -} - -.App-button { - margin-left: 15px; -} - -.App-header { - background-color: #222; - height: 150px; - padding: 20px; - color: white; -} - -.App-intro { - font-size: large; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/packages/react-scripts/template/src/App.js b/packages/react-scripts/template/src/App.js index e1c0cb256da..84fd811be9f 100644 --- a/packages/react-scripts/template/src/App.js +++ b/packages/react-scripts/template/src/App.js @@ -6,29 +6,70 @@ import './App.less'; import './App.scss'; import styles from './Modules.css'; -//mobx -import {observer} from 'mobx-react'; - -@observer class App extends Component { render() { - - const {app} = this.props.store; - return (
logo -

{app.title}

- +

โ˜ข Customizable create-react-app โ˜ข

+
+ +
+

If you want to enable certain features just modify the .env file in the root directory of this + project. +

+ + Styling +
    +
  • + REACT_APP_SASS=true + - Enable SASS +
  • +
  • + REACT_APP_LESS=true + - Enable LESS +
  • +
  • + REACT_APP_CSS_MODULES=true + - Enable CSS modules +
  • +
+ + โš ๏ธ Babel + +
+ (Please note that these features are highly experimental (especially stage-0) and still not a part of the ES + specification.
+ Use them at + your own risk of breaking backwards compatibility if they don't make the final version of the spec.) +
+ +
    +
  • + REACT_APP_BABEL_STAGE_0=true + - Enable stage-0 preset +
  • +
  • + REACT_APP_DECORATORS=true + - Enable usage of decorators +
  • +
+ + Webpack +
    +
  • + REACT_APP_WEBPACK_DASHBOARD=true + - Enable webpack-dashboard โš ๏ธ (this will turn off the original create-react-app message logs) +
  • +
  • + REACT_APP_DECORATORS=true + - Enable usage of decorators +
  • +
-

- To get started, edit src/App.js and save to reload. -

- ); + ) } } diff --git a/packages/react-scripts/template/src/App.less b/packages/react-scripts/template/src/App.less index de56cbfc579..b3a5cf2a103 100644 --- a/packages/react-scripts/template/src/App.less +++ b/packages/react-scripts/template/src/App.less @@ -1,21 +1,5 @@ .App { - text-align: center; - - &-logo { - animation: App-logo-spin infinite 20s linear; - height: 80px; - } - &-title { justify-content: center; } -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} +} \ No newline at end of file diff --git a/packages/react-scripts/template/src/App.scss b/packages/react-scripts/template/src/App.scss index af447998e33..c40fabec7d8 100644 --- a/packages/react-scripts/template/src/App.scss +++ b/packages/react-scripts/template/src/App.scss @@ -1,12 +1,43 @@ +:global { + .App-logo { + animation: App-logo-spin infinite 20s linear; + height: 80px; + } + + @keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } +} + .App { &-header { background-color: #222; - height: 180px; + height: 150px; padding: 20px; color: white; + text-align: center; } &-intro { font-size: large; } -} \ No newline at end of file +} + +.configs { + li { + margin: 15px 0px; + } + code { + background-color: #dadada; + border-radius: 3px; + border: 1px solid #b9b9b9; + padding: 2px 10px; + font-size: 17px; + margin-right: 10px; + } +} diff --git a/packages/react-scripts/template/src/Modules.css b/packages/react-scripts/template/src/Modules.css index 00249229168..77ce4657ad6 100644 --- a/packages/react-scripts/template/src/Modules.css +++ b/packages/react-scripts/template/src/Modules.css @@ -1,10 +1,21 @@ -.app-intro { - animation: App-logo-spin infinite 20s linear; - height: 80px; +.appIntro { + font-size: large; } .code { color: red; font-weight: bold; justify-content: center; +} + +.description { + padding: 20px; +} + +.warning { + margin: 10px 0; + font-size: 14px; + line-height: 20px; + font-weight: 100; + color: #e68484; } \ No newline at end of file From 99f36a2d6948ea2a81742638b3e576d553174c69 Mon Sep 17 00:00:00 2001 From: kitze Date: Sat, 24 Sep 2016 22:47:49 +0200 Subject: [PATCH 010/140] removes mobx stores --- packages/react-scripts/template/src/index.js | 3 +-- .../react-scripts/template/src/stores/store.js | 15 --------------- 2 files changed, 1 insertion(+), 17 deletions(-) delete mode 100644 packages/react-scripts/template/src/stores/store.js diff --git a/packages/react-scripts/template/src/index.js b/packages/react-scripts/template/src/index.js index 47982360d31..54c5ef1a427 100644 --- a/packages/react-scripts/template/src/index.js +++ b/packages/react-scripts/template/src/index.js @@ -2,9 +2,8 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; -import store from './stores/store'; ReactDOM.render( - , + , document.getElementById('root') ); diff --git a/packages/react-scripts/template/src/stores/store.js b/packages/react-scripts/template/src/stores/store.js deleted file mode 100644 index 961e1fd12f9..00000000000 --- a/packages/react-scripts/template/src/stores/store.js +++ /dev/null @@ -1,15 +0,0 @@ -import {action, observable} from 'mobx'; - -class AppStore { - @observable title = 'Hello ES7 world ๐Ÿ˜œ'; - - @action changeRandomTitle() { - this.title = `Title #${Math.floor((Math.random() * 100) + 1)} ๐Ÿ˜ฒ`; - } -} - -const store = { - app: new AppStore() -} - -export default store; \ No newline at end of file From f13c4092a88a7e0c043573fc765d1e73159763d5 Mon Sep 17 00:00:00 2001 From: kitze Date: Sat, 24 Sep 2016 23:01:02 +0200 Subject: [PATCH 011/140] bump version --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 31cc261c1b2..b0513828a20 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.0.1", + "version": "0.0.2", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", From 550ab7ed3578c1d9db13eaaf695919ea75c8e044 Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 10:19:14 +0200 Subject: [PATCH 012/140] small styling changes --- packages/react-scripts/template/src/App.js | 2 +- packages/react-scripts/template/src/App.scss | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/template/src/App.js b/packages/react-scripts/template/src/App.js index 84fd811be9f..aa93ae38c5b 100644 --- a/packages/react-scripts/template/src/App.js +++ b/packages/react-scripts/template/src/App.js @@ -16,7 +16,7 @@ class App extends Component {
-

If you want to enable certain features just modify the .env file in the root directory of this +

If you want to enable certain features just modify the .env file in the root directory of this project.

diff --git a/packages/react-scripts/template/src/App.scss b/packages/react-scripts/template/src/App.scss index c40fabec7d8..b6b908d7576 100644 --- a/packages/react-scripts/template/src/App.scss +++ b/packages/react-scripts/template/src/App.scss @@ -33,11 +33,12 @@ margin: 15px 0px; } code { - background-color: #dadada; border-radius: 3px; - border: 1px solid #b9b9b9; padding: 2px 10px; font-size: 17px; margin-right: 10px; + background-color: rgba(222, 222, 222, 0.34); + border: 1px solid #cccccc; + color: #868686; } } From 16044e902bb291761337426ffb71ad9adc041c83 Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 10:20:10 +0200 Subject: [PATCH 013/140] rename react-scripts.js to custom-react-scripts.js --- .../bin/{react-scripts.js => custom-react-scripts.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/react-scripts/bin/{react-scripts.js => custom-react-scripts.js} (100%) diff --git a/packages/react-scripts/bin/react-scripts.js b/packages/react-scripts/bin/custom-react-scripts.js similarity index 100% rename from packages/react-scripts/bin/react-scripts.js rename to packages/react-scripts/bin/custom-react-scripts.js From 38f7e35d05fd68fcb9560e548716a969fa759aef Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 10:20:29 +0200 Subject: [PATCH 014/140] publish 0.0.3 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index b0513828a20..506f5d94ab1 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.0.2", + "version": "0.0.3", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", From 19ba3715af557c083064db59ca824ec8b32f140e Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 10:21:30 +0200 Subject: [PATCH 015/140] change .bin to custom-react-scripts --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 506f5d94ab1..36215bcf033 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -20,7 +20,7 @@ "utils" ], "bin": { - "react-scripts": "./bin/react-scripts.js" + "custom-react-scripts": "./bin/custom-react-scripts.js" }, "dependencies": { "autoprefixer": "6.4.1", From f8b5efaa595b283da8dca5c0248e5b1cb49eff14 Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 10:21:42 +0200 Subject: [PATCH 016/140] bump version --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 36215bcf033..558b560438d 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.0.3", + "version": "0.0.4", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", From 95cf84cf739c7a1683bb221f291edd71864b1ff6 Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 11:19:37 +0200 Subject: [PATCH 017/140] updates readme --- README.md | 21 +++++++++ packages/react-scripts/README.md | 75 +++++++++++++++++++++++++++++++- 2 files changed, 94 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 6c967b9028c..3e471be4a69 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,24 @@ +### Disclaimer: +> This is **not** a complete fork of ```create-react-app```. But this is the [only way](https://github.com/facebookincubator/create-react-app/issues/682#issuecomment-249364974) to publish a custom version of ```react-scripts```. + +# โ˜ข custom-react-scripts โ˜ข +> Adds support for custom ```create-react-app``` config without ejecting the app. + +**Features:** +* Decorators +* babel-preset-stage-0 +* LESS +* SASS +* CSS modules +* webpack-dashboard + + +The complete [README is here](https://github.com/kitze/create-react-app/tree/master/packages/react-scripts). + + +# Original readme below ๐Ÿ‘‡ +- + # Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) Create React apps with no build configuration. diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index 845e546c67c..ba520009137 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -1,7 +1,78 @@ +# โ˜ข custom-react-scripts โ˜ข +Support for custom create-react-app config without ejecting the app. + +**Features:** +* Decorators +* babel-preset-stage-0 +* LESS +* SASS +* CSS modules +* webpack-dashboard + +### Disclaimer: +This is **not** a fork of ```create-react-app``` It's just a fork of react-scripts with simple modifications to add extra features. As [@gaearon commented](https://github.com/facebookincubator/create-react-app/issues/682#issue-177762206) on one issue in the official create-react-app repo, this is fine: + +> It is not common knowledge that you can fork react-scripts, publish your fork, and then do create-react-app my-app --scripts-version my-react-scripts-fork. + +### Compatible with +create-react-app **v0.5.1** + +### Why? +The ```create-react-app``` team doesn't want user configuration and modifications for few reasons: + +* Some of the babel presets and plugins people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. +* It's hard to maintain code for all of these custom configurations that people want to use. + +But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. + +So instead of [searching through npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. + +### How to use it +```create-react-app my-app --scripts-version custom-react-scripts``` + +Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. + +The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. + +### Configuration options + +**Styling** +- ```REACT_APP_SASS=true``` - enable SASS support +- ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_CSS_MODULES``` - enable CSS modules + +**Webpack** +- ```REACT_APP_WEBPACK_DASHBOARD=true``` - enable webpack-dashboard *(will disable default CRA console output)* +- ```REACT_APP_DECORATORS=true``` - enable decorators support + +**Babel** +- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset +- ```REACT_APP_DECORATORS=true``` - enable decorators support + +> Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. +> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. + + +### How does it work? +The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. + +> To define permanent environment vairables, create a file called .env in the root of your project: +>```REACT_APP_SECRET_CODE=abcdef``` + +I just added support for extra environment variables that actually add certain plugins, babel plugins, presets, and loaders to the webpack and babel config of ```react-scripts```. + +### Future plans + +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. + +- + +# Original readme below ๐Ÿ‘‡ + # react-scripts -This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). +This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). Please refer to its documentation: * [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file From daf63ba0dc54385d2a3e353fe6ad845d22128f34 Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 12:13:34 +0200 Subject: [PATCH 018/140] =?UTF-8?q?=F0=9F=9B=A0=20revert=20original=20READ?= =?UTF-8?q?MEs,=20extract=20custom=20into=20CUSTOM=5FREADME.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 23 +------- packages/react-scripts/CUSTOM_README.md | 66 +++++++++++++++++++++++ packages/react-scripts/README.md | 71 ------------------------- 3 files changed, 67 insertions(+), 93 deletions(-) create mode 100644 packages/react-scripts/CUSTOM_README.md diff --git a/README.md b/README.md index 3e471be4a69..aeef8cda64b 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,3 @@ -### Disclaimer: -> This is **not** a complete fork of ```create-react-app```. But this is the [only way](https://github.com/facebookincubator/create-react-app/issues/682#issuecomment-249364974) to publish a custom version of ```react-scripts```. - -# โ˜ข custom-react-scripts โ˜ข -> Adds support for custom ```create-react-app``` config without ejecting the app. - -**Features:** -* Decorators -* babel-preset-stage-0 -* LESS -* SASS -* CSS modules -* webpack-dashboard - - -The complete [README is here](https://github.com/kitze/create-react-app/tree/master/packages/react-scripts). - - -# Original readme below ๐Ÿ‘‡ -- - # Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) Create React apps with no build configuration. @@ -236,4 +215,4 @@ Notable alternatives also include: * [tarec](https://github.com/geowarin/tarec) You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
-React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. +React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file diff --git a/packages/react-scripts/CUSTOM_README.md b/packages/react-scripts/CUSTOM_README.md new file mode 100644 index 00000000000..e810b0610d8 --- /dev/null +++ b/packages/react-scripts/CUSTOM_README.md @@ -0,0 +1,66 @@ +# โ˜ข custom-react-scripts โ˜ข +#### Support for custom create-react-app config without ejecting the app + +### โš ๏ธ Disclaimer: +> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. + +### ๐Ÿ’กFeatures: +* Decorators +* babel-preset-stage-0 +* LESS +* SASS +* CSS modules +* webpack-dashboard + +**the features are optional and can be turned on/off individually* + +### โ”How to use it +```create-react-app my-app --scripts-version custom-react-scripts``` + +Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. + +The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. + +### ๐Ÿ“ Configuration options + +#### Styling +- ```REACT_APP_SASS=true``` - enable SASS support +- ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_CSS_MODULES``` - enable CSS modules + +#### Webpack +- ```REACT_APP_WEBPACK_DASHBOARD=true``` - enable webpack-dashboard +- ```REACT_APP_DECORATORS=true``` - enable decorators support + +#### Babel +- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset +- ```REACT_APP_DECORATORS=true``` - enable decorators support + +> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. +> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. + +### ๐Ÿค” Why? +The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: + +* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. +* It's hard to maintain code for all of these custom configurations that people want to use. + +But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. + +So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. + +### How does it work? +The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. + +> To define permanent environment vairables, create a file called .env in the root of your project: +>```REACT_APP_SECRET_CODE=abcdef``` + +I just added support for extra environment variables that actually add certain plugins, babel plugins, presets, and loaders to the webpack and babel config of ```react-scripts```. + +### Future plans + +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. + +- +### Original readme below ๐Ÿ‘‡ +- \ No newline at end of file diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index ba520009137..92364c5fead 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -1,74 +1,3 @@ -# โ˜ข custom-react-scripts โ˜ข -Support for custom create-react-app config without ejecting the app. - -**Features:** -* Decorators -* babel-preset-stage-0 -* LESS -* SASS -* CSS modules -* webpack-dashboard - -### Disclaimer: -This is **not** a fork of ```create-react-app``` It's just a fork of react-scripts with simple modifications to add extra features. As [@gaearon commented](https://github.com/facebookincubator/create-react-app/issues/682#issue-177762206) on one issue in the official create-react-app repo, this is fine: - -> It is not common knowledge that you can fork react-scripts, publish your fork, and then do create-react-app my-app --scripts-version my-react-scripts-fork. - -### Compatible with -create-react-app **v0.5.1** - -### Why? -The ```create-react-app``` team doesn't want user configuration and modifications for few reasons: - -* Some of the babel presets and plugins people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. -* It's hard to maintain code for all of these custom configurations that people want to use. - -But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. - -So instead of [searching through npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. - -### How to use it -```create-react-app my-app --scripts-version custom-react-scripts``` - -Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. - -The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. - -### Configuration options - -**Styling** -- ```REACT_APP_SASS=true``` - enable SASS support -- ```REACT_APP_LESS=true``` - enable LESS support -- ```REACT_APP_CSS_MODULES``` - enable CSS modules - -**Webpack** -- ```REACT_APP_WEBPACK_DASHBOARD=true``` - enable webpack-dashboard *(will disable default CRA console output)* -- ```REACT_APP_DECORATORS=true``` - enable decorators support - -**Babel** -- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset -- ```REACT_APP_DECORATORS=true``` - enable decorators support - -> Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. -> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. - - -### How does it work? -The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. - -> To define permanent environment vairables, create a file called .env in the root of your project: ->```REACT_APP_SECRET_CODE=abcdef``` - -I just added support for extra environment variables that actually add certain plugins, babel plugins, presets, and loaders to the webpack and babel config of ```react-scripts```. - -### Future plans - -I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. - -- - -# Original readme below ๐Ÿ‘‡ - # react-scripts This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). From 9913cf76bf9b8a63fffb9407c0e0b0176e0b5cd7 Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 13:10:41 +0200 Subject: [PATCH 019/140] moves CUSTOM_README into /bin, adds a modify-readmes script that can easily switch between the original and custom READMEs --- .../react-scripts/{ => bin}/CUSTOM_README.md | 6 +- .../react-scripts/scripts/modify-readmes.js | 74 +++++++++++++++++++ packages/react-scripts/scripts/start.js | 4 +- 3 files changed, 76 insertions(+), 8 deletions(-) rename packages/react-scripts/{ => bin}/CUSTOM_README.md (97%) create mode 100644 packages/react-scripts/scripts/modify-readmes.js diff --git a/packages/react-scripts/CUSTOM_README.md b/packages/react-scripts/bin/CUSTOM_README.md similarity index 97% rename from packages/react-scripts/CUSTOM_README.md rename to packages/react-scripts/bin/CUSTOM_README.md index e810b0610d8..5342141841a 100644 --- a/packages/react-scripts/CUSTOM_README.md +++ b/packages/react-scripts/bin/CUSTOM_README.md @@ -59,8 +59,4 @@ I just added support for extra environment variables that actually add certain p ### Future plans -I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. - -- -### Original readme below ๐Ÿ‘‡ -- \ No newline at end of file +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. \ No newline at end of file diff --git a/packages/react-scripts/scripts/modify-readmes.js b/packages/react-scripts/scripts/modify-readmes.js new file mode 100644 index 00000000000..bb3a36d8ab1 --- /dev/null +++ b/packages/react-scripts/scripts/modify-readmes.js @@ -0,0 +1,74 @@ +var fs = require('fs-extra'); +var path = require('path'); +const args = process.argv; + +//read md file as text +require.extensions['.md'] = function (module, filename) { + module.exports = fs.readFileSync(filename, 'utf8'); +}; + +var filenames = { + BACKUP: 'README_BACKUP.md', + README: 'README.MD', + CUSTOM_README: 'CUSTOM_README.md' +}; + +var paths = { + //original + RSreadme: path.join(__dirname, '..', filenames.README), + CRAreadme: path.join(__dirname, '../../../', filenames.README), + //custom + customReadme: path.join(__dirname, '../bin/', filenames.CUSTOM_README), + //backup + RSbackup: path.join(__dirname, '..', filenames.BACKUP), + CRAbackup: path.join(__dirname, '../../../', filenames.BACKUP) +}; + +function backupOriginal() { + fs.copySync(paths.RSreadme, paths.RSbackup); + fs.copySync(paths.CRAreadme, paths.CRAbackup); +} + +function deleteBackup() { + fs.removeSync(paths.RSbackup); + fs.removeSync(paths.CRAbackup); +} + +function deleteOriginal() { + fs.removeSync(paths.RSreadme); + fs.removeSync(paths.CRAreadme); +} + +function placeCustom() { + fs.copySync(paths.customReadme, paths.RSreadme); + fs.copySync(paths.customReadme, paths.CRAreadme); +} + +function placeOriginal() { + fs.copySync(paths.RSbackup, paths.RSreadme); + fs.copySync(paths.CRAbackup, paths.CRAreadme); +} + +//will set custom readmes +function setCustom() { + backupOriginal(); + deleteOriginal(); + placeCustom(); +} + +//will revert original readmes +function revertOriginalBackups() { + deleteOriginal(); + placeOriginal(); + deleteBackup(); +} + +var argFunctionMap = { + '--custom': setCustom, + '--original': revertOriginalBackups, +} + +if (args && args.length >= 2) { + var command = argFunctionMap[args[2]]; + command && command(); +} \ No newline at end of file diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index b47e61cfdcd..ec23a481906 100644 --- a/packages/react-scripts/scripts/start.js +++ b/packages/react-scripts/scripts/start.js @@ -224,7 +224,7 @@ function runDevServer(host, port, protocol) { publicPath: config.output.publicPath, // WebpackDevServer is noisy by default so we emit custom message instead // by listening to the compiler events with `compiler.plugin` calls above. - quiet: true, + quiet: false, // Reportedly, this avoids CPU overload on some systems. // https://github.com/facebookincubator/create-react-app/issues/293 watchOptions: { @@ -244,7 +244,6 @@ function runDevServer(host, port, protocol) { return console.log(err); } - clearConsole(); console.log(chalk.cyan('Starting the development server...')); console.log(); openBrowser(protocol + '://' + host + ':' + port + '/'); @@ -266,7 +265,6 @@ detect(DEFAULT_PORT).then(port => { return; } - clearConsole(); var question = chalk.yellow('Something is already running on port ' + DEFAULT_PORT + '.') + '\n\nWould you like to run the app on another port instead?'; From 16e120d6a4f38698e1b81611082a4342d3e1a05f Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 13:12:54 +0200 Subject: [PATCH 020/140] switches readmes to custom --- README.md | 240 +++++------------------- README_BACKUP.md | 218 +++++++++++++++++++++ packages/react-scripts/README.md | 65 ++++++- packages/react-scripts/README_BACKUP.md | 7 + 4 files changed, 327 insertions(+), 203 deletions(-) create mode 100644 README_BACKUP.md create mode 100644 packages/react-scripts/README_BACKUP.md diff --git a/README.md b/README.md index aeef8cda64b..5342141841a 100644 --- a/README.md +++ b/README.md @@ -1,218 +1,62 @@ -# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) +# โ˜ข custom-react-scripts โ˜ข +#### Support for custom create-react-app config without ejecting the app -Create React apps with no build configuration. +### โš ๏ธ Disclaimer: +> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. -* [Getting Started](#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. +### ๐Ÿ’กFeatures: +* Decorators +* babel-preset-stage-0 +* LESS +* SASS +* CSS modules +* webpack-dashboard -## tl;dr +**the features are optional and can be turned on/off individually* -```sh -npm install -g create-react-app +### โ”How to use it +```create-react-app my-app --scripts-version custom-react-scripts``` -create-react-app my-app -cd my-app/ -npm start +Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. -``` +The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. -Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
-When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. +### ๐Ÿ“ Configuration options -npm start +#### Styling +- ```REACT_APP_SASS=true``` - enable SASS support +- ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_CSS_MODULES``` - enable CSS modules -## Getting Started +#### Webpack +- ```REACT_APP_WEBPACK_DASHBOARD=true``` - enable webpack-dashboard +- ```REACT_APP_DECORATORS=true``` - enable decorators support -### Installation +#### Babel +- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset +- ```REACT_APP_DECORATORS=true``` - enable decorators support -Install it once globally: +> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. +> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. -```sh -npm install -g create-react-app -``` +### ๐Ÿค” Why? +The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: -**Youโ€™ll need to have Node >= 4 on your machine**. +* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. +* It's hard to maintain code for all of these custom configurations that people want to use. -**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. +But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. -**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. +So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. -### Creating an App +### How does it work? +The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. -To create a new app, run: +> To define permanent environment vairables, create a file called .env in the root of your project: +>```REACT_APP_SECRET_CODE=abcdef``` -```sh -create-react-app my-app -cd my-app -``` +I just added support for extra environment variables that actually add certain plugins, babel plugins, presets, and loaders to the webpack and babel config of ```react-scripts```. -It will create a directory called `my-app` inside the current folder.
-Inside that directory, it will generate the initial project structure and install the transitive dependencies: +### Future plans -``` -my-app/ - README.md - node_modules/ - package.json - .gitignore - public/ - favicon.ico - index.html - src/ - App.css - App.js - App.test.js - index.css - index.js - logo.svg -``` - -No configuration or complicated folder structures, just the files you need to build your app.
-Once the installation is done, you can run some commands inside the project folder: - -### `npm start` - -Runs the app in development mode.
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.
-You will see the build errors and lint warnings in the console. - -Build errors - -### `npm test` - -Runs the test watcher in an interactive mode. -By default, runs tests related to files changes since the last commit. - -[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) - -### `npm run build` - -Builds the app for production to the `build` folder.
-It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.
-Your app is ready to be deployed! - -## User Guide - -The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: - -- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) -- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) -- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) -- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) -- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) -- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) -- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) -- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) -- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) -- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) -- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) -- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) -- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) -- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) -- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) -- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) -- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) -- [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) -- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) -- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) - -A copy of the user guide will be created as `README.md` in your project folder. - -## Philosophy - -* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. - -* **Zero Configuration:** There are no configuration files or command line options. Configuring both development and production builds is handled for you so you can focus on writing code. - -* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. - -## Why Use This? - -**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: - -* React, JSX, and ES6 support. -* Language extras beyond ES6 like the object spread operator. -* A dev server that lints for common errors. -* Import CSS and image files directly from JavaScript. -* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. -* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. - -**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. - -**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. - -### Converting to a Custom Setup - -**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. - -Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. - -**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** - -You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. - -## Limitations - -Some features are currently **not supported**: - -* Server rendering. -* Some experimental syntax extensions (e.g. decorators). -* CSS Modules. -* LESS or Sass. -* Hot reloading of components. - -Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. - -## Whatโ€™s Inside? - -The tools used by Create React App are subject to change. -Currently it is a thin layer on top of many amazing community projects, such as: - -* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) -* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) -* [Autoprefixer](https://github.com/postcss/autoprefixer) -* [ESLint](http://eslint.org/) -* [Jest](http://facebook.github.io/jest) -* and others. - -All of them are transitive dependencies of the provided npm package. - -## Contributing - -We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. - -## Acknowledgements - -We are grateful to the authors of existing related projects for their ideas and collaboration: - -* [@eanplatter](https://github.com/eanplatter) -* [@insin](https://github.com/insin) -* [@mxstbr](https://github.com/mxstbr) - -## Alternatives - -If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. -Some of the more popular and actively maintained ones are: - -* [insin/nwb](https://github.com/insin/nwb) -* [mozilla/neo](https://github.com/mozilla/neo) -* [NYTimes/kyt](https://github.com/NYTimes/kyt) - -Notable alternatives also include: - -* [enclave](https://github.com/eanplatter/enclave) -* [motion](https://github.com/motion/motion) -* [quik](https://github.com/satya164/quik) -* [sagui](https://github.com/saguijs/sagui) -* [roc](https://github.com/rocjs/roc) -* [aik](https://github.com/d4rkr00t/aik) -* [react-app](https://github.com/kriasoft/react-app) -* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) -* [tarec](https://github.com/geowarin/tarec) - -You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
-React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. \ No newline at end of file diff --git a/README_BACKUP.md b/README_BACKUP.md new file mode 100644 index 00000000000..aeef8cda64b --- /dev/null +++ b/README_BACKUP.md @@ -0,0 +1,218 @@ +# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) + +Create React apps with no build configuration. + +* [Getting Started](#getting-started) โ€“ How to create a new app. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. + +## tl;dr + +```sh +npm install -g create-react-app + +create-react-app my-app +cd my-app/ +npm start + +``` + +Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
+When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. + +npm start + +## Getting Started + +### Installation + +Install it once globally: + +```sh +npm install -g create-react-app +``` + +**Youโ€™ll need to have Node >= 4 on your machine**. + +**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. + +**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. + +### Creating an App + +To create a new app, run: + +```sh +create-react-app my-app +cd my-app +``` + +It will create a directory called `my-app` inside the current folder.
+Inside that directory, it will generate the initial project structure and install the transitive dependencies: + +``` +my-app/ + README.md + node_modules/ + package.json + .gitignore + public/ + favicon.ico + index.html + src/ + App.css + App.js + App.test.js + index.css + index.js + logo.svg +``` + +No configuration or complicated folder structures, just the files you need to build your app.
+Once the installation is done, you can run some commands inside the project folder: + +### `npm start` + +Runs the app in development mode.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
+You will see the build errors and lint warnings in the console. + +Build errors + +### `npm test` + +Runs the test watcher in an interactive mode. +By default, runs tests related to files changes since the last commit. + +[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) + +### `npm run build` + +Builds the app for production to the `build` folder.
+It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
+Your app is ready to be deployed! + +## User Guide + +The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: + +- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) +- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) +- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) +- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) +- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) +- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) +- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) +- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) +- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) +- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) +- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) +- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) +- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) +- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) +- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) +- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) +- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) +- [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) +- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) +- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) + +A copy of the user guide will be created as `README.md` in your project folder. + +## Philosophy + +* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. + +* **Zero Configuration:** There are no configuration files or command line options. Configuring both development and production builds is handled for you so you can focus on writing code. + +* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. + +## Why Use This? + +**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: + +* React, JSX, and ES6 support. +* Language extras beyond ES6 like the object spread operator. +* A dev server that lints for common errors. +* Import CSS and image files directly from JavaScript. +* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. +* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. + +**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. + +**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. + +### Converting to a Custom Setup + +**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. + +Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. + +**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** + +You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. + +## Limitations + +Some features are currently **not supported**: + +* Server rendering. +* Some experimental syntax extensions (e.g. decorators). +* CSS Modules. +* LESS or Sass. +* Hot reloading of components. + +Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. + +## Whatโ€™s Inside? + +The tools used by Create React App are subject to change. +Currently it is a thin layer on top of many amazing community projects, such as: + +* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) +* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) +* [Autoprefixer](https://github.com/postcss/autoprefixer) +* [ESLint](http://eslint.org/) +* [Jest](http://facebook.github.io/jest) +* and others. + +All of them are transitive dependencies of the provided npm package. + +## Contributing + +We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. + +## Acknowledgements + +We are grateful to the authors of existing related projects for their ideas and collaboration: + +* [@eanplatter](https://github.com/eanplatter) +* [@insin](https://github.com/insin) +* [@mxstbr](https://github.com/mxstbr) + +## Alternatives + +If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. +Some of the more popular and actively maintained ones are: + +* [insin/nwb](https://github.com/insin/nwb) +* [mozilla/neo](https://github.com/mozilla/neo) +* [NYTimes/kyt](https://github.com/NYTimes/kyt) + +Notable alternatives also include: + +* [enclave](https://github.com/eanplatter/enclave) +* [motion](https://github.com/motion/motion) +* [quik](https://github.com/satya164/quik) +* [sagui](https://github.com/saguijs/sagui) +* [roc](https://github.com/rocjs/roc) +* [aik](https://github.com/d4rkr00t/aik) +* [react-app](https://github.com/kriasoft/react-app) +* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) +* [tarec](https://github.com/geowarin/tarec) + +You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
+React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index 92364c5fead..5342141841a 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -1,7 +1,62 @@ -# react-scripts +# โ˜ข custom-react-scripts โ˜ข +#### Support for custom create-react-app config without ejecting the app -This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). -Please refer to its documentation: +### โš ๏ธ Disclaimer: +> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. -* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file +### ๐Ÿ’กFeatures: +* Decorators +* babel-preset-stage-0 +* LESS +* SASS +* CSS modules +* webpack-dashboard + +**the features are optional and can be turned on/off individually* + +### โ”How to use it +```create-react-app my-app --scripts-version custom-react-scripts``` + +Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. + +The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. + +### ๐Ÿ“ Configuration options + +#### Styling +- ```REACT_APP_SASS=true``` - enable SASS support +- ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_CSS_MODULES``` - enable CSS modules + +#### Webpack +- ```REACT_APP_WEBPACK_DASHBOARD=true``` - enable webpack-dashboard +- ```REACT_APP_DECORATORS=true``` - enable decorators support + +#### Babel +- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset +- ```REACT_APP_DECORATORS=true``` - enable decorators support + +> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. +> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. + +### ๐Ÿค” Why? +The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: + +* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. +* It's hard to maintain code for all of these custom configurations that people want to use. + +But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. + +So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. + +### How does it work? +The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. + +> To define permanent environment vairables, create a file called .env in the root of your project: +>```REACT_APP_SECRET_CODE=abcdef``` + +I just added support for extra environment variables that actually add certain plugins, babel plugins, presets, and loaders to the webpack and babel config of ```react-scripts```. + +### Future plans + +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. \ No newline at end of file diff --git a/packages/react-scripts/README_BACKUP.md b/packages/react-scripts/README_BACKUP.md new file mode 100644 index 00000000000..92364c5fead --- /dev/null +++ b/packages/react-scripts/README_BACKUP.md @@ -0,0 +1,7 @@ +# react-scripts + +This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). +Please refer to its documentation: + +* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file From 9cc5816e6ea67521f821dc6d61c7971221c58899 Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 13:14:39 +0200 Subject: [PATCH 021/140] =?UTF-8?q?=F0=9F=93=9D=20readme=20fixes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 5 +++-- packages/react-scripts/README.md | 5 +++-- packages/react-scripts/bin/CUSTOM_README.md | 5 +++-- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 5342141841a..a7535526136 100644 --- a/README.md +++ b/README.md @@ -52,10 +52,11 @@ So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for ### How does it work? The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. +From the original readme: > To define permanent environment vairables, create a file called .env in the root of your project: ->```REACT_APP_SECRET_CODE=abcdef``` +> REACT_APP_SECRET_CODE=abcdef -I just added support for extra environment variables that actually add certain plugins, babel plugins, presets, and loaders to the webpack and babel config of ```react-scripts```. +I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. ### Future plans diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index 5342141841a..a7535526136 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -52,10 +52,11 @@ So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for ### How does it work? The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. +From the original readme: > To define permanent environment vairables, create a file called .env in the root of your project: ->```REACT_APP_SECRET_CODE=abcdef``` +> REACT_APP_SECRET_CODE=abcdef -I just added support for extra environment variables that actually add certain plugins, babel plugins, presets, and loaders to the webpack and babel config of ```react-scripts```. +I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. ### Future plans diff --git a/packages/react-scripts/bin/CUSTOM_README.md b/packages/react-scripts/bin/CUSTOM_README.md index 5342141841a..a7535526136 100644 --- a/packages/react-scripts/bin/CUSTOM_README.md +++ b/packages/react-scripts/bin/CUSTOM_README.md @@ -52,10 +52,11 @@ So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for ### How does it work? The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. +From the original readme: > To define permanent environment vairables, create a file called .env in the root of your project: ->```REACT_APP_SECRET_CODE=abcdef``` +> REACT_APP_SECRET_CODE=abcdef -I just added support for extra environment variables that actually add certain plugins, babel plugins, presets, and loaders to the webpack and babel config of ```react-scripts```. +I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. ### Future plans From db23cd0b9b92b88c718ca0fce58463f7f77169f6 Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 14:29:01 +0200 Subject: [PATCH 022/140] =?UTF-8?q?=F0=9F=9B=A0=20improved=20way=20to=20ge?= =?UTF-8?q?t=20custom=20config?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/config/customizers.js | 47 +++++++++++-------- .../react-scripts/config/get-custom-config.js | 36 ++++---------- .../config/webpack.config.dev.js | 4 +- .../config/webpack.config.prod.js | 4 +- 4 files changed, 40 insertions(+), 51 deletions(-) diff --git a/packages/react-scripts/config/customizers.js b/packages/react-scripts/config/customizers.js index 7d513bd15fb..e375f2807ff 100644 --- a/packages/react-scripts/config/customizers.js +++ b/packages/react-scripts/config/customizers.js @@ -1,40 +1,47 @@ module.exports = { 'BABEL_STAGE_0': { - type: 'preset', - module: 'babel-preset-stage-0' + toArray: 'presets', + get: function () { + return require.resolve('babel-preset-stage-0') + } }, 'DECORATORS': { - type: 'babelPlugin', - module: 'babel-plugin-transform-decorators-legacy' - }, - 'CSS_MODULES': { - type: 'config', - config: { - dev: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss', - prod: 'style!css?modules&-autoprefixer&importLoaders=1!postcss' + toArray: 'babelPlugins', + get: function () { + return require.resolve('babel-plugin-transform-decorators-legacy') } }, 'SASS': { - type: 'loader', - loader: { - test: /\.scss$/, - loader: "style!css!postcss!sass" + toArray: 'loaders', + get: function () { + return { + test: /\.scss$/, + loader: "style!css!postcss!sass" + } } }, 'LESS': { - type: 'loader', - loader: { - test: /\.less$/, - loader: "style!css!postcss!less" + toArray: 'loaders', + get: function () { + return { + test: /\.less$/, + loader: "style!css!postcss!less" + } } }, 'WEBPACK_DASHBOARD': { - type: 'plugin', + toArray: 'plugins', prod: false, - getPlugin: function getPlugin() { + get: function () { var DashboardPlugin = require('webpack-dashboard/plugin'); var Dashboard = require('webpack-dashboard'); return new DashboardPlugin(new Dashboard().setData) } + }, + 'CSS_MODULES': { + config: { + dev: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss', + prod: 'style!css?modules&-autoprefixer&importLoaders=1!postcss' + } } } \ No newline at end of file diff --git a/packages/react-scripts/config/get-custom-config.js b/packages/react-scripts/config/get-custom-config.js index e8ae6d52133..de19cfa9667 100644 --- a/packages/react-scripts/config/get-custom-config.js +++ b/packages/react-scripts/config/get-custom-config.js @@ -1,40 +1,22 @@ var customizers = require('./customizers'); -function getCustomConfig(env, prod) { +function getCustomConfig(prod) { var prod = prod || false; var env = env || {}; var result = Object .keys(customizers) .reduce(function (finalConfig, customizerKey) { var customizer = customizers[customizerKey]; - - if(customizer.prod === false && prod === true){ + if (customizer.prod === false && prod === true) { return finalConfig; - }; + } - if (env && env['process.env.REACT_APP_' + customizerKey]) { - switch (customizer.type) { - case 'preset': { - finalConfig.presets.push(require.resolve(customizer.module)); - break; - } - case 'babelPlugin': { - finalConfig.babelPlugins.push(require.resolve(customizer.module)); - break; - } - case 'plugin': { - finalConfig.plugins.push(customizer.getPlugin()); - break; - } - case 'loader': { - finalConfig.loaders.push(customizer.loader); - break; - } - case 'config': { - finalConfig.others[customizerKey] = customizer.config; - break; - } + var envValue = process.env['REACT_APP_' + customizerKey]; + if (env && envValue && envValue !== 'false') { + if (customizer.toArray) { + finalConfig[customizer.toArray].push(customizer.get()); } + finalConfig.values[customizerKey] = customizer.config || true; } return finalConfig; }, { @@ -42,7 +24,7 @@ function getCustomConfig(env, prod) { babelPlugins: [], plugins: [], loaders: [], - others: {} + values: {} }); return result; diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 01edded99d8..83ca0d99298 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -31,7 +31,7 @@ var publicUrl = ''; // Get enrivonment variables to inject into our app. var env = getClientEnvironment(publicUrl); //Get custom configuration for injecting plugins, presets and loaders -var customConfig = getCustomConfig(env, false); +var customConfig = getCustomConfig(false); // This is the development configuration. // It is focused on developer experience and fast rebuilds. @@ -145,7 +145,7 @@ module.exports = { // in development "style" loader enables hot editing of CSS. { test: /\.css$/, - loader: customConfig.others.CSS_MODULES ? customConfig.others.CSS_MODULES.dev : 'style!css!postcss' + loader: customConfig.values.CSS_MODULES ? customConfig.values.CSS_MODULES.dev : 'style!css!postcss' }, // JSON is not enabled by default in Webpack but both Node and Browserify // allow it implicitly so we also enable it. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 12c4983b642..573cfb8eaa0 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -48,7 +48,7 @@ var publicUrl = ensureSlash(homepagePathname, false); // Get enrivonment variables to inject into our app. var env = getClientEnvironment(publicUrl); //Get custom configuration for injecting plugins, presets and loaders -var customConfig = getCustomConfig(env, true); +var customConfig = getCustomConfig(true); // Assert this just to be safe. // Development builds of React are slow and not intended for production. @@ -153,7 +153,7 @@ module.exports = { // Webpack 1.x uses Uglify plugin as a signal to minify *all* the assets // including CSS. This is confusing and will be removed in Webpack 2: // https://github.com/webpack/webpack/issues/283 - loader: ExtractTextPlugin.extract(customConfig.others.CSS_MODULES ? 'style!css?modules&-autoprefixer&importLoaders=1!postcss' : 'style!css?-autoprefixer!postcss') + loader: ExtractTextPlugin.extract(customConfig.values.CSS_MODULES ? 'style!css?modules&-autoprefixer&importLoaders=1!postcss' : 'style!css?-autoprefixer!postcss') // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, From 9003019f70de4500c522e8e676cfd0f5f918ab5e Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 14:32:48 +0200 Subject: [PATCH 023/140] =?UTF-8?q?=E2=9E=95=20adds=20OPEN=5FBROWSER=3Dfal?= =?UTF-8?q?se=20env=20config,=20if=20running=20webpack-dashboard:=20silenc?= =?UTF-8?q?e=20console.logs,=20automatically=20run=20on=20another=20port?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 6 +- packages/react-scripts/scripts/start.js | 90 ++++++++++++++----------- 2 files changed, 56 insertions(+), 40 deletions(-) diff --git a/.env b/.env index af3d4e4b12e..1cc6eead14e 100644 --- a/.env +++ b/.env @@ -1,4 +1,8 @@ +OPEN_BROWSER=false + REACT_APP_SASS=true REACT_APP_SASS=true REACT_APP_LESS=true -REACT_APP_CSS_MODULES=true \ No newline at end of file +REACT_APP_CSS_MODULES=true + +REACT_APP_WEBPACK_DASHBOARD=false diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index ec23a481906..b91adf0c57c 100644 --- a/packages/react-scripts/scripts/start.js +++ b/packages/react-scripts/scripts/start.js @@ -30,12 +30,21 @@ var openBrowser = require('react-dev-utils/openBrowser'); var prompt = require('react-dev-utils/prompt'); var config = require('../config/webpack.config.dev'); var paths = require('../config/paths'); +var getCustomConfig = require('../config/get-custom-config'); +var customConfig = getCustomConfig(false); // Warn and crash if required files are missing if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { process.exit(1); } +function log() { + if (customConfig.values.WEBPACK_DASHBOARD === true) { + return; + } + console.log.apply(null, arguments); +}; + // Tools like Cloud9 rely on this. var DEFAULT_PORT = process.env.PORT || 3000; var compiler; @@ -63,14 +72,14 @@ function setupCompiler(host, port, protocol) { // recompiling a bundle. WebpackDevServer takes care to pause serving the // bundle, so if you refresh, it'll wait instead of serving the old one. // "invalid" is short for "bundle invalidated", it doesn't imply any errors. - compiler.plugin('invalid', function() { + compiler.plugin('invalid', function () { clearConsole(); - console.log('Compiling...'); + log('Compiling...'); }); // "done" event fires when Webpack has finished recompiling the bundle. // Whether or not you have warnings or errors, you will get this event. - compiler.plugin('done', function(stats) { + compiler.plugin('done', function (stats) { clearConsole(); // We have switched off the default Webpack output in WebpackDevServer @@ -78,40 +87,40 @@ function setupCompiler(host, port, protocol) { // them in a readable focused way. var messages = formatWebpackMessages(stats); if (!messages.errors.length && !messages.warnings.length) { - console.log(chalk.green('Compiled successfully!')); - console.log(); - console.log('The app is running at:'); - console.log(); - console.log(' ' + chalk.cyan(protocol + '://' + host + ':' + port + '/')); - console.log(); - console.log('Note that the development build is not optimized.'); - console.log('To create a production build, use ' + chalk.cyan('npm run build') + '.'); - console.log(); + log(chalk.green('Compiled successfully!')); + log(); + log('The app is running at:'); + log(); + log(' ' + chalk.cyan(protocol + '://' + host + ':' + port + '/')); + log(); + log('Note that the development build is not optimized.'); + log('To create a production build, use ' + chalk.cyan('npm run build') + '.'); + log(); } // If errors exist, only show errors. if (messages.errors.length) { - console.log(chalk.red('Failed to compile.')); - console.log(); + log(chalk.red('Failed to compile.')); + log(); messages.errors.forEach(message => { - console.log(message); - console.log(); + log(message); + log(); }); return; } // Show warnings if no errors were found. if (messages.warnings.length) { - console.log(chalk.yellow('Compiled with warnings.')); - console.log(); + log(chalk.yellow('Compiled with warnings.')); + log(); messages.warnings.forEach(message => { - console.log(message); - console.log(); + log(message); + log(); }); // Teach some ESLint tricks. - console.log('You may use special comments to disable some warnings.'); - console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.'); - console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.'); + log('You may use special comments to disable some warnings.'); + log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.'); + log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.'); } }); } @@ -119,22 +128,22 @@ function setupCompiler(host, port, protocol) { // We need to provide a custom onError function for httpProxyMiddleware. // It allows us to log custom error messages on the console. function onProxyError(proxy) { - return function(err, req, res){ + return function (err, req, res) { var host = req.headers && req.headers.host; - console.log( + log( chalk.red('Proxy error:') + ' Could not proxy request ' + chalk.cyan(req.url) + ' from ' + chalk.cyan(host) + ' to ' + chalk.cyan(proxy) + '.' ); - console.log( + log( 'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' + chalk.cyan(err.code) + ').' ); - console.log(); + log(); // And immediately send the proper error response to the client. // Otherwise, the request will eventually timeout with ERR_EMPTY_RESPONSE on the client side. if (res.writeHead && !res.headersSent) { - res.writeHead(500); + res.writeHead(500); } res.end('Proxy error: Could not proxy request ' + req.url + ' from ' + host + ' to ' + proxy + ' (' + err.code + ').' @@ -163,9 +172,9 @@ function addMiddleware(devServer) { })); if (proxy) { if (typeof proxy !== 'string') { - console.log(chalk.red('When specified, "proxy" in package.json must be a string.')); - console.log(chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".')); - console.log(chalk.red('Either remove "proxy" from package.json, or make it a string.')); + log(chalk.red('When specified, "proxy" in package.json must be a string.')); + log(chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".')); + log(chalk.red('Either remove "proxy" from package.json, or make it a string.')); process.exit(1); } @@ -224,7 +233,7 @@ function runDevServer(host, port, protocol) { publicPath: config.output.publicPath, // WebpackDevServer is noisy by default so we emit custom message instead // by listening to the compiler events with `compiler.plugin` calls above. - quiet: false, + quiet: true, // Reportedly, this avoids CPU overload on some systems. // https://github.com/facebookincubator/create-react-app/issues/293 watchOptions: { @@ -241,12 +250,15 @@ function runDevServer(host, port, protocol) { // Launch WebpackDevServer. devServer.listen(port, (err, result) => { if (err) { - return console.log(err); + return log(err); } - console.log(chalk.cyan('Starting the development server...')); - console.log(); - openBrowser(protocol + '://' + host + ':' + port + '/'); + log(chalk.cyan('Starting the development server...')); + log(); + + if (process.env && process.env.OPEN_BROWSER !== 'false') { + openBrowser(protocol + '://' + host + ':' + port + '/'); + } }); } @@ -260,14 +272,14 @@ function run(port) { // We attempt to use the default port but if it is busy, we offer the user to // run on a different port. `detect()` Promise resolves to the next free port. detect(DEFAULT_PORT).then(port => { - if (port === DEFAULT_PORT) { + if (port === DEFAULT_PORT || customConfig.values.WEBPACK_DASHBOARD === true) { run(port); return; } var question = - chalk.yellow('Something is already running on port ' + DEFAULT_PORT + '.') + - '\n\nWould you like to run the app on another port instead?'; + chalk.yellow('Something is already running on port ' + DEFAULT_PORT + '.') + + '\n\nWould you like to run the app on another port instead?'; prompt(question, true).then(shouldChangePort => { if (shouldChangePort) { From 550e99202c0264fad5655a261969f4ccb5c025e7 Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 14:38:10 +0200 Subject: [PATCH 024/140] =?UTF-8?q?=F0=9F=93=96=20updates=20readme=20and?= =?UTF-8?q?=20App.js=20with=20new=20config=20options?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 5 ++++- packages/react-scripts/README.md | 5 ++++- packages/react-scripts/bin/CUSTOM_README.md | 5 ++++- packages/react-scripts/template/src/App.js | 13 +++++++++++-- 4 files changed, 23 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index a7535526136..c4dda093c97 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,6 @@ The generated project comes with SASS, LESS, and CSS modules support by default, #### Webpack - ```REACT_APP_WEBPACK_DASHBOARD=true``` - enable webpack-dashboard -- ```REACT_APP_DECORATORS=true``` - enable decorators support #### Babel - ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset @@ -39,6 +38,10 @@ The generated project comes with SASS, LESS, and CSS modules support by default, > โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. > Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. +#### Others +- ```PORT=3015``` - change default port (supported in CRA by default) +- ```OPEN_BROWSER=false``` - don't open browser after running webpack server + ### ๐Ÿค” Why? The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index a7535526136..c4dda093c97 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -30,7 +30,6 @@ The generated project comes with SASS, LESS, and CSS modules support by default, #### Webpack - ```REACT_APP_WEBPACK_DASHBOARD=true``` - enable webpack-dashboard -- ```REACT_APP_DECORATORS=true``` - enable decorators support #### Babel - ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset @@ -39,6 +38,10 @@ The generated project comes with SASS, LESS, and CSS modules support by default, > โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. > Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. +#### Others +- ```PORT=3015``` - change default port (supported in CRA by default) +- ```OPEN_BROWSER=false``` - don't open browser after running webpack server + ### ๐Ÿค” Why? The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: diff --git a/packages/react-scripts/bin/CUSTOM_README.md b/packages/react-scripts/bin/CUSTOM_README.md index a7535526136..c4dda093c97 100644 --- a/packages/react-scripts/bin/CUSTOM_README.md +++ b/packages/react-scripts/bin/CUSTOM_README.md @@ -30,7 +30,6 @@ The generated project comes with SASS, LESS, and CSS modules support by default, #### Webpack - ```REACT_APP_WEBPACK_DASHBOARD=true``` - enable webpack-dashboard -- ```REACT_APP_DECORATORS=true``` - enable decorators support #### Babel - ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset @@ -39,6 +38,10 @@ The generated project comes with SASS, LESS, and CSS modules support by default, > โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. > Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. +#### Others +- ```PORT=3015``` - change default port (supported in CRA by default) +- ```OPEN_BROWSER=false``` - don't open browser after running webpack server + ### ๐Ÿค” Why? The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: diff --git a/packages/react-scripts/template/src/App.js b/packages/react-scripts/template/src/App.js index aa93ae38c5b..66dd17fc027 100644 --- a/packages/react-scripts/template/src/App.js +++ b/packages/react-scripts/template/src/App.js @@ -62,11 +62,20 @@ class App extends Component { REACT_APP_WEBPACK_DASHBOARD=true - Enable webpack-dashboard โš ๏ธ (this will turn off the original create-react-app message logs) + + + Others +
  • - REACT_APP_DECORATORS=true - - Enable usage of decorators + PORT=3015 + - change default port (supported in CRA by default) +
  • +
  • + OPEN_BROWSER=false + - don't open browser after running webpack server
+
) From fb02f939d77afe1d3b9cbd787e8e6c9eb166a9aa Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 14:38:54 +0200 Subject: [PATCH 025/140] =?UTF-8?q?=F0=9F=8E=89=20releaase=200.0.5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 558b560438d..95de246f3b1 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.0.4", + "version": "0.0.5", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", From 995f4be531c8cecc179d50f6b488ceef0796c65a Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 14:44:01 +0200 Subject: [PATCH 026/140] =?UTF-8?q?=E2=9E=95=20adds=20build-and-deploy=20s?= =?UTF-8?q?cript=20for=20easy=20surge.sh=20deployments?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 1029bc47758..92f23c28306 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,9 @@ "postinstall": "lerna bootstrap", "publish": "tasks/release.sh", "start": "node packages/react-scripts/scripts/start.js", - "test": "node packages/react-scripts/scripts/test.js --env=jsdom" + "test": "node packages/react-scripts/scripts/test.js --env=jsdom", + "deploy": "surge build/ custom-create-react-app.surge.sh", + "bnd": "npm run build && npm run deploy" }, "devDependencies": { "babel-eslint": "6.1.2", From 713436ac6f834efd40aca816ad47fa91c7c8e38b Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 14:44:13 +0200 Subject: [PATCH 027/140] =?UTF-8?q?=F0=9F=8E=89=20change=20description=20a?= =?UTF-8?q?nd=20release=200.0.6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 95de246f3b1..885889f9cd0 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,7 +1,7 @@ { "name": "custom-react-scripts", - "version": "0.0.5", - "description": "Configuration and scripts for Create React App.", + "version": "0.0.6", + "description": "Allow custom configurations for create-react-app", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", "engines": { From 2e312aa0cc3e451d65ce0784c86f2322e37c76e2 Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 14:47:38 +0200 Subject: [PATCH 028/140] =?UTF-8?q?=F0=9F=9B=A0=20unify=20description=20on?= =?UTF-8?q?=20github/npm/readme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 - packages/react-scripts/README.md | 1 - packages/react-scripts/bin/CUSTOM_README.md | 1 - packages/react-scripts/package.json | 2 +- 4 files changed, 1 insertion(+), 4 deletions(-) diff --git a/README.md b/README.md index c4dda093c97..8f612c495dc 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,4 @@ # โ˜ข custom-react-scripts โ˜ข -#### Support for custom create-react-app config without ejecting the app ### โš ๏ธ Disclaimer: > This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index c4dda093c97..8f612c495dc 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -1,5 +1,4 @@ # โ˜ข custom-react-scripts โ˜ข -#### Support for custom create-react-app config without ejecting the app ### โš ๏ธ Disclaimer: > This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. diff --git a/packages/react-scripts/bin/CUSTOM_README.md b/packages/react-scripts/bin/CUSTOM_README.md index c4dda093c97..8f612c495dc 100644 --- a/packages/react-scripts/bin/CUSTOM_README.md +++ b/packages/react-scripts/bin/CUSTOM_README.md @@ -1,5 +1,4 @@ # โ˜ข custom-react-scripts โ˜ข -#### Support for custom create-react-app config without ejecting the app ### โš ๏ธ Disclaimer: > This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 885889f9cd0..f5dbe1152b1 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,7 +1,7 @@ { "name": "custom-react-scripts", "version": "0.0.6", - "description": "Allow custom configurations for create-react-app", + "description": "Allow custom config for create-react-app without ejecting", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", "engines": { From 69ece2e9de9e3248d2229987c7a8cc627df563f9 Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 14:48:21 +0200 Subject: [PATCH 029/140] =?UTF-8?q?=F0=9F=9B=A0=20change=20surge=20url?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 92f23c28306..16acdcfd706 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "publish": "tasks/release.sh", "start": "node packages/react-scripts/scripts/start.js", "test": "node packages/react-scripts/scripts/test.js --env=jsdom", - "deploy": "surge build/ custom-create-react-app.surge.sh", + "deploy": "surge build/ custom-react-scripts.surge.sh", "bnd": "npm run build && npm run deploy" }, "devDependencies": { From 4e4360ef01426328b084dbe3b87bde6e099f651f Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 14:48:36 +0200 Subject: [PATCH 030/140] =?UTF-8?q?=F0=9F=8E=89=20release=200.0.7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index f5dbe1152b1..4e67bb34105 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.0.6", + "version": "0.0.7", "description": "Allow custom config for create-react-app without ejecting", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", From 57760fc46309121531cb4d98a5dc17d74b54b8cc Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 15:05:19 +0200 Subject: [PATCH 031/140] =?UTF-8?q?=F0=9F=9B=A0=20modify=20landing=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/template/src/App.js | 18 +++++++++++++--- packages/react-scripts/template/src/App.less | 5 +++++ packages/react-scripts/template/src/App.scss | 21 ++++++++++--------- .../react-scripts/template/src/Modules.css | 13 ++++++++++++ 4 files changed, 44 insertions(+), 13 deletions(-) diff --git a/packages/react-scripts/template/src/App.js b/packages/react-scripts/template/src/App.js index 66dd17fc027..3c0ff4c0fce 100644 --- a/packages/react-scripts/template/src/App.js +++ b/packages/react-scripts/template/src/App.js @@ -12,11 +12,18 @@ class App extends Component {
logo -

โ˜ข Customizable create-react-app โ˜ข

+

โ˜ข custom-react-scripts โ˜ข

+
allow custom config for create-react-app without ejecting
-

If you want to enable certain features just modify the .env file in the root directory of this + +

+ create-react-app my-app --scripts-version custom-react-scripts +
+ +

If you want to enable/disable certain features just modify the .env file in the root directory of + the project.

@@ -60,7 +67,7 @@ class App extends Component {
  • REACT_APP_WEBPACK_DASHBOARD=true - - Enable webpack-dashboard โš ๏ธ (this will turn off the original create-react-app message logs) + - Enable webpack-dashboard โš ๏ธ (experimental)
@@ -76,6 +83,11 @@ class App extends Component { +
+
+ + Link to full README.md +
) diff --git a/packages/react-scripts/template/src/App.less b/packages/react-scripts/template/src/App.less index b3a5cf2a103..f1d54ecb419 100644 --- a/packages/react-scripts/template/src/App.less +++ b/packages/react-scripts/template/src/App.less @@ -2,4 +2,9 @@ &-title { justify-content: center; } + + &-subtitle { + font-weight: 100; + } + } \ No newline at end of file diff --git a/packages/react-scripts/template/src/App.scss b/packages/react-scripts/template/src/App.scss index b6b908d7576..bac48c111c4 100644 --- a/packages/react-scripts/template/src/App.scss +++ b/packages/react-scripts/template/src/App.scss @@ -17,7 +17,7 @@ .App { &-header { background-color: #222; - height: 150px; + height: 180px; padding: 20px; color: white; text-align: center; @@ -32,13 +32,14 @@ li { margin: 15px 0px; } - code { - border-radius: 3px; - padding: 2px 10px; - font-size: 17px; - margin-right: 10px; - background-color: rgba(222, 222, 222, 0.34); - border: 1px solid #cccccc; - color: #868686; - } +} + +code { + border-radius: 3px; + padding: 2px 10px; + font-size: 17px; + margin-right: 10px; + background-color: rgba(222, 222, 222, 0.34); + border: 1px solid #cccccc; + color: #868686; } diff --git a/packages/react-scripts/template/src/Modules.css b/packages/react-scripts/template/src/Modules.css index 77ce4657ad6..298148c356d 100644 --- a/packages/react-scripts/template/src/Modules.css +++ b/packages/react-scripts/template/src/Modules.css @@ -18,4 +18,17 @@ line-height: 20px; font-weight: 100; color: #e68484; +} + +.command { + margin: 40px 0px 50px 0; +} + +.readmeLink { + font-size: 18px; +} + +.experimental { + font-size: 12px; + font-weight: 100; } \ No newline at end of file From 3d9a7f4a80295249cf55fbbabfe4b6c5b8ee4a6d Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 15:32:04 +0200 Subject: [PATCH 032/140] =?UTF-8?q?=F0=9F=93=96update=20READMEs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 241 +++++------------------- README_BACKUP.md | 218 +++++++++++++++++++++ packages/react-scripts/README.md | 68 ++++++- packages/react-scripts/README_BACKUP.md | 7 + 4 files changed, 332 insertions(+), 202 deletions(-) create mode 100644 README_BACKUP.md create mode 100644 packages/react-scripts/README_BACKUP.md diff --git a/README.md b/README.md index aeef8cda64b..8f612c495dc 100644 --- a/README.md +++ b/README.md @@ -1,218 +1,65 @@ -# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) +# โ˜ข custom-react-scripts โ˜ข -Create React apps with no build configuration. +### โš ๏ธ Disclaimer: +> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. -* [Getting Started](#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. +### ๐Ÿ’กFeatures: +* Decorators +* babel-preset-stage-0 +* LESS +* SASS +* CSS modules +* webpack-dashboard -## tl;dr +**the features are optional and can be turned on/off individually* -```sh -npm install -g create-react-app +### โ”How to use it +```create-react-app my-app --scripts-version custom-react-scripts``` -create-react-app my-app -cd my-app/ -npm start +Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. -``` +The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. -Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
-When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. +### ๐Ÿ“ Configuration options -npm start +#### Styling +- ```REACT_APP_SASS=true``` - enable SASS support +- ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_CSS_MODULES``` - enable CSS modules -## Getting Started +#### Webpack +- ```REACT_APP_WEBPACK_DASHBOARD=true``` - enable webpack-dashboard -### Installation +#### Babel +- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset +- ```REACT_APP_DECORATORS=true``` - enable decorators support -Install it once globally: +> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. +> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. -```sh -npm install -g create-react-app -``` +#### Others +- ```PORT=3015``` - change default port (supported in CRA by default) +- ```OPEN_BROWSER=false``` - don't open browser after running webpack server -**Youโ€™ll need to have Node >= 4 on your machine**. +### ๐Ÿค” Why? +The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: -**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. +* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. +* It's hard to maintain code for all of these custom configurations that people want to use. -**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. +But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. -### Creating an App +So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. -To create a new app, run: +### How does it work? +The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. -```sh -create-react-app my-app -cd my-app -``` +From the original readme: +> To define permanent environment vairables, create a file called .env in the root of your project: +> REACT_APP_SECRET_CODE=abcdef -It will create a directory called `my-app` inside the current folder.
-Inside that directory, it will generate the initial project structure and install the transitive dependencies: +I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. -``` -my-app/ - README.md - node_modules/ - package.json - .gitignore - public/ - favicon.ico - index.html - src/ - App.css - App.js - App.test.js - index.css - index.js - logo.svg -``` +### Future plans -No configuration or complicated folder structures, just the files you need to build your app.
-Once the installation is done, you can run some commands inside the project folder: - -### `npm start` - -Runs the app in development mode.
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.
-You will see the build errors and lint warnings in the console. - -Build errors - -### `npm test` - -Runs the test watcher in an interactive mode. -By default, runs tests related to files changes since the last commit. - -[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) - -### `npm run build` - -Builds the app for production to the `build` folder.
-It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.
-Your app is ready to be deployed! - -## User Guide - -The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: - -- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) -- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) -- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) -- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) -- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) -- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) -- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) -- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) -- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) -- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) -- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) -- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) -- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) -- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) -- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) -- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) -- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) -- [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) -- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) -- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) - -A copy of the user guide will be created as `README.md` in your project folder. - -## Philosophy - -* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. - -* **Zero Configuration:** There are no configuration files or command line options. Configuring both development and production builds is handled for you so you can focus on writing code. - -* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. - -## Why Use This? - -**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: - -* React, JSX, and ES6 support. -* Language extras beyond ES6 like the object spread operator. -* A dev server that lints for common errors. -* Import CSS and image files directly from JavaScript. -* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. -* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. - -**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. - -**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. - -### Converting to a Custom Setup - -**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. - -Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. - -**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** - -You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. - -## Limitations - -Some features are currently **not supported**: - -* Server rendering. -* Some experimental syntax extensions (e.g. decorators). -* CSS Modules. -* LESS or Sass. -* Hot reloading of components. - -Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. - -## Whatโ€™s Inside? - -The tools used by Create React App are subject to change. -Currently it is a thin layer on top of many amazing community projects, such as: - -* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) -* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) -* [Autoprefixer](https://github.com/postcss/autoprefixer) -* [ESLint](http://eslint.org/) -* [Jest](http://facebook.github.io/jest) -* and others. - -All of them are transitive dependencies of the provided npm package. - -## Contributing - -We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. - -## Acknowledgements - -We are grateful to the authors of existing related projects for their ideas and collaboration: - -* [@eanplatter](https://github.com/eanplatter) -* [@insin](https://github.com/insin) -* [@mxstbr](https://github.com/mxstbr) - -## Alternatives - -If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. -Some of the more popular and actively maintained ones are: - -* [insin/nwb](https://github.com/insin/nwb) -* [mozilla/neo](https://github.com/mozilla/neo) -* [NYTimes/kyt](https://github.com/NYTimes/kyt) - -Notable alternatives also include: - -* [enclave](https://github.com/eanplatter/enclave) -* [motion](https://github.com/motion/motion) -* [quik](https://github.com/satya164/quik) -* [sagui](https://github.com/saguijs/sagui) -* [roc](https://github.com/rocjs/roc) -* [aik](https://github.com/d4rkr00t/aik) -* [react-app](https://github.com/kriasoft/react-app) -* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) -* [tarec](https://github.com/geowarin/tarec) - -You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
-React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. \ No newline at end of file diff --git a/README_BACKUP.md b/README_BACKUP.md new file mode 100644 index 00000000000..aeef8cda64b --- /dev/null +++ b/README_BACKUP.md @@ -0,0 +1,218 @@ +# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) + +Create React apps with no build configuration. + +* [Getting Started](#getting-started) โ€“ How to create a new app. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. + +## tl;dr + +```sh +npm install -g create-react-app + +create-react-app my-app +cd my-app/ +npm start + +``` + +Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
+When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. + +npm start + +## Getting Started + +### Installation + +Install it once globally: + +```sh +npm install -g create-react-app +``` + +**Youโ€™ll need to have Node >= 4 on your machine**. + +**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. + +**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. + +### Creating an App + +To create a new app, run: + +```sh +create-react-app my-app +cd my-app +``` + +It will create a directory called `my-app` inside the current folder.
+Inside that directory, it will generate the initial project structure and install the transitive dependencies: + +``` +my-app/ + README.md + node_modules/ + package.json + .gitignore + public/ + favicon.ico + index.html + src/ + App.css + App.js + App.test.js + index.css + index.js + logo.svg +``` + +No configuration or complicated folder structures, just the files you need to build your app.
+Once the installation is done, you can run some commands inside the project folder: + +### `npm start` + +Runs the app in development mode.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
+You will see the build errors and lint warnings in the console. + +Build errors + +### `npm test` + +Runs the test watcher in an interactive mode. +By default, runs tests related to files changes since the last commit. + +[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) + +### `npm run build` + +Builds the app for production to the `build` folder.
+It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
+Your app is ready to be deployed! + +## User Guide + +The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: + +- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) +- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) +- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) +- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) +- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) +- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) +- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) +- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) +- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) +- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) +- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) +- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) +- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) +- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) +- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) +- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) +- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) +- [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) +- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) +- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) + +A copy of the user guide will be created as `README.md` in your project folder. + +## Philosophy + +* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. + +* **Zero Configuration:** There are no configuration files or command line options. Configuring both development and production builds is handled for you so you can focus on writing code. + +* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. + +## Why Use This? + +**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: + +* React, JSX, and ES6 support. +* Language extras beyond ES6 like the object spread operator. +* A dev server that lints for common errors. +* Import CSS and image files directly from JavaScript. +* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. +* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. + +**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. + +**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. + +### Converting to a Custom Setup + +**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. + +Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. + +**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** + +You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. + +## Limitations + +Some features are currently **not supported**: + +* Server rendering. +* Some experimental syntax extensions (e.g. decorators). +* CSS Modules. +* LESS or Sass. +* Hot reloading of components. + +Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. + +## Whatโ€™s Inside? + +The tools used by Create React App are subject to change. +Currently it is a thin layer on top of many amazing community projects, such as: + +* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) +* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) +* [Autoprefixer](https://github.com/postcss/autoprefixer) +* [ESLint](http://eslint.org/) +* [Jest](http://facebook.github.io/jest) +* and others. + +All of them are transitive dependencies of the provided npm package. + +## Contributing + +We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. + +## Acknowledgements + +We are grateful to the authors of existing related projects for their ideas and collaboration: + +* [@eanplatter](https://github.com/eanplatter) +* [@insin](https://github.com/insin) +* [@mxstbr](https://github.com/mxstbr) + +## Alternatives + +If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. +Some of the more popular and actively maintained ones are: + +* [insin/nwb](https://github.com/insin/nwb) +* [mozilla/neo](https://github.com/mozilla/neo) +* [NYTimes/kyt](https://github.com/NYTimes/kyt) + +Notable alternatives also include: + +* [enclave](https://github.com/eanplatter/enclave) +* [motion](https://github.com/motion/motion) +* [quik](https://github.com/satya164/quik) +* [sagui](https://github.com/saguijs/sagui) +* [roc](https://github.com/rocjs/roc) +* [aik](https://github.com/d4rkr00t/aik) +* [react-app](https://github.com/kriasoft/react-app) +* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) +* [tarec](https://github.com/geowarin/tarec) + +You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
+React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index 92364c5fead..8f612c495dc 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -1,7 +1,65 @@ -# react-scripts +# โ˜ข custom-react-scripts โ˜ข -This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). -Please refer to its documentation: +### โš ๏ธ Disclaimer: +> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. -* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file +### ๐Ÿ’กFeatures: +* Decorators +* babel-preset-stage-0 +* LESS +* SASS +* CSS modules +* webpack-dashboard + +**the features are optional and can be turned on/off individually* + +### โ”How to use it +```create-react-app my-app --scripts-version custom-react-scripts``` + +Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. + +The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. + +### ๐Ÿ“ Configuration options + +#### Styling +- ```REACT_APP_SASS=true``` - enable SASS support +- ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_CSS_MODULES``` - enable CSS modules + +#### Webpack +- ```REACT_APP_WEBPACK_DASHBOARD=true``` - enable webpack-dashboard + +#### Babel +- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset +- ```REACT_APP_DECORATORS=true``` - enable decorators support + +> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. +> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. + +#### Others +- ```PORT=3015``` - change default port (supported in CRA by default) +- ```OPEN_BROWSER=false``` - don't open browser after running webpack server + +### ๐Ÿค” Why? +The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: + +* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. +* It's hard to maintain code for all of these custom configurations that people want to use. + +But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. + +So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. + +### How does it work? +The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. + +From the original readme: +> To define permanent environment vairables, create a file called .env in the root of your project: +> REACT_APP_SECRET_CODE=abcdef + +I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. + +### Future plans + +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. \ No newline at end of file diff --git a/packages/react-scripts/README_BACKUP.md b/packages/react-scripts/README_BACKUP.md new file mode 100644 index 00000000000..92364c5fead --- /dev/null +++ b/packages/react-scripts/README_BACKUP.md @@ -0,0 +1,7 @@ +# react-scripts + +This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). +Please refer to its documentation: + +* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file From 60fa4e2f3b514b8400fa1d0c2f67edc5812f98bb Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 15:32:19 +0200 Subject: [PATCH 033/140] =?UTF-8?q?=F0=9F=8E=89=20publish=200.0.8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 38b62021ff6..4ca5c9a58b7 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.0.7", + "version": "0.0.8", "description": "Allow custom config for create-react-app without ejecting", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", From bb93e29ae158e766b3054a2df842820ac4529cba Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 15:47:29 +0200 Subject: [PATCH 034/140] =?UTF-8?q?=F0=9F=93=96=20revert=20original=20read?= =?UTF-8?q?me?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README_BACKUP.md | 218 ------------------------ packages/react-scripts/README_BACKUP.md | 7 - 2 files changed, 225 deletions(-) delete mode 100644 README_BACKUP.md delete mode 100644 packages/react-scripts/README_BACKUP.md diff --git a/README_BACKUP.md b/README_BACKUP.md deleted file mode 100644 index aeef8cda64b..00000000000 --- a/README_BACKUP.md +++ /dev/null @@ -1,218 +0,0 @@ -# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) - -Create React apps with no build configuration. - -* [Getting Started](#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. - -## tl;dr - -```sh -npm install -g create-react-app - -create-react-app my-app -cd my-app/ -npm start - -``` - -Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
-When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. - -npm start - -## Getting Started - -### Installation - -Install it once globally: - -```sh -npm install -g create-react-app -``` - -**Youโ€™ll need to have Node >= 4 on your machine**. - -**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. - -**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. - -### Creating an App - -To create a new app, run: - -```sh -create-react-app my-app -cd my-app -``` - -It will create a directory called `my-app` inside the current folder.
-Inside that directory, it will generate the initial project structure and install the transitive dependencies: - -``` -my-app/ - README.md - node_modules/ - package.json - .gitignore - public/ - favicon.ico - index.html - src/ - App.css - App.js - App.test.js - index.css - index.js - logo.svg -``` - -No configuration or complicated folder structures, just the files you need to build your app.
-Once the installation is done, you can run some commands inside the project folder: - -### `npm start` - -Runs the app in development mode.
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.
-You will see the build errors and lint warnings in the console. - -Build errors - -### `npm test` - -Runs the test watcher in an interactive mode. -By default, runs tests related to files changes since the last commit. - -[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) - -### `npm run build` - -Builds the app for production to the `build` folder.
-It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.
-Your app is ready to be deployed! - -## User Guide - -The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: - -- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) -- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) -- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) -- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) -- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) -- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) -- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) -- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) -- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) -- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) -- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) -- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) -- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) -- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) -- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) -- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) -- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) -- [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) -- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) -- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) - -A copy of the user guide will be created as `README.md` in your project folder. - -## Philosophy - -* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. - -* **Zero Configuration:** There are no configuration files or command line options. Configuring both development and production builds is handled for you so you can focus on writing code. - -* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. - -## Why Use This? - -**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: - -* React, JSX, and ES6 support. -* Language extras beyond ES6 like the object spread operator. -* A dev server that lints for common errors. -* Import CSS and image files directly from JavaScript. -* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. -* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. - -**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. - -**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. - -### Converting to a Custom Setup - -**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. - -Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. - -**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** - -You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. - -## Limitations - -Some features are currently **not supported**: - -* Server rendering. -* Some experimental syntax extensions (e.g. decorators). -* CSS Modules. -* LESS or Sass. -* Hot reloading of components. - -Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. - -## Whatโ€™s Inside? - -The tools used by Create React App are subject to change. -Currently it is a thin layer on top of many amazing community projects, such as: - -* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) -* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) -* [Autoprefixer](https://github.com/postcss/autoprefixer) -* [ESLint](http://eslint.org/) -* [Jest](http://facebook.github.io/jest) -* and others. - -All of them are transitive dependencies of the provided npm package. - -## Contributing - -We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. - -## Acknowledgements - -We are grateful to the authors of existing related projects for their ideas and collaboration: - -* [@eanplatter](https://github.com/eanplatter) -* [@insin](https://github.com/insin) -* [@mxstbr](https://github.com/mxstbr) - -## Alternatives - -If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. -Some of the more popular and actively maintained ones are: - -* [insin/nwb](https://github.com/insin/nwb) -* [mozilla/neo](https://github.com/mozilla/neo) -* [NYTimes/kyt](https://github.com/NYTimes/kyt) - -Notable alternatives also include: - -* [enclave](https://github.com/eanplatter/enclave) -* [motion](https://github.com/motion/motion) -* [quik](https://github.com/satya164/quik) -* [sagui](https://github.com/saguijs/sagui) -* [roc](https://github.com/rocjs/roc) -* [aik](https://github.com/d4rkr00t/aik) -* [react-app](https://github.com/kriasoft/react-app) -* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) -* [tarec](https://github.com/geowarin/tarec) - -You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
-React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file diff --git a/packages/react-scripts/README_BACKUP.md b/packages/react-scripts/README_BACKUP.md deleted file mode 100644 index 92364c5fead..00000000000 --- a/packages/react-scripts/README_BACKUP.md +++ /dev/null @@ -1,7 +0,0 @@ -# react-scripts - -This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). -Please refer to its documentation: - -* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file From 1bffe4b9dab68b850312a7539c290cda1c3da4d1 Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 15:49:24 +0200 Subject: [PATCH 035/140] =?UTF-8?q?=F0=9F=93=96=20update=20readme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 241 +++++++++++++++++++++++++------ packages/react-scripts/README.md | 68 +-------- 2 files changed, 202 insertions(+), 107 deletions(-) diff --git a/README.md b/README.md index 8f612c495dc..aeef8cda64b 100644 --- a/README.md +++ b/README.md @@ -1,65 +1,218 @@ -# โ˜ข custom-react-scripts โ˜ข +# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) -### โš ๏ธ Disclaimer: -> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. +Create React apps with no build configuration. -### ๐Ÿ’กFeatures: -* Decorators -* babel-preset-stage-0 -* LESS -* SASS -* CSS modules -* webpack-dashboard +* [Getting Started](#getting-started) โ€“ How to create a new app. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. -**the features are optional and can be turned on/off individually* +## tl;dr -### โ”How to use it -```create-react-app my-app --scripts-version custom-react-scripts``` +```sh +npm install -g create-react-app -Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. +create-react-app my-app +cd my-app/ +npm start -The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. +``` -### ๐Ÿ“ Configuration options +Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
+When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. -#### Styling -- ```REACT_APP_SASS=true``` - enable SASS support -- ```REACT_APP_LESS=true``` - enable LESS support -- ```REACT_APP_CSS_MODULES``` - enable CSS modules +npm start -#### Webpack -- ```REACT_APP_WEBPACK_DASHBOARD=true``` - enable webpack-dashboard +## Getting Started -#### Babel -- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset -- ```REACT_APP_DECORATORS=true``` - enable decorators support +### Installation -> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. -> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. +Install it once globally: -#### Others -- ```PORT=3015``` - change default port (supported in CRA by default) -- ```OPEN_BROWSER=false``` - don't open browser after running webpack server +```sh +npm install -g create-react-app +``` -### ๐Ÿค” Why? -The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: +**Youโ€™ll need to have Node >= 4 on your machine**. -* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. -* It's hard to maintain code for all of these custom configurations that people want to use. +**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. -But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. +**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. -So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. +### Creating an App -### How does it work? -The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. +To create a new app, run: -From the original readme: -> To define permanent environment vairables, create a file called .env in the root of your project: -> REACT_APP_SECRET_CODE=abcdef +```sh +create-react-app my-app +cd my-app +``` -I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. +It will create a directory called `my-app` inside the current folder.
+Inside that directory, it will generate the initial project structure and install the transitive dependencies: -### Future plans +``` +my-app/ + README.md + node_modules/ + package.json + .gitignore + public/ + favicon.ico + index.html + src/ + App.css + App.js + App.test.js + index.css + index.js + logo.svg +``` -I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. \ No newline at end of file +No configuration or complicated folder structures, just the files you need to build your app.
+Once the installation is done, you can run some commands inside the project folder: + +### `npm start` + +Runs the app in development mode.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
+You will see the build errors and lint warnings in the console. + +Build errors + +### `npm test` + +Runs the test watcher in an interactive mode. +By default, runs tests related to files changes since the last commit. + +[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) + +### `npm run build` + +Builds the app for production to the `build` folder.
+It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
+Your app is ready to be deployed! + +## User Guide + +The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: + +- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) +- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) +- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) +- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) +- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) +- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) +- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) +- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) +- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) +- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) +- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) +- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) +- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) +- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) +- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) +- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) +- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) +- [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) +- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) +- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) + +A copy of the user guide will be created as `README.md` in your project folder. + +## Philosophy + +* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. + +* **Zero Configuration:** There are no configuration files or command line options. Configuring both development and production builds is handled for you so you can focus on writing code. + +* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. + +## Why Use This? + +**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: + +* React, JSX, and ES6 support. +* Language extras beyond ES6 like the object spread operator. +* A dev server that lints for common errors. +* Import CSS and image files directly from JavaScript. +* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. +* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. + +**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. + +**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. + +### Converting to a Custom Setup + +**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. + +Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. + +**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** + +You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. + +## Limitations + +Some features are currently **not supported**: + +* Server rendering. +* Some experimental syntax extensions (e.g. decorators). +* CSS Modules. +* LESS or Sass. +* Hot reloading of components. + +Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. + +## Whatโ€™s Inside? + +The tools used by Create React App are subject to change. +Currently it is a thin layer on top of many amazing community projects, such as: + +* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) +* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) +* [Autoprefixer](https://github.com/postcss/autoprefixer) +* [ESLint](http://eslint.org/) +* [Jest](http://facebook.github.io/jest) +* and others. + +All of them are transitive dependencies of the provided npm package. + +## Contributing + +We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. + +## Acknowledgements + +We are grateful to the authors of existing related projects for their ideas and collaboration: + +* [@eanplatter](https://github.com/eanplatter) +* [@insin](https://github.com/insin) +* [@mxstbr](https://github.com/mxstbr) + +## Alternatives + +If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. +Some of the more popular and actively maintained ones are: + +* [insin/nwb](https://github.com/insin/nwb) +* [mozilla/neo](https://github.com/mozilla/neo) +* [NYTimes/kyt](https://github.com/NYTimes/kyt) + +Notable alternatives also include: + +* [enclave](https://github.com/eanplatter/enclave) +* [motion](https://github.com/motion/motion) +* [quik](https://github.com/satya164/quik) +* [sagui](https://github.com/saguijs/sagui) +* [roc](https://github.com/rocjs/roc) +* [aik](https://github.com/d4rkr00t/aik) +* [react-app](https://github.com/kriasoft/react-app) +* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) +* [tarec](https://github.com/geowarin/tarec) + +You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
+React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index 8f612c495dc..92364c5fead 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -1,65 +1,7 @@ -# โ˜ข custom-react-scripts โ˜ข +# react-scripts -### โš ๏ธ Disclaimer: -> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. +This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). +Please refer to its documentation: -### ๐Ÿ’กFeatures: -* Decorators -* babel-preset-stage-0 -* LESS -* SASS -* CSS modules -* webpack-dashboard - -**the features are optional and can be turned on/off individually* - -### โ”How to use it -```create-react-app my-app --scripts-version custom-react-scripts``` - -Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. - -The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. - -### ๐Ÿ“ Configuration options - -#### Styling -- ```REACT_APP_SASS=true``` - enable SASS support -- ```REACT_APP_LESS=true``` - enable LESS support -- ```REACT_APP_CSS_MODULES``` - enable CSS modules - -#### Webpack -- ```REACT_APP_WEBPACK_DASHBOARD=true``` - enable webpack-dashboard - -#### Babel -- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset -- ```REACT_APP_DECORATORS=true``` - enable decorators support - -> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. -> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. - -#### Others -- ```PORT=3015``` - change default port (supported in CRA by default) -- ```OPEN_BROWSER=false``` - don't open browser after running webpack server - -### ๐Ÿค” Why? -The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: - -* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. -* It's hard to maintain code for all of these custom configurations that people want to use. - -But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. - -So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. - -### How does it work? -The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. - -From the original readme: -> To define permanent environment vairables, create a file called .env in the root of your project: -> REACT_APP_SECRET_CODE=abcdef - -I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. - -### Future plans - -I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. \ No newline at end of file +* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file From caa6f4e4c56f125c751de4b6e6efb23655cc9243 Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 15:51:29 +0200 Subject: [PATCH 036/140] Merge branch 'master' of https://github.com/facebookincubator/create-react-app --- README_BACKUP.md | 222 ++++++++++++++++++++++++ packages/react-scripts/README.md | 68 +++++++- packages/react-scripts/README_BACKUP.md | 7 + 3 files changed, 292 insertions(+), 5 deletions(-) create mode 100644 README_BACKUP.md create mode 100644 packages/react-scripts/README_BACKUP.md diff --git a/README_BACKUP.md b/README_BACKUP.md new file mode 100644 index 00000000000..ceb886c10b5 --- /dev/null +++ b/README_BACKUP.md @@ -0,0 +1,222 @@ +# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) + +Create React apps with no build configuration. + +* [Getting Started](#getting-started) โ€“ How to create a new app. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. + +## tl;dr + +```sh +npm install -g create-react-app + +create-react-app my-app +cd my-app/ +npm start + +``` + +Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
+When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. + +npm start + +## Getting Started + +### Installation + +Install it once globally: + +```sh +npm install -g create-react-app +``` + +**Youโ€™ll need to have Node >= 4 on your machine**. + +**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. + +**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. + +### Creating an App + +To create a new app, run: + +```sh +create-react-app my-app +cd my-app +``` + +It will create a directory called `my-app` inside the current folder.
+Inside that directory, it will generate the initial project structure and install the transitive dependencies: + +``` +my-app/ + README.md + node_modules/ + package.json + .gitignore + public/ + favicon.ico + index.html + src/ + App.css + App.js + App.test.js + index.css + index.js + logo.svg +``` + +No configuration or complicated folder structures, just the files you need to build your app.
+Once the installation is done, you can run some commands inside the project folder: + +### `npm start` + +Runs the app in development mode.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
+You will see the build errors and lint warnings in the console. + +Build errors + +### `npm test` + +Runs the test watcher in an interactive mode. +By default, runs tests related to files changes since the last commit. + +[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) + +### `npm run build` + +Builds the app for production to the `build` folder.
+It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
+Your app is ready to be deployed! + +## User Guide + +The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: + +- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) +- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) +- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) +- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) +- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) +- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) +- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) +- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) +- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) +- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) +- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) +- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) +- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) +- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) +- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) +- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) +- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) +- [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) +- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) +- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) + +A copy of the user guide will be created as `README.md` in your project folder. + +## How to Update to New Versions? + +Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) for this and other information. + +## Philosophy + +* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. + +* **Zero Configuration:** There are no configuration files or command line options. Configuring both development and production builds is handled for you so you can focus on writing code. + +* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. + +## Why Use This? + +**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: + +* React, JSX, and ES6 support. +* Language extras beyond ES6 like the object spread operator. +* A dev server that lints for common errors. +* Import CSS and image files directly from JavaScript. +* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. +* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. + +**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. + +**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. + +### Converting to a Custom Setup + +**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. + +Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. + +**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** + +You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. + +## Limitations + +Some features are currently **not supported**: + +* Server rendering. +* Some experimental syntax extensions (e.g. decorators). +* CSS Modules. +* LESS or Sass. +* Hot reloading of components. + +Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. + +## Whatโ€™s Inside? + +The tools used by Create React App are subject to change. +Currently it is a thin layer on top of many amazing community projects, such as: + +* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) +* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) +* [Autoprefixer](https://github.com/postcss/autoprefixer) +* [ESLint](http://eslint.org/) +* [Jest](http://facebook.github.io/jest) +* and others. + +All of them are transitive dependencies of the provided npm package. + +## Contributing + +We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. + +## Acknowledgements + +We are grateful to the authors of existing related projects for their ideas and collaboration: + +* [@eanplatter](https://github.com/eanplatter) +* [@insin](https://github.com/insin) +* [@mxstbr](https://github.com/mxstbr) + +## Alternatives + +If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. +Some of the more popular and actively maintained ones are: + +* [insin/nwb](https://github.com/insin/nwb) +* [mozilla/neo](https://github.com/mozilla/neo) +* [NYTimes/kyt](https://github.com/NYTimes/kyt) + +Notable alternatives also include: + +* [enclave](https://github.com/eanplatter/enclave) +* [motion](https://github.com/motion/motion) +* [quik](https://github.com/satya164/quik) +* [sagui](https://github.com/saguijs/sagui) +* [roc](https://github.com/rocjs/roc) +* [aik](https://github.com/d4rkr00t/aik) +* [react-app](https://github.com/kriasoft/react-app) +* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) +* [tarec](https://github.com/geowarin/tarec) + +You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
+React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index 92364c5fead..8f612c495dc 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -1,7 +1,65 @@ -# react-scripts +# โ˜ข custom-react-scripts โ˜ข -This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). -Please refer to its documentation: +### โš ๏ธ Disclaimer: +> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. -* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file +### ๐Ÿ’กFeatures: +* Decorators +* babel-preset-stage-0 +* LESS +* SASS +* CSS modules +* webpack-dashboard + +**the features are optional and can be turned on/off individually* + +### โ”How to use it +```create-react-app my-app --scripts-version custom-react-scripts``` + +Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. + +The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. + +### ๐Ÿ“ Configuration options + +#### Styling +- ```REACT_APP_SASS=true``` - enable SASS support +- ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_CSS_MODULES``` - enable CSS modules + +#### Webpack +- ```REACT_APP_WEBPACK_DASHBOARD=true``` - enable webpack-dashboard + +#### Babel +- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset +- ```REACT_APP_DECORATORS=true``` - enable decorators support + +> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. +> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. + +#### Others +- ```PORT=3015``` - change default port (supported in CRA by default) +- ```OPEN_BROWSER=false``` - don't open browser after running webpack server + +### ๐Ÿค” Why? +The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: + +* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. +* It's hard to maintain code for all of these custom configurations that people want to use. + +But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. + +So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. + +### How does it work? +The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. + +From the original readme: +> To define permanent environment vairables, create a file called .env in the root of your project: +> REACT_APP_SECRET_CODE=abcdef + +I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. + +### Future plans + +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. \ No newline at end of file diff --git a/packages/react-scripts/README_BACKUP.md b/packages/react-scripts/README_BACKUP.md new file mode 100644 index 00000000000..92364c5fead --- /dev/null +++ b/packages/react-scripts/README_BACKUP.md @@ -0,0 +1,7 @@ +# react-scripts + +This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). +Please refer to its documentation: + +* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file From edcef42e88bca68662a17e52b18a268a5556ff45 Mon Sep 17 00:00:00 2001 From: kitze Date: Sun, 25 Sep 2016 15:52:29 +0200 Subject: [PATCH 037/140] Merge branch 'master' of https://github.com/facebookincubator/create-react-app --- README.md | 245 ++++++++++-------------------------------------------- 1 file changed, 44 insertions(+), 201 deletions(-) diff --git a/README.md b/README.md index ceb886c10b5..8f612c495dc 100644 --- a/README.md +++ b/README.md @@ -1,222 +1,65 @@ -# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) +# โ˜ข custom-react-scripts โ˜ข -Create React apps with no build configuration. +### โš ๏ธ Disclaimer: +> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. -* [Getting Started](#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. +### ๐Ÿ’กFeatures: +* Decorators +* babel-preset-stage-0 +* LESS +* SASS +* CSS modules +* webpack-dashboard -## tl;dr +**the features are optional and can be turned on/off individually* -```sh -npm install -g create-react-app +### โ”How to use it +```create-react-app my-app --scripts-version custom-react-scripts``` -create-react-app my-app -cd my-app/ -npm start +Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. -``` +The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. -Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
-When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. +### ๐Ÿ“ Configuration options -npm start +#### Styling +- ```REACT_APP_SASS=true``` - enable SASS support +- ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_CSS_MODULES``` - enable CSS modules -## Getting Started +#### Webpack +- ```REACT_APP_WEBPACK_DASHBOARD=true``` - enable webpack-dashboard -### Installation +#### Babel +- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset +- ```REACT_APP_DECORATORS=true``` - enable decorators support -Install it once globally: +> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. +> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. -```sh -npm install -g create-react-app -``` +#### Others +- ```PORT=3015``` - change default port (supported in CRA by default) +- ```OPEN_BROWSER=false``` - don't open browser after running webpack server -**Youโ€™ll need to have Node >= 4 on your machine**. +### ๐Ÿค” Why? +The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: -**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. +* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. +* It's hard to maintain code for all of these custom configurations that people want to use. -**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. +But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. -### Creating an App +So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. -To create a new app, run: +### How does it work? +The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. -```sh -create-react-app my-app -cd my-app -``` +From the original readme: +> To define permanent environment vairables, create a file called .env in the root of your project: +> REACT_APP_SECRET_CODE=abcdef -It will create a directory called `my-app` inside the current folder.
-Inside that directory, it will generate the initial project structure and install the transitive dependencies: +I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. -``` -my-app/ - README.md - node_modules/ - package.json - .gitignore - public/ - favicon.ico - index.html - src/ - App.css - App.js - App.test.js - index.css - index.js - logo.svg -``` +### Future plans -No configuration or complicated folder structures, just the files you need to build your app.
-Once the installation is done, you can run some commands inside the project folder: - -### `npm start` - -Runs the app in development mode.
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.
-You will see the build errors and lint warnings in the console. - -Build errors - -### `npm test` - -Runs the test watcher in an interactive mode. -By default, runs tests related to files changes since the last commit. - -[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) - -### `npm run build` - -Builds the app for production to the `build` folder.
-It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.
-Your app is ready to be deployed! - -## User Guide - -The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: - -- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) -- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) -- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) -- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) -- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) -- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) -- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) -- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) -- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) -- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) -- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) -- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) -- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) -- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) -- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) -- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) -- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) -- [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) -- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) -- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) - -A copy of the user guide will be created as `README.md` in your project folder. - -## How to Update to New Versions? - -Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) for this and other information. - -## Philosophy - -* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. - -* **Zero Configuration:** There are no configuration files or command line options. Configuring both development and production builds is handled for you so you can focus on writing code. - -* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. - -## Why Use This? - -**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: - -* React, JSX, and ES6 support. -* Language extras beyond ES6 like the object spread operator. -* A dev server that lints for common errors. -* Import CSS and image files directly from JavaScript. -* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. -* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. - -**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. - -**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. - -### Converting to a Custom Setup - -**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. - -Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. - -**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** - -You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. - -## Limitations - -Some features are currently **not supported**: - -* Server rendering. -* Some experimental syntax extensions (e.g. decorators). -* CSS Modules. -* LESS or Sass. -* Hot reloading of components. - -Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. - -## Whatโ€™s Inside? - -The tools used by Create React App are subject to change. -Currently it is a thin layer on top of many amazing community projects, such as: - -* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) -* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) -* [Autoprefixer](https://github.com/postcss/autoprefixer) -* [ESLint](http://eslint.org/) -* [Jest](http://facebook.github.io/jest) -* and others. - -All of them are transitive dependencies of the provided npm package. - -## Contributing - -We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. - -## Acknowledgements - -We are grateful to the authors of existing related projects for their ideas and collaboration: - -* [@eanplatter](https://github.com/eanplatter) -* [@insin](https://github.com/insin) -* [@mxstbr](https://github.com/mxstbr) - -## Alternatives - -If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. -Some of the more popular and actively maintained ones are: - -* [insin/nwb](https://github.com/insin/nwb) -* [mozilla/neo](https://github.com/mozilla/neo) -* [NYTimes/kyt](https://github.com/NYTimes/kyt) - -Notable alternatives also include: - -* [enclave](https://github.com/eanplatter/enclave) -* [motion](https://github.com/motion/motion) -* [quik](https://github.com/satya164/quik) -* [sagui](https://github.com/saguijs/sagui) -* [roc](https://github.com/rocjs/roc) -* [aik](https://github.com/d4rkr00t/aik) -* [react-app](https://github.com/kriasoft/react-app) -* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) -* [tarec](https://github.com/geowarin/tarec) - -You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
-React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. \ No newline at end of file From 070d381112afda86503e8759e4fc5d1acef00334 Mon Sep 17 00:00:00 2001 From: kitze Date: Mon, 26 Sep 2016 14:42:47 +0200 Subject: [PATCH 038/140] =?UTF-8?q?=F0=9F=9B=A0=20revert=20name=20to=20rea?= =?UTF-8?q?ct-scripts,=20closes=20#4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...custom-react-scripts.js => react-scripts.js} | 0 packages/react-scripts/scripts/eject.js | 17 +++++++---------- packages/react-scripts/scripts/init.js | 10 +++++----- 3 files changed, 12 insertions(+), 15 deletions(-) rename packages/react-scripts/bin/{custom-react-scripts.js => react-scripts.js} (100%) diff --git a/packages/react-scripts/bin/custom-react-scripts.js b/packages/react-scripts/bin/react-scripts.js similarity index 100% rename from packages/react-scripts/bin/custom-react-scripts.js rename to packages/react-scripts/bin/react-scripts.js diff --git a/packages/react-scripts/scripts/eject.js b/packages/react-scripts/scripts/eject.js index c0c498d12df..0b1b01b800a 100644 --- a/packages/react-scripts/scripts/eject.js +++ b/packages/react-scripts/scripts/eject.js @@ -64,12 +64,12 @@ prompt( files.forEach(function(file) { console.log('Copying ' + file + ' to ' + appPath); var content = fs - .readFileSync(path.join(ownPath, file), 'utf8') - // Remove dead code from .js files on eject - .replace(/\/\/ @remove-on-eject-begin([\s\S]*?)\/\/ @remove-on-eject-end/mg, '') - // Remove dead code from .applescript files on eject - .replace(/-- @remove-on-eject-begin([\s\S]*?)-- @remove-on-eject-end/mg, '') - .trim() + '\n'; + .readFileSync(path.join(ownPath, file), 'utf8') + // Remove dead code from .js files on eject + .replace(/\/\/ @remove-on-eject-begin([\s\S]*?)\/\/ @remove-on-eject-end/mg, '') + // Remove dead code from .applescript files on eject + .replace(/-- @remove-on-eject-begin([\s\S]*?)-- @remove-on-eject-end/mg, '') + .trim() + '\n'; fs.writeFileSync(path.join(appPath, file), content); }); console.log(); @@ -94,10 +94,7 @@ prompt( delete appPackage.scripts['eject']; Object.keys(appPackage.scripts).forEach(function (key) { appPackage.scripts[key] = appPackage.scripts[key] - .replace( - new RegExp(ownPackageName + ' (\\w+)', 'g'), - 'node scripts/$1.js' - ); + .replace(/react-scripts (\w+)/g, 'node scripts/$1.js'); }); // Add Jest config diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js index 222902a7413..587985d51c4 100644 --- a/packages/react-scripts/scripts/init.js +++ b/packages/react-scripts/scripts/init.js @@ -24,10 +24,10 @@ module.exports = function(appPath, appName, verbose, originalDirectory) { // Setup the script rules appPackage.scripts = { - 'start': ownPackageName + ' start', - 'build': ownPackageName + ' build', - 'test': ownPackageName + ' test --env=jsdom', - 'eject': ownPackageName + ' eject' + 'start': 'react-scripts start', + 'build': 'react-scripts build', + 'test': 'react-scripts test --env=jsdom', + 'eject': 'react-scripts eject' }; fs.writeFileSync( @@ -81,7 +81,7 @@ module.exports = function(appPath, appName, verbose, originalDirectory) { // backward compatibility with old global-cli's. var cdpath; if (originalDirectory && - path.join(originalDirectory, appName) === appPath) { + path.join(originalDirectory, appName) === appPath) { cdpath = appName; } else { cdpath = appPath; From bc73198c972b66febe6dbf290aa454cc2398cb5b Mon Sep 17 00:00:00 2001 From: kitze Date: Mon, 26 Sep 2016 14:43:21 +0200 Subject: [PATCH 039/140] =?UTF-8?q?=F0=9F=8E=89=200.0.9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 4ca5c9a58b7..ca2f94431e1 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.0.8", + "version": "0.0.9", "description": "Allow custom config for create-react-app without ejecting", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", From 8794193c652ffc264689fb5911c5e4f118b6ad74 Mon Sep 17 00:00:00 2001 From: kitze Date: Mon, 26 Sep 2016 17:54:24 +0200 Subject: [PATCH 040/140] =?UTF-8?q?=F0=9F=9B=A0=20change=20the=20bin=20nam?= =?UTF-8?q?e,=20=F0=9F=8E=89=20publish=200.0.10?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index ca2f94431e1..801b00a60d8 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.0.9", + "version": "0.0.10", "description": "Allow custom config for create-react-app without ejecting", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", @@ -20,7 +20,7 @@ "utils" ], "bin": { - "custom-react-scripts": "./bin/custom-react-scripts.js" + "react-scripts": "./bin/react-scripts.js" }, "dependencies": { "autoprefixer": "6.4.1", From 115fd53868a7c8db969993394ab290c6306c6240 Mon Sep 17 00:00:00 2001 From: kitze Date: Tue, 27 Sep 2016 11:06:49 +0200 Subject: [PATCH 041/140] =?UTF-8?q?=F0=9F=9B=A0=20fix=20double=20sass=20co?= =?UTF-8?q?nfig=20in=20.env?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 1 - packages/react-scripts/template/.env | 1 - 2 files changed, 2 deletions(-) diff --git a/.env b/.env index 1cc6eead14e..3a7432f3bd2 100644 --- a/.env +++ b/.env @@ -1,6 +1,5 @@ OPEN_BROWSER=false -REACT_APP_SASS=true REACT_APP_SASS=true REACT_APP_LESS=true REACT_APP_CSS_MODULES=true diff --git a/packages/react-scripts/template/.env b/packages/react-scripts/template/.env index af3d4e4b12e..2d28941c44c 100644 --- a/packages/react-scripts/template/.env +++ b/packages/react-scripts/template/.env @@ -1,4 +1,3 @@ REACT_APP_SASS=true -REACT_APP_SASS=true REACT_APP_LESS=true REACT_APP_CSS_MODULES=true \ No newline at end of file From bc37bfbefae60d79c27e37df9e7057f93ecd2ea3 Mon Sep 17 00:00:00 2001 From: kitze Date: Tue, 27 Sep 2016 11:18:56 +0200 Subject: [PATCH 042/140] =?UTF-8?q?=E2=9E=96=20remove=20webpack-dashboard,?= =?UTF-8?q?=20it=20doesn't=20work=20properly=20and=20implementation=20is?= =?UTF-8?q?=20buggy?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 4 +- README.md | 4 - packages/react-scripts/README.md | 4 - packages/react-scripts/bin/CUSTOM_README.md | 4 - packages/react-scripts/config/customizers.js | 9 --- packages/react-scripts/package.json | 1 - packages/react-scripts/scripts/start.js | 82 +++++++++----------- packages/react-scripts/template/src/App.js | 8 -- 8 files changed, 38 insertions(+), 78 deletions(-) diff --git a/.env b/.env index 3a7432f3bd2..6187d15ca32 100644 --- a/.env +++ b/.env @@ -2,6 +2,4 @@ OPEN_BROWSER=false REACT_APP_SASS=true REACT_APP_LESS=true -REACT_APP_CSS_MODULES=true - -REACT_APP_WEBPACK_DASHBOARD=false +REACT_APP_CSS_MODULES=true \ No newline at end of file diff --git a/README.md b/README.md index 8f612c495dc..485a0f294c3 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,6 @@ * LESS * SASS * CSS modules -* webpack-dashboard **the features are optional and can be turned on/off individually* @@ -27,9 +26,6 @@ The generated project comes with SASS, LESS, and CSS modules support by default, - ```REACT_APP_LESS=true``` - enable LESS support - ```REACT_APP_CSS_MODULES``` - enable CSS modules -#### Webpack -- ```REACT_APP_WEBPACK_DASHBOARD=true``` - enable webpack-dashboard - #### Babel - ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset - ```REACT_APP_DECORATORS=true``` - enable decorators support diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index 8f612c495dc..485a0f294c3 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -9,7 +9,6 @@ * LESS * SASS * CSS modules -* webpack-dashboard **the features are optional and can be turned on/off individually* @@ -27,9 +26,6 @@ The generated project comes with SASS, LESS, and CSS modules support by default, - ```REACT_APP_LESS=true``` - enable LESS support - ```REACT_APP_CSS_MODULES``` - enable CSS modules -#### Webpack -- ```REACT_APP_WEBPACK_DASHBOARD=true``` - enable webpack-dashboard - #### Babel - ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset - ```REACT_APP_DECORATORS=true``` - enable decorators support diff --git a/packages/react-scripts/bin/CUSTOM_README.md b/packages/react-scripts/bin/CUSTOM_README.md index 8f612c495dc..485a0f294c3 100644 --- a/packages/react-scripts/bin/CUSTOM_README.md +++ b/packages/react-scripts/bin/CUSTOM_README.md @@ -9,7 +9,6 @@ * LESS * SASS * CSS modules -* webpack-dashboard **the features are optional and can be turned on/off individually* @@ -27,9 +26,6 @@ The generated project comes with SASS, LESS, and CSS modules support by default, - ```REACT_APP_LESS=true``` - enable LESS support - ```REACT_APP_CSS_MODULES``` - enable CSS modules -#### Webpack -- ```REACT_APP_WEBPACK_DASHBOARD=true``` - enable webpack-dashboard - #### Babel - ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset - ```REACT_APP_DECORATORS=true``` - enable decorators support diff --git a/packages/react-scripts/config/customizers.js b/packages/react-scripts/config/customizers.js index e375f2807ff..62e5dd45700 100644 --- a/packages/react-scripts/config/customizers.js +++ b/packages/react-scripts/config/customizers.js @@ -29,15 +29,6 @@ module.exports = { } } }, - 'WEBPACK_DASHBOARD': { - toArray: 'plugins', - prod: false, - get: function () { - var DashboardPlugin = require('webpack-dashboard/plugin'); - var Dashboard = require('webpack-dashboard'); - return new DashboardPlugin(new Dashboard().setData) - } - }, 'CSS_MODULES': { config: { dev: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss', diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 801b00a60d8..5245195d625 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -70,7 +70,6 @@ "style-loader": "0.13.1", "url-loader": "0.5.7", "webpack": "1.13.2", - "webpack-dashboard": "^0.1.8", "webpack-dev-server": "1.16.1", "whatwg-fetch": "1.0.0" }, diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index 0d256ad170d..c1760a8eaea 100644 --- a/packages/react-scripts/scripts/start.js +++ b/packages/react-scripts/scripts/start.js @@ -30,21 +30,12 @@ var openBrowser = require('react-dev-utils/openBrowser'); var prompt = require('react-dev-utils/prompt'); var config = require('../config/webpack.config.dev'); var paths = require('../config/paths'); -var getCustomConfig = require('../config/get-custom-config'); -var customConfig = getCustomConfig(false); // Warn and crash if required files are missing if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { process.exit(1); } -function log() { - if (customConfig.values.WEBPACK_DASHBOARD === true) { - return; - } - console.log.apply(null, arguments); -}; - // Tools like Cloud9 rely on this. var DEFAULT_PORT = process.env.PORT || 3000; var compiler; @@ -72,14 +63,14 @@ function setupCompiler(host, port, protocol) { // recompiling a bundle. WebpackDevServer takes care to pause serving the // bundle, so if you refresh, it'll wait instead of serving the old one. // "invalid" is short for "bundle invalidated", it doesn't imply any errors. - compiler.plugin('invalid', function () { + compiler.plugin('invalid', function() { clearConsole(); - log('Compiling...'); + console.log('Compiling...'); }); // "done" event fires when Webpack has finished recompiling the bundle. // Whether or not you have warnings or errors, you will get this event. - compiler.plugin('done', function (stats) { + compiler.plugin('done', function(stats) { clearConsole(); // We have switched off the default Webpack output in WebpackDevServer @@ -87,40 +78,40 @@ function setupCompiler(host, port, protocol) { // them in a readable focused way. var messages = formatWebpackMessages(stats.toJson({}, true)); if (!messages.errors.length && !messages.warnings.length) { - log(chalk.green('Compiled successfully!')); - log(); - log('The app is running at:'); - log(); - log(' ' + chalk.cyan(protocol + '://' + host + ':' + port + '/')); - log(); - log('Note that the development build is not optimized.'); - log('To create a production build, use ' + chalk.cyan('npm run build') + '.'); - log(); + console.log(chalk.green('Compiled successfully!')); + console.log(); + console.log('The app is running at:'); + console.log(); + console.log(' ' + chalk.cyan(protocol + '://' + host + ':' + port + '/')); + console.log(); + console.log('Note that the development build is not optimized.'); + console.log('To create a production build, use ' + chalk.cyan('npm run build') + '.'); + console.log(); } // If errors exist, only show errors. if (messages.errors.length) { - log(chalk.red('Failed to compile.')); - log(); + console.log(chalk.red('Failed to compile.')); + console.log(); messages.errors.forEach(message => { - log(message); - log(); + console.log(message); + console.log(); }); return; } // Show warnings if no errors were found. if (messages.warnings.length) { - log(chalk.yellow('Compiled with warnings.')); - log(); + console.log(chalk.yellow('Compiled with warnings.')); + console.log(); messages.warnings.forEach(message => { - log(message); - log(); + console.log(message); + console.log(); }); // Teach some ESLint tricks. - log('You may use special comments to disable some warnings.'); - log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.'); - log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.'); + console.log('You may use special comments to disable some warnings.'); + console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.'); + console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.'); } }); } @@ -128,17 +119,17 @@ function setupCompiler(host, port, protocol) { // We need to provide a custom onError function for httpProxyMiddleware. // It allows us to log custom error messages on the console. function onProxyError(proxy) { - return function (err, req, res) { + return function(err, req, res){ var host = req.headers && req.headers.host; - log( + console.log( chalk.red('Proxy error:') + ' Could not proxy request ' + chalk.cyan(req.url) + ' from ' + chalk.cyan(host) + ' to ' + chalk.cyan(proxy) + '.' ); - log( + console.log( 'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' + chalk.cyan(err.code) + ').' ); - log(); + console.log(); // And immediately send the proper error response to the client. // Otherwise, the request will eventually timeout with ERR_EMPTY_RESPONSE on the client side. @@ -172,9 +163,9 @@ function addMiddleware(devServer) { })); if (proxy) { if (typeof proxy !== 'string') { - log(chalk.red('When specified, "proxy" in package.json must be a string.')); - log(chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".')); - log(chalk.red('Either remove "proxy" from package.json, or make it a string.')); + console.log(chalk.red('When specified, "proxy" in package.json must be a string.')); + console.log(chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".')); + console.log(chalk.red('Either remove "proxy" from package.json, or make it a string.')); process.exit(1); } @@ -183,7 +174,7 @@ function addMiddleware(devServer) { // - /index.html (served as HTML5 history API fallback) // - /*.hot-update.json (WebpackDevServer uses this too for hot reloading) // - /sockjs-node/* (WebpackDevServer uses this for hot reloading) - // Tip: use https://www.debuggex.com/ to visualize the regex + // Tip: use https://jex.im/regulex/ to visualize the regex var mayProxy = /^(?!\/(index\.html$|.*\.hot-update\.json$|sockjs-node\/)).*$/; devServer.use(mayProxy, // Pass the scope regex both to Express and to the middleware for proxying @@ -250,12 +241,12 @@ function runDevServer(host, port, protocol) { // Launch WebpackDevServer. devServer.listen(port, (err, result) => { if (err) { - return log(err); + return console.log(err); } - log(chalk.cyan('Starting the development server...')); - log(); - + clearConsole(); + console.log(chalk.cyan('Starting the development server...')); + console.log(); if (process.env && process.env.OPEN_BROWSER !== 'false') { openBrowser(protocol + '://' + host + ':' + port + '/'); } @@ -272,11 +263,12 @@ function run(port) { // We attempt to use the default port but if it is busy, we offer the user to // run on a different port. `detect()` Promise resolves to the next free port. detect(DEFAULT_PORT).then(port => { - if (port === DEFAULT_PORT || customConfig.values.WEBPACK_DASHBOARD === true) { + if (port === DEFAULT_PORT) { run(port); return; } + clearConsole(); var question = chalk.yellow('Something is already running on port ' + DEFAULT_PORT + '.') + '\n\nWould you like to run the app on another port instead?'; diff --git a/packages/react-scripts/template/src/App.js b/packages/react-scripts/template/src/App.js index 3c0ff4c0fce..6bb6ea1964c 100644 --- a/packages/react-scripts/template/src/App.js +++ b/packages/react-scripts/template/src/App.js @@ -63,14 +63,6 @@ class App extends Component { - Webpack -
    -
  • - REACT_APP_WEBPACK_DASHBOARD=true - - Enable webpack-dashboard โš ๏ธ (experimental) -
  • -
- Others
  • From 006911e2a2194ccb5a7d2e203b2daebd7a506191 Mon Sep 17 00:00:00 2001 From: kitze Date: Tue, 27 Sep 2016 11:26:09 +0200 Subject: [PATCH 043/140] =?UTF-8?q?=E2=9E=95=20add=20App.css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/template/src/App.css | 24 +++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100755 packages/react-scripts/template/src/App.css diff --git a/packages/react-scripts/template/src/App.css b/packages/react-scripts/template/src/App.css new file mode 100755 index 00000000000..15adfdc710c --- /dev/null +++ b/packages/react-scripts/template/src/App.css @@ -0,0 +1,24 @@ +.App { + text-align: center; +} + +.App-logo { + animation: App-logo-spin infinite 20s linear; + height: 80px; +} + +.App-header { + background-color: #222; + height: 150px; + padding: 20px; + color: white; +} + +.App-intro { + font-size: large; +} + +@keyframes App-logo-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} From 8578a97dd1f1991f63eaf75c13f90a7fa412226f Mon Sep 17 00:00:00 2001 From: kitze Date: Tue, 27 Sep 2016 11:35:11 +0200 Subject: [PATCH 044/140] =?UTF-8?q?=F0=9F=8E=89=20v0.0.11?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index fcbac2bca2a..335a51cd9fd 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.0.10", + "version": "0.0.11", "description": "Allow custom config for create-react-app without ejecting", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", From 6dbffb0bbb9342fb8779dc821c4c666774f68e9a Mon Sep 17 00:00:00 2001 From: kitze Date: Tue, 27 Sep 2016 11:39:22 +0200 Subject: [PATCH 045/140] =?UTF-8?q?=F0=9F=9B=A0=20change=20github=20repo?= =?UTF-8?q?=20link?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 335a51cd9fd..ac59d612843 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -2,7 +2,7 @@ "name": "custom-react-scripts", "version": "0.0.11", "description": "Allow custom config for create-react-app without ejecting", - "repository": "facebookincubator/create-react-app", + "repository": "kitze/create-react-app", "license": "BSD-3-Clause", "engines": { "node": ">=4" From 5a4330bb13d4669613474a93a4fea4ecba59e871 Mon Sep 17 00:00:00 2001 From: kitze Date: Tue, 27 Sep 2016 12:37:36 +0200 Subject: [PATCH 046/140] =?UTF-8?q?=F0=9F=8E=890.0.12?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) mode change 100644 => 100755 packages/react-scripts/package.json diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json old mode 100644 new mode 100755 index ac59d612843..18c1f35155b --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.0.11", + "version": "0.0.12", "description": "Allow custom config for create-react-app without ejecting", "repository": "kitze/create-react-app", "license": "BSD-3-Clause", From 2c0d9856b94f2ac5641c8429d2ef371481434187 Mon Sep 17 00:00:00 2001 From: kitze Date: Tue, 27 Sep 2016 12:45:14 +0200 Subject: [PATCH 047/140] Publish - custom-react-scripts@0.0.13 --- packages/react-scripts/package.json | 55 +++++++++++++++++++++++++++-- 1 file changed, 53 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 18c1f35155b..3da57be622b 100755 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.0.12", + "version": "0.0.13", "description": "Allow custom config for create-react-app without ejecting", "repository": "kitze/create-react-app", "license": "BSD-3-Clause", @@ -80,5 +80,56 @@ }, "optionalDependencies": { "fsevents": "1.0.14" - } + }, + "bundledDependencies": [ + "autoprefixer", + "babel-core", + "babel-eslint", + "babel-jest", + "babel-loader", + "babel-preset-react-app", + "babel-plugin-transform-decorators-legacy", + "babel-preset-stage-0", + "case-sensitive-paths-webpack-plugin", + "chalk", + "connect-history-api-fallback", + "cross-spawn", + "css-loader", + "less", + "less-loader", + "node-sass", + "sass-loader", + "detect-port", + "dotenv", + "eslint", + "eslint-config-react-app", + "eslint-loader", + "eslint-plugin-flowtype", + "eslint-plugin-import", + "eslint-plugin-jsx-a11y", + "eslint-plugin-react", + "extract-text-webpack-plugin", + "file-loader", + "filesize", + "find-cache-dir", + "fs-extra", + "gzip-size", + "html-webpack-plugin", + "http-proxy-middleware", + "jest", + "json-loader", + "object-assign", + "path-exists", + "postcss-loader", + "promise", + "react-dev-utils", + "recursive-readdir", + "rimraf", + "strip-ansi", + "style-loader", + "url-loader", + "webpack", + "webpack-dev-server", + "whatwg-fetch" + ] } From fd7c7b46b70400fc88f33949df5aa29ea1bf9f43 Mon Sep 17 00:00:00 2001 From: kitze Date: Mon, 3 Oct 2016 09:08:30 +0200 Subject: [PATCH 048/140] =?UTF-8?q?=F0=9F=9B=A0=20adds=20getDev=20and=20ge?= =?UTF-8?q?tProd=20functions=20to=20customizers,=20fixes=20Sass=20in=20bui?= =?UTF-8?q?ld=20mode?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/config/customizers.js | 16 ++++++++++++---- .../react-scripts/config/get-custom-config.js | 3 ++- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/react-scripts/config/customizers.js b/packages/react-scripts/config/customizers.js index 62e5dd45700..af62a6bba4d 100644 --- a/packages/react-scripts/config/customizers.js +++ b/packages/react-scripts/config/customizers.js @@ -1,28 +1,36 @@ +var ExtractTextPlugin = require('extract-text-webpack-plugin'); + module.exports = { 'BABEL_STAGE_0': { toArray: 'presets', - get: function () { + getDev: function () { return require.resolve('babel-preset-stage-0') } }, 'DECORATORS': { toArray: 'babelPlugins', - get: function () { + getDev: function () { return require.resolve('babel-plugin-transform-decorators-legacy') } }, 'SASS': { toArray: 'loaders', - get: function () { + getDev: function () { return { test: /\.scss$/, loader: "style!css!postcss!sass" } + }, + getProd: function () { + return { + test: /\.scss$/, + loader: ExtractTextPlugin.extract('style', 'css!postcss!sass') + } } }, 'LESS': { toArray: 'loaders', - get: function () { + getDev: function () { return { test: /\.less$/, loader: "style!css!postcss!less" diff --git a/packages/react-scripts/config/get-custom-config.js b/packages/react-scripts/config/get-custom-config.js index de19cfa9667..d2d1784c895 100644 --- a/packages/react-scripts/config/get-custom-config.js +++ b/packages/react-scripts/config/get-custom-config.js @@ -14,7 +14,8 @@ function getCustomConfig(prod) { var envValue = process.env['REACT_APP_' + customizerKey]; if (env && envValue && envValue !== 'false') { if (customizer.toArray) { - finalConfig[customizer.toArray].push(customizer.get()); + var getCustomizer = (prod ? customizer.getProd : customizer.getDev) || customizer.getDev; + finalConfig[customizer.toArray].push(getCustomizer()); } finalConfig.values[customizerKey] = customizer.config || true; } From 2be8da47a0d673c758d1ebe8226b5b55889c692d Mon Sep 17 00:00:00 2001 From: kitze Date: Mon, 3 Oct 2016 10:48:48 +0200 Subject: [PATCH 049/140] Publish - custom-react-scripts@0.0.14 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 3da57be622b..c947953e675 100755 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.0.13", + "version": "0.0.14", "description": "Allow custom config for create-react-app without ejecting", "repository": "kitze/create-react-app", "license": "BSD-3-Clause", From 0acb5b9efd93bc6e3d6cd0d02578c7e7918421bb Mon Sep 17 00:00:00 2001 From: kitze Date: Mon, 3 Oct 2016 11:27:44 +0200 Subject: [PATCH 050/140] =?UTF-8?q?=E2=9E=95=20adds=20production=20version?= =?UTF-8?q?=20loader=20for=20LESS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/config/customizers.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/react-scripts/config/customizers.js b/packages/react-scripts/config/customizers.js index af62a6bba4d..ef8c689ccc9 100644 --- a/packages/react-scripts/config/customizers.js +++ b/packages/react-scripts/config/customizers.js @@ -35,6 +35,12 @@ module.exports = { test: /\.less$/, loader: "style!css!postcss!less" } + }, + getProd: function () { + return { + test: /\.less/, + loader: ExtractTextPlugin.extract('style', 'css!postcss!less') + } } }, 'CSS_MODULES': { From 170b4baa56bda7506b9c5c5367558b9d297c111a Mon Sep 17 00:00:00 2001 From: kitze Date: Mon, 3 Oct 2016 11:45:34 +0200 Subject: [PATCH 051/140] =?UTF-8?q?=F0=9F=93=96=20update=20readmes=20with?= =?UTF-8?q?=20link=20to=20medium=20article,=20closes=20#7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 ++ packages/react-scripts/README.md | 2 ++ packages/react-scripts/bin/CUSTOM_README.md | 2 ++ 3 files changed, 6 insertions(+) diff --git a/README.md b/README.md index 485a0f294c3..f45de568206 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,8 @@ ### โš ๏ธ Disclaimer: > This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. +The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). + ### ๐Ÿ’กFeatures: * Decorators * babel-preset-stage-0 diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index 485a0f294c3..f45de568206 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -3,6 +3,8 @@ ### โš ๏ธ Disclaimer: > This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. +The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). + ### ๐Ÿ’กFeatures: * Decorators * babel-preset-stage-0 diff --git a/packages/react-scripts/bin/CUSTOM_README.md b/packages/react-scripts/bin/CUSTOM_README.md index 485a0f294c3..f45de568206 100644 --- a/packages/react-scripts/bin/CUSTOM_README.md +++ b/packages/react-scripts/bin/CUSTOM_README.md @@ -3,6 +3,8 @@ ### โš ๏ธ Disclaimer: > This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. +The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). + ### ๐Ÿ’กFeatures: * Decorators * babel-preset-stage-0 From 0e3500c5c9b9b5079a23f08a929c1618b37693f4 Mon Sep 17 00:00:00 2001 From: Gregory Shehet Date: Tue, 4 Oct 2016 12:38:22 +0300 Subject: [PATCH 052/140] Add supporting of Stylus --- .env | 3 ++- README.md | 3 ++- packages/react-scripts/README.md | 4 +++- packages/react-scripts/bin/CUSTOM_README.md | 3 ++- packages/react-scripts/config/customizers.js | 17 +++++++++++++++- packages/react-scripts/package.json | 1 + packages/react-scripts/template/.env | 3 ++- packages/react-scripts/template/src/App.js | 5 +++++ packages/react-scripts/template/src/App.styl | 21 ++++++++++++++++++++ 9 files changed, 54 insertions(+), 6 deletions(-) create mode 100644 packages/react-scripts/template/src/App.styl diff --git a/.env b/.env index 6187d15ca32..591ac0c2712 100644 --- a/.env +++ b/.env @@ -2,4 +2,5 @@ OPEN_BROWSER=false REACT_APP_SASS=true REACT_APP_LESS=true -REACT_APP_CSS_MODULES=true \ No newline at end of file +REACT_APP_STYLUS=true +REACT_APP_CSS_MODULES=true diff --git a/README.md b/README.md index f45de568206..e2925a599be 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,7 @@ The generated project comes with SASS, LESS, and CSS modules support by default, #### Styling - ```REACT_APP_SASS=true``` - enable SASS support - ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_STYLUS=true``` - enable Stylus support - ```REACT_APP_CSS_MODULES``` - enable CSS modules #### Babel @@ -60,4 +61,4 @@ I just added support for extra environment variables that actually turn on certa ### Future plans -I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. \ No newline at end of file +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index f45de568206..f864b245305 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -10,6 +10,7 @@ The reason for this fork's existence is explained better in [this Medium article * babel-preset-stage-0 * LESS * SASS +* Stylus * CSS modules **the features are optional and can be turned on/off individually* @@ -26,6 +27,7 @@ The generated project comes with SASS, LESS, and CSS modules support by default, #### Styling - ```REACT_APP_SASS=true``` - enable SASS support - ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_STYLUS=true``` - enable Stylus support - ```REACT_APP_CSS_MODULES``` - enable CSS modules #### Babel @@ -60,4 +62,4 @@ I just added support for extra environment variables that actually turn on certa ### Future plans -I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. \ No newline at end of file +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. diff --git a/packages/react-scripts/bin/CUSTOM_README.md b/packages/react-scripts/bin/CUSTOM_README.md index f45de568206..e2925a599be 100644 --- a/packages/react-scripts/bin/CUSTOM_README.md +++ b/packages/react-scripts/bin/CUSTOM_README.md @@ -26,6 +26,7 @@ The generated project comes with SASS, LESS, and CSS modules support by default, #### Styling - ```REACT_APP_SASS=true``` - enable SASS support - ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_STYLUS=true``` - enable Stylus support - ```REACT_APP_CSS_MODULES``` - enable CSS modules #### Babel @@ -60,4 +61,4 @@ I just added support for extra environment variables that actually turn on certa ### Future plans -I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. \ No newline at end of file +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. diff --git a/packages/react-scripts/config/customizers.js b/packages/react-scripts/config/customizers.js index ef8c689ccc9..ea8f9645743 100644 --- a/packages/react-scripts/config/customizers.js +++ b/packages/react-scripts/config/customizers.js @@ -43,10 +43,25 @@ module.exports = { } } }, + 'STYLUS': { + toArray: 'loaders', + getDev: function () { + return { + test: /\.styl/, + loader: 'style!css!postcss!stylus' + } + }, + getProd: function () { + return { + test: /\.styl/, + loader: ExtractTextPlugin.extract('style', 'css!postcss!stylus') + } + } + }, 'CSS_MODULES': { config: { dev: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss', prod: 'style!css?modules&-autoprefixer&importLoaders=1!postcss' } } -} \ No newline at end of file +} diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 78572ff51b9..714d85f6d84 100755 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -68,6 +68,7 @@ "rimraf": "2.5.4", "strip-ansi": "3.0.1", "style-loader": "0.13.1", + "stylus-loader": "2.3.1", "url-loader": "0.5.7", "webpack": "1.13.2", "webpack-dev-server": "1.16.1", diff --git a/packages/react-scripts/template/.env b/packages/react-scripts/template/.env index 2d28941c44c..c843f48f93d 100644 --- a/packages/react-scripts/template/.env +++ b/packages/react-scripts/template/.env @@ -1,3 +1,4 @@ REACT_APP_SASS=true REACT_APP_LESS=true -REACT_APP_CSS_MODULES=true \ No newline at end of file +REACT_APP_STYLUS=true +REACT_APP_CSS_MODULES=true diff --git a/packages/react-scripts/template/src/App.js b/packages/react-scripts/template/src/App.js index 6bb6ea1964c..f10f59d1eb5 100644 --- a/packages/react-scripts/template/src/App.js +++ b/packages/react-scripts/template/src/App.js @@ -4,6 +4,7 @@ import logo from './logo.svg'; //styles import './App.less'; import './App.scss'; +import './App.styl'; import styles from './Modules.css'; class App extends Component { @@ -37,6 +38,10 @@ class App extends Component { REACT_APP_LESS=true - Enable LESS
  • +
  • + REACT_APP_STYLUS=true + - Enable Stylus +
  • REACT_APP_CSS_MODULES=true - Enable CSS modules diff --git a/packages/react-scripts/template/src/App.styl b/packages/react-scripts/template/src/App.styl new file mode 100644 index 00000000000..c8075330dad --- /dev/null +++ b/packages/react-scripts/template/src/App.styl @@ -0,0 +1,21 @@ +.App + text-align center + +.App-logo + animation App-logo-spin infinite 20s linear + height 80px + +.App-header + background-color #222 + height 150px + padding 20px + color white + +.App-intro + font-size large + +@keyframes App-logo-spin + from + transform rotate(0deg) + to + transform rotate(360deg) From c2a095af593946a9cc2bca614b6f6f1eb73108e0 Mon Sep 17 00:00:00 2001 From: stereobooster Date: Tue, 4 Oct 2016 19:11:54 +0300 Subject: [PATCH 053/140] Fix for #16 fix eject script --- packages/react-scripts/scripts/eject.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-scripts/scripts/eject.js b/packages/react-scripts/scripts/eject.js index 70761522a63..0d0f67d541d 100644 --- a/packages/react-scripts/scripts/eject.js +++ b/packages/react-scripts/scripts/eject.js @@ -31,7 +31,9 @@ prompt( var ownPath = path.join(__dirname, '..'); var appPath = path.join(ownPath, '..', '..'); var files = [ + path.join('config', 'customizers.js'), path.join('config', 'env.js'), + path.join('config', 'get-custom-config.js'), path.join('config', 'paths.js'), path.join('config', 'polyfills.js'), path.join('config', 'webpack.config.dev.js'), From 826362d0b423cdac6e2c2f8bda0491fee7db271b Mon Sep 17 00:00:00 2001 From: stereobooster Date: Tue, 4 Oct 2016 19:29:53 +0300 Subject: [PATCH 054/140] #14 Add .sass support --- packages/react-scripts/config/customizers.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/config/customizers.js b/packages/react-scripts/config/customizers.js index ef8c689ccc9..ad2a2355a09 100644 --- a/packages/react-scripts/config/customizers.js +++ b/packages/react-scripts/config/customizers.js @@ -17,13 +17,13 @@ module.exports = { toArray: 'loaders', getDev: function () { return { - test: /\.scss$/, + test: /(\.scss|\.sass)$/, loader: "style!css!postcss!sass" } }, getProd: function () { return { - test: /\.scss$/, + test: /(\.scss|\.sass)$/, loader: ExtractTextPlugin.extract('style', 'css!postcss!sass') } } @@ -49,4 +49,4 @@ module.exports = { prod: 'style!css?modules&-autoprefixer&importLoaders=1!postcss' } } -} \ No newline at end of file +} From ebb234026cefae93460e27e86eab07a9d37b8e60 Mon Sep 17 00:00:00 2001 From: kitze Date: Thu, 6 Oct 2016 10:14:54 +0200 Subject: [PATCH 055/140] =?UTF-8?q?=E2=9E=95=20add=20stylus=20to=20package?= =?UTF-8?q?.json,=20move=20some=20style=20from=20App.scss=20to=20App.styl?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/package.json | 13 +++++++------ packages/react-scripts/template/src/App.scss | 16 ---------------- packages/react-scripts/template/src/App.styl | 14 +------------- 3 files changed, 8 insertions(+), 35 deletions(-) mode change 100755 => 100644 packages/react-scripts/package.json diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json old mode 100755 new mode 100644 index 714d85f6d84..fde7120fd32 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -28,18 +28,14 @@ "babel-eslint": "6.1.2", "babel-jest": "15.0.0", "babel-loader": "6.2.5", - "babel-preset-react-app": "^0.2.1", "babel-plugin-transform-decorators-legacy": "^1.3.4", + "babel-preset-react-app": "^0.2.1", "babel-preset-stage-0": "^6.5.0", "case-sensitive-paths-webpack-plugin": "1.1.4", "chalk": "1.1.3", "connect-history-api-fallback": "1.3.0", "cross-spawn": "4.0.0", "css-loader": "0.24.0", - "less": "^2.7.1", - "less-loader": "^2.2.3", - "node-sass": "^3.10.0", - "sass-loader": "^4.0.2", "detect-port": "1.0.0", "dotenv": "2.0.0", "eslint": "3.5.0", @@ -59,6 +55,9 @@ "http-proxy-middleware": "0.17.1", "jest": "15.1.1", "json-loader": "0.5.4", + "less": "^2.7.1", + "less-loader": "^2.2.3", + "node-sass": "^3.10.0", "object-assign": "4.1.0", "path-exists": "2.1.0", "postcss-loader": "0.13.0", @@ -66,9 +65,11 @@ "react-dev-utils": "^0.2.1", "recursive-readdir": "2.1.0", "rimraf": "2.5.4", + "sass-loader": "^4.0.2", "strip-ansi": "3.0.1", "style-loader": "0.13.1", - "stylus-loader": "2.3.1", + "stylus": "^0.54.5", + "stylus-loader": "^2.3.1", "url-loader": "0.5.7", "webpack": "1.13.2", "webpack-dev-server": "1.16.1", diff --git a/packages/react-scripts/template/src/App.scss b/packages/react-scripts/template/src/App.scss index bac48c111c4..49111cc943d 100644 --- a/packages/react-scripts/template/src/App.scss +++ b/packages/react-scripts/template/src/App.scss @@ -1,19 +1,3 @@ -:global { - .App-logo { - animation: App-logo-spin infinite 20s linear; - height: 80px; - } - - @keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } - } -} - .App { &-header { background-color: #222; diff --git a/packages/react-scripts/template/src/App.styl b/packages/react-scripts/template/src/App.styl index c8075330dad..0c31ffb0d3a 100644 --- a/packages/react-scripts/template/src/App.styl +++ b/packages/react-scripts/template/src/App.styl @@ -1,21 +1,9 @@ -.App - text-align center - .App-logo animation App-logo-spin infinite 20s linear height 80px -.App-header - background-color #222 - height 150px - padding 20px - color white - -.App-intro - font-size large - @keyframes App-logo-spin from transform rotate(0deg) to - transform rotate(360deg) + transform rotate(360deg) \ No newline at end of file From 3856cbebd10c07c9d7db130dc9f1298588da4f5c Mon Sep 17 00:00:00 2001 From: kitze Date: Thu, 6 Oct 2016 11:54:44 +0200 Subject: [PATCH 056/140] =?UTF-8?q?=F0=9F=9B=A0=20mark=20babel-preset-reac?= =?UTF-8?q?t-app=20as=20private,=20so=20lerna=20shouldn't=20try=20to=20pub?= =?UTF-8?q?lish=20it?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/babel-preset-react-app/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index f0ead1f3b50..ca8278e1b54 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -1,6 +1,7 @@ { "name": "babel-preset-react-app", "version": "0.2.1", + "private": true, "description": "Babel preset used by Create React App", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", From 719e0f9ce1e9771fff3ac31544ca67121d153b0a Mon Sep 17 00:00:00 2001 From: kitze Date: Thu, 6 Oct 2016 12:08:53 +0200 Subject: [PATCH 057/140] =?UTF-8?q?=F0=9F=9B=A0=20mark=20all=20packages=20?= =?UTF-8?q?except=20react-scripts=20as=20private?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/create-react-app/package.json | 1 + packages/eslint-config-react-app/package.json | 1 + packages/react-dev-utils/package.json | 1 + 3 files changed, 3 insertions(+) diff --git a/packages/create-react-app/package.json b/packages/create-react-app/package.json index 5094b9c78dd..4e45b28a963 100644 --- a/packages/create-react-app/package.json +++ b/packages/create-react-app/package.json @@ -1,6 +1,7 @@ { "name": "create-react-app", "version": "0.5.0", + "private": true, "keywords": [ "react" ], diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index 90c6a21f269..ba000bffc7f 100644 --- a/packages/eslint-config-react-app/package.json +++ b/packages/eslint-config-react-app/package.json @@ -1,6 +1,7 @@ { "name": "eslint-config-react-app", "version": "0.2.1", + "private": true, "description": "ESLint configuration used by Create React App", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 8de715d1916..bf33bb37657 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -1,6 +1,7 @@ { "name": "react-dev-utils", "version": "0.2.1", + "private": true, "description": "Webpack utilities used by Create React App", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", From 3598ed5bd798757a99f3f203aaf9ce185308e3f0 Mon Sep 17 00:00:00 2001 From: kitze Date: Thu, 6 Oct 2016 12:23:26 +0200 Subject: [PATCH 058/140] Publish - custom-react-scripts@0.0.15 --- packages/react-scripts/package.json | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index fde7120fd32..4a2dd1febb0 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.0.14", + "version": "0.0.15", "description": "Allow custom config for create-react-app without ejecting", "repository": "kitze/create-react-app", "license": "BSD-3-Clause", @@ -89,18 +89,14 @@ "babel-eslint", "babel-jest", "babel-loader", - "babel-preset-react-app", "babel-plugin-transform-decorators-legacy", + "babel-preset-react-app", "babel-preset-stage-0", "case-sensitive-paths-webpack-plugin", "chalk", "connect-history-api-fallback", "cross-spawn", "css-loader", - "less", - "less-loader", - "node-sass", - "sass-loader", "detect-port", "dotenv", "eslint", @@ -120,6 +116,9 @@ "http-proxy-middleware", "jest", "json-loader", + "less", + "less-loader", + "node-sass", "object-assign", "path-exists", "postcss-loader", @@ -127,8 +126,11 @@ "react-dev-utils", "recursive-readdir", "rimraf", + "sass-loader", "strip-ansi", "style-loader", + "stylus", + "stylus-loader", "url-loader", "webpack", "webpack-dev-server", From fe9343d412047f9bc8939594f44c4311cfb5e01b Mon Sep 17 00:00:00 2001 From: kitze Date: Fri, 4 Nov 2016 13:46:38 +0100 Subject: [PATCH 059/140] =?UTF-8?q?=F0=9F=9B=A0=20revert=20readmes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 244 +++++++++++++++++++----- README_BACKUP.md | 222 --------------------- packages/react-scripts/README.md | 68 +------ packages/react-scripts/README_BACKUP.md | 7 - 4 files changed, 206 insertions(+), 335 deletions(-) delete mode 100644 README_BACKUP.md delete mode 100644 packages/react-scripts/README_BACKUP.md diff --git a/README.md b/README.md index e2925a599be..ceb886c10b5 100644 --- a/README.md +++ b/README.md @@ -1,64 +1,222 @@ -# โ˜ข custom-react-scripts โ˜ข +# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) -### โš ๏ธ Disclaimer: -> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. +Create React apps with no build configuration. -The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). +* [Getting Started](#getting-started) โ€“ How to create a new app. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. -### ๐Ÿ’กFeatures: -* Decorators -* babel-preset-stage-0 -* LESS -* SASS -* CSS modules +## tl;dr -**the features are optional and can be turned on/off individually* +```sh +npm install -g create-react-app -### โ”How to use it -```create-react-app my-app --scripts-version custom-react-scripts``` +create-react-app my-app +cd my-app/ +npm start -Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. +``` -The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. +Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
    +When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. -### ๐Ÿ“ Configuration options +npm start -#### Styling -- ```REACT_APP_SASS=true``` - enable SASS support -- ```REACT_APP_LESS=true``` - enable LESS support -- ```REACT_APP_STYLUS=true``` - enable Stylus support -- ```REACT_APP_CSS_MODULES``` - enable CSS modules +## Getting Started -#### Babel -- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset -- ```REACT_APP_DECORATORS=true``` - enable decorators support +### Installation -> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. -> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. +Install it once globally: -#### Others -- ```PORT=3015``` - change default port (supported in CRA by default) -- ```OPEN_BROWSER=false``` - don't open browser after running webpack server +```sh +npm install -g create-react-app +``` -### ๐Ÿค” Why? -The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: +**Youโ€™ll need to have Node >= 4 on your machine**. -* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. -* It's hard to maintain code for all of these custom configurations that people want to use. +**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. -But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. +**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. -So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. +### Creating an App -### How does it work? -The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. +To create a new app, run: -From the original readme: -> To define permanent environment vairables, create a file called .env in the root of your project: -> REACT_APP_SECRET_CODE=abcdef +```sh +create-react-app my-app +cd my-app +``` -I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. +It will create a directory called `my-app` inside the current folder.
    +Inside that directory, it will generate the initial project structure and install the transitive dependencies: -### Future plans +``` +my-app/ + README.md + node_modules/ + package.json + .gitignore + public/ + favicon.ico + index.html + src/ + App.css + App.js + App.test.js + index.css + index.js + logo.svg +``` -I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. +No configuration or complicated folder structures, just the files you need to build your app.
    +Once the installation is done, you can run some commands inside the project folder: + +### `npm start` + +Runs the app in development mode.
    +Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
    +You will see the build errors and lint warnings in the console. + +Build errors + +### `npm test` + +Runs the test watcher in an interactive mode. +By default, runs tests related to files changes since the last commit. + +[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) + +### `npm run build` + +Builds the app for production to the `build` folder.
    +It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
    +Your app is ready to be deployed! + +## User Guide + +The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: + +- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) +- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) +- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) +- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) +- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) +- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) +- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) +- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) +- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) +- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) +- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) +- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) +- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) +- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) +- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) +- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) +- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) +- [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) +- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) +- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) + +A copy of the user guide will be created as `README.md` in your project folder. + +## How to Update to New Versions? + +Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) for this and other information. + +## Philosophy + +* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. + +* **Zero Configuration:** There are no configuration files or command line options. Configuring both development and production builds is handled for you so you can focus on writing code. + +* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. + +## Why Use This? + +**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: + +* React, JSX, and ES6 support. +* Language extras beyond ES6 like the object spread operator. +* A dev server that lints for common errors. +* Import CSS and image files directly from JavaScript. +* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. +* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. + +**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. + +**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. + +### Converting to a Custom Setup + +**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. + +Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. + +**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** + +You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. + +## Limitations + +Some features are currently **not supported**: + +* Server rendering. +* Some experimental syntax extensions (e.g. decorators). +* CSS Modules. +* LESS or Sass. +* Hot reloading of components. + +Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. + +## Whatโ€™s Inside? + +The tools used by Create React App are subject to change. +Currently it is a thin layer on top of many amazing community projects, such as: + +* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) +* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) +* [Autoprefixer](https://github.com/postcss/autoprefixer) +* [ESLint](http://eslint.org/) +* [Jest](http://facebook.github.io/jest) +* and others. + +All of them are transitive dependencies of the provided npm package. + +## Contributing + +We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. + +## Acknowledgements + +We are grateful to the authors of existing related projects for their ideas and collaboration: + +* [@eanplatter](https://github.com/eanplatter) +* [@insin](https://github.com/insin) +* [@mxstbr](https://github.com/mxstbr) + +## Alternatives + +If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. +Some of the more popular and actively maintained ones are: + +* [insin/nwb](https://github.com/insin/nwb) +* [mozilla/neo](https://github.com/mozilla/neo) +* [NYTimes/kyt](https://github.com/NYTimes/kyt) + +Notable alternatives also include: + +* [enclave](https://github.com/eanplatter/enclave) +* [motion](https://github.com/motion/motion) +* [quik](https://github.com/satya164/quik) +* [sagui](https://github.com/saguijs/sagui) +* [roc](https://github.com/rocjs/roc) +* [aik](https://github.com/d4rkr00t/aik) +* [react-app](https://github.com/kriasoft/react-app) +* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) +* [tarec](https://github.com/geowarin/tarec) + +You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
    +React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file diff --git a/README_BACKUP.md b/README_BACKUP.md deleted file mode 100644 index ceb886c10b5..00000000000 --- a/README_BACKUP.md +++ /dev/null @@ -1,222 +0,0 @@ -# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) - -Create React apps with no build configuration. - -* [Getting Started](#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. - -## tl;dr - -```sh -npm install -g create-react-app - -create-react-app my-app -cd my-app/ -npm start - -``` - -Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
    -When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. - -npm start - -## Getting Started - -### Installation - -Install it once globally: - -```sh -npm install -g create-react-app -``` - -**Youโ€™ll need to have Node >= 4 on your machine**. - -**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. - -**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. - -### Creating an App - -To create a new app, run: - -```sh -create-react-app my-app -cd my-app -``` - -It will create a directory called `my-app` inside the current folder.
    -Inside that directory, it will generate the initial project structure and install the transitive dependencies: - -``` -my-app/ - README.md - node_modules/ - package.json - .gitignore - public/ - favicon.ico - index.html - src/ - App.css - App.js - App.test.js - index.css - index.js - logo.svg -``` - -No configuration or complicated folder structures, just the files you need to build your app.
    -Once the installation is done, you can run some commands inside the project folder: - -### `npm start` - -Runs the app in development mode.
    -Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.
    -You will see the build errors and lint warnings in the console. - -Build errors - -### `npm test` - -Runs the test watcher in an interactive mode. -By default, runs tests related to files changes since the last commit. - -[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) - -### `npm run build` - -Builds the app for production to the `build` folder.
    -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.
    -Your app is ready to be deployed! - -## User Guide - -The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: - -- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) -- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) -- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) -- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) -- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) -- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) -- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) -- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) -- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) -- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) -- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) -- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) -- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) -- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) -- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) -- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) -- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) -- [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) -- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) -- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) - -A copy of the user guide will be created as `README.md` in your project folder. - -## How to Update to New Versions? - -Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) for this and other information. - -## Philosophy - -* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. - -* **Zero Configuration:** There are no configuration files or command line options. Configuring both development and production builds is handled for you so you can focus on writing code. - -* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. - -## Why Use This? - -**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: - -* React, JSX, and ES6 support. -* Language extras beyond ES6 like the object spread operator. -* A dev server that lints for common errors. -* Import CSS and image files directly from JavaScript. -* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. -* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. - -**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. - -**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. - -### Converting to a Custom Setup - -**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. - -Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. - -**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** - -You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. - -## Limitations - -Some features are currently **not supported**: - -* Server rendering. -* Some experimental syntax extensions (e.g. decorators). -* CSS Modules. -* LESS or Sass. -* Hot reloading of components. - -Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. - -## Whatโ€™s Inside? - -The tools used by Create React App are subject to change. -Currently it is a thin layer on top of many amazing community projects, such as: - -* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) -* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) -* [Autoprefixer](https://github.com/postcss/autoprefixer) -* [ESLint](http://eslint.org/) -* [Jest](http://facebook.github.io/jest) -* and others. - -All of them are transitive dependencies of the provided npm package. - -## Contributing - -We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. - -## Acknowledgements - -We are grateful to the authors of existing related projects for their ideas and collaboration: - -* [@eanplatter](https://github.com/eanplatter) -* [@insin](https://github.com/insin) -* [@mxstbr](https://github.com/mxstbr) - -## Alternatives - -If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. -Some of the more popular and actively maintained ones are: - -* [insin/nwb](https://github.com/insin/nwb) -* [mozilla/neo](https://github.com/mozilla/neo) -* [NYTimes/kyt](https://github.com/NYTimes/kyt) - -Notable alternatives also include: - -* [enclave](https://github.com/eanplatter/enclave) -* [motion](https://github.com/motion/motion) -* [quik](https://github.com/satya164/quik) -* [sagui](https://github.com/saguijs/sagui) -* [roc](https://github.com/rocjs/roc) -* [aik](https://github.com/d4rkr00t/aik) -* [react-app](https://github.com/kriasoft/react-app) -* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) -* [tarec](https://github.com/geowarin/tarec) - -You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
    -React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index f864b245305..92364c5fead 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -1,65 +1,7 @@ -# โ˜ข custom-react-scripts โ˜ข +# react-scripts -### โš ๏ธ Disclaimer: -> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. +This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). +Please refer to its documentation: -The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). - -### ๐Ÿ’กFeatures: -* Decorators -* babel-preset-stage-0 -* LESS -* SASS -* Stylus -* CSS modules - -**the features are optional and can be turned on/off individually* - -### โ”How to use it -```create-react-app my-app --scripts-version custom-react-scripts``` - -Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. - -The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. - -### ๐Ÿ“ Configuration options - -#### Styling -- ```REACT_APP_SASS=true``` - enable SASS support -- ```REACT_APP_LESS=true``` - enable LESS support -- ```REACT_APP_STYLUS=true``` - enable Stylus support -- ```REACT_APP_CSS_MODULES``` - enable CSS modules - -#### Babel -- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset -- ```REACT_APP_DECORATORS=true``` - enable decorators support - -> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. -> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. - -#### Others -- ```PORT=3015``` - change default port (supported in CRA by default) -- ```OPEN_BROWSER=false``` - don't open browser after running webpack server - -### ๐Ÿค” Why? -The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: - -* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. -* It's hard to maintain code for all of these custom configurations that people want to use. - -But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. - -So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. - -### How does it work? -The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. - -From the original readme: -> To define permanent environment vairables, create a file called .env in the root of your project: -> REACT_APP_SECRET_CODE=abcdef - -I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. - -### Future plans - -I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. +* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file diff --git a/packages/react-scripts/README_BACKUP.md b/packages/react-scripts/README_BACKUP.md deleted file mode 100644 index 92364c5fead..00000000000 --- a/packages/react-scripts/README_BACKUP.md +++ /dev/null @@ -1,7 +0,0 @@ -# react-scripts - -This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). -Please refer to its documentation: - -* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file From 7078b96cacb720ca68bbb823ade65e5d9bdea775 Mon Sep 17 00:00:00 2001 From: kitze Date: Fri, 4 Nov 2016 19:17:59 +0100 Subject: [PATCH 060/140] =?UTF-8?q?=F0=9F=9B=A0=20fix=20ExtractTextPlugin?= =?UTF-8?q?=20arguments?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/config/webpack.config.prod.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index a316e75cd23..f5952dfbccc 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -154,7 +154,7 @@ module.exports = { // Webpack 1.x uses Uglify plugin as a signal to minify *all* the assets // including CSS. This is confusing and will be removed in Webpack 2: // https://github.com/webpack/webpack/issues/283 - loader: ExtractTextPlugin.extract(customConfig.values.CSS_MODULES ? 'style!css?modules&-autoprefixer&importLoaders=1!postcss' : 'style!css?importLoaders=1&-autoprefixer!postcss') + loader: ExtractTextPlugin.extract(...customConfig.values.CSS_MODULES ? ['style', 'css?modules&-autoprefixer&importLoaders=1', 'postcss'] : ['style', 'css?importLoaders=1&-autoprefixer', 'postcss']) // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, // JSON is not enabled by default in Webpack but both Node and Browserify @@ -194,7 +194,7 @@ module.exports = { }, // @remove-on-eject-end // We use PostCSS for autoprefixing only. - postcss: function() { + postcss: function () { return [ autoprefixer({ browsers: [ From 9ade3449de2578a118e0550dfc3b8ba2f50cbd4e Mon Sep 17 00:00:00 2001 From: kitze Date: Fri, 4 Nov 2016 19:18:10 +0100 Subject: [PATCH 061/140] =?UTF-8?q?=F0=9F=93=96=20update=20readmes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 246 +++++------------------- README_BACKUP.md | 224 +++++++++++++++++++++ packages/react-scripts/README.md | 67 ++++++- packages/react-scripts/README_BACKUP.md | 7 + 4 files changed, 336 insertions(+), 208 deletions(-) create mode 100644 README_BACKUP.md create mode 100644 packages/react-scripts/README_BACKUP.md diff --git a/README.md b/README.md index 1bf36aa46d9..e2925a599be 100644 --- a/README.md +++ b/README.md @@ -1,224 +1,64 @@ -# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) +# โ˜ข custom-react-scripts โ˜ข -Create React apps with no build configuration. +### โš ๏ธ Disclaimer: +> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. -* [Getting Started](#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. +The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). -## tl;dr +### ๐Ÿ’กFeatures: +* Decorators +* babel-preset-stage-0 +* LESS +* SASS +* CSS modules -```sh -npm install -g create-react-app +**the features are optional and can be turned on/off individually* -create-react-app my-app -cd my-app/ -npm start +### โ”How to use it +```create-react-app my-app --scripts-version custom-react-scripts``` -``` +Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. -Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
    -When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. +The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. -npm start +### ๐Ÿ“ Configuration options -## Getting Started +#### Styling +- ```REACT_APP_SASS=true``` - enable SASS support +- ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_STYLUS=true``` - enable Stylus support +- ```REACT_APP_CSS_MODULES``` - enable CSS modules -### Installation +#### Babel +- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset +- ```REACT_APP_DECORATORS=true``` - enable decorators support -Install it once globally: +> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. +> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. -```sh -npm install -g create-react-app -``` +#### Others +- ```PORT=3015``` - change default port (supported in CRA by default) +- ```OPEN_BROWSER=false``` - don't open browser after running webpack server -**Youโ€™ll need to have Node >= 4 on your machine**. +### ๐Ÿค” Why? +The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: -**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. +* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. +* It's hard to maintain code for all of these custom configurations that people want to use. -**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. +But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. -### Creating an App +So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. -To create a new app, run: +### How does it work? +The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. -```sh -create-react-app my-app -cd my-app -``` +From the original readme: +> To define permanent environment vairables, create a file called .env in the root of your project: +> REACT_APP_SECRET_CODE=abcdef -It will create a directory called `my-app` inside the current folder.
    -Inside that directory, it will generate the initial project structure and install the transitive dependencies: +I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. -``` -my-app/ - README.md - node_modules/ - package.json - .gitignore - public/ - favicon.ico - index.html - src/ - App.css - App.js - App.test.js - index.css - index.js - logo.svg -``` +### Future plans -No configuration or complicated folder structures, just the files you need to build your app.
    -Once the installation is done, you can run some commands inside the project folder: - -### `npm start` - -Runs the app in development mode.
    -Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.
    -You will see the build errors and lint warnings in the console. - -Build errors - -### `npm test` - -Runs the test watcher in an interactive mode. -By default, runs tests related to files changes since the last commit. - -[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) - -### `npm run build` - -Builds the app for production to the `build` folder.
    -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.
    -Your app is ready to be deployed! - -## User Guide - -The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: - -- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) -- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) -- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) -- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) -- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) -- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) -- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) -- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) -- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) -- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) -- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) -- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) -- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) -- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) -- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) -- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) -- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) -- [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) -- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) -- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) - -A copy of the user guide will be created as `README.md` in your project folder. - -## How to Update to New Versions? - -Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) for this and other information. - -## Philosophy - -* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. - -* **Zero Configuration:** There are no configuration files or command line options. Configuring both development and production builds is handled for you so you can focus on writing code. - -* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. - -## Why Use This? - -**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: - -* React, JSX, and ES6 support. -* Language extras beyond ES6 like the object spread operator. -* A dev server that lints for common errors. -* Import CSS and image files directly from JavaScript. -* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. -* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. - -**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. - -**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. - -### Converting to a Custom Setup - -**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. - -Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. - -**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** - -You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. - -## Limitations - -Some features are currently **not supported**: - -* Server rendering. -* Some experimental syntax extensions (e.g. decorators). -* CSS Modules. -* LESS or Sass. -* Hot reloading of components. - -Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. - -## Whatโ€™s Inside? - -The tools used by Create React App are subject to change. -Currently it is a thin layer on top of many amazing community projects, such as: - -* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) -* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) -* [Autoprefixer](https://github.com/postcss/autoprefixer) -* [ESLint](http://eslint.org/) -* [Jest](http://facebook.github.io/jest) -* and others. - -All of them are transitive dependencies of the provided npm package. - -## Contributing - -We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. - -## Acknowledgements - -We are grateful to the authors of existing related projects for their ideas and collaboration: - -* [@eanplatter](https://github.com/eanplatter) -* [@insin](https://github.com/insin) -* [@mxstbr](https://github.com/mxstbr) - -## Alternatives - -If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. -Some of the more popular and actively maintained ones are: - -* [insin/nwb](https://github.com/insin/nwb) -* [mozilla/neo](https://github.com/mozilla/neo) -* [NYTimes/kyt](https://github.com/NYTimes/kyt) -* [zeit/next.js](https://github.com/zeit/next.js) -* [gatsbyjs/gatsby](https://github.com/gatsbyjs/gatsby) - -Notable alternatives also include: - -* [enclave](https://github.com/eanplatter/enclave) -* [motion](https://github.com/motion/motion) -* [quik](https://github.com/satya164/quik) -* [sagui](https://github.com/saguijs/sagui) -* [roc](https://github.com/rocjs/roc) -* [aik](https://github.com/d4rkr00t/aik) -* [react-app](https://github.com/kriasoft/react-app) -* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) -* [tarec](https://github.com/geowarin/tarec) - -You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
    -React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. diff --git a/README_BACKUP.md b/README_BACKUP.md new file mode 100644 index 00000000000..1bf36aa46d9 --- /dev/null +++ b/README_BACKUP.md @@ -0,0 +1,224 @@ +# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) + +Create React apps with no build configuration. + +* [Getting Started](#getting-started) โ€“ How to create a new app. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. + +## tl;dr + +```sh +npm install -g create-react-app + +create-react-app my-app +cd my-app/ +npm start + +``` + +Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
    +When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. + +npm start + +## Getting Started + +### Installation + +Install it once globally: + +```sh +npm install -g create-react-app +``` + +**Youโ€™ll need to have Node >= 4 on your machine**. + +**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. + +**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. + +### Creating an App + +To create a new app, run: + +```sh +create-react-app my-app +cd my-app +``` + +It will create a directory called `my-app` inside the current folder.
    +Inside that directory, it will generate the initial project structure and install the transitive dependencies: + +``` +my-app/ + README.md + node_modules/ + package.json + .gitignore + public/ + favicon.ico + index.html + src/ + App.css + App.js + App.test.js + index.css + index.js + logo.svg +``` + +No configuration or complicated folder structures, just the files you need to build your app.
    +Once the installation is done, you can run some commands inside the project folder: + +### `npm start` + +Runs the app in development mode.
    +Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
    +You will see the build errors and lint warnings in the console. + +Build errors + +### `npm test` + +Runs the test watcher in an interactive mode. +By default, runs tests related to files changes since the last commit. + +[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) + +### `npm run build` + +Builds the app for production to the `build` folder.
    +It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
    +Your app is ready to be deployed! + +## User Guide + +The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: + +- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) +- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) +- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) +- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) +- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) +- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) +- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) +- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) +- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) +- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) +- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) +- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) +- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) +- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) +- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) +- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) +- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) +- [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) +- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) +- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) + +A copy of the user guide will be created as `README.md` in your project folder. + +## How to Update to New Versions? + +Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) for this and other information. + +## Philosophy + +* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. + +* **Zero Configuration:** There are no configuration files or command line options. Configuring both development and production builds is handled for you so you can focus on writing code. + +* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. + +## Why Use This? + +**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: + +* React, JSX, and ES6 support. +* Language extras beyond ES6 like the object spread operator. +* A dev server that lints for common errors. +* Import CSS and image files directly from JavaScript. +* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. +* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. + +**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. + +**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. + +### Converting to a Custom Setup + +**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. + +Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. + +**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** + +You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. + +## Limitations + +Some features are currently **not supported**: + +* Server rendering. +* Some experimental syntax extensions (e.g. decorators). +* CSS Modules. +* LESS or Sass. +* Hot reloading of components. + +Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. + +## Whatโ€™s Inside? + +The tools used by Create React App are subject to change. +Currently it is a thin layer on top of many amazing community projects, such as: + +* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) +* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) +* [Autoprefixer](https://github.com/postcss/autoprefixer) +* [ESLint](http://eslint.org/) +* [Jest](http://facebook.github.io/jest) +* and others. + +All of them are transitive dependencies of the provided npm package. + +## Contributing + +We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. + +## Acknowledgements + +We are grateful to the authors of existing related projects for their ideas and collaboration: + +* [@eanplatter](https://github.com/eanplatter) +* [@insin](https://github.com/insin) +* [@mxstbr](https://github.com/mxstbr) + +## Alternatives + +If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. +Some of the more popular and actively maintained ones are: + +* [insin/nwb](https://github.com/insin/nwb) +* [mozilla/neo](https://github.com/mozilla/neo) +* [NYTimes/kyt](https://github.com/NYTimes/kyt) +* [zeit/next.js](https://github.com/zeit/next.js) +* [gatsbyjs/gatsby](https://github.com/gatsbyjs/gatsby) + +Notable alternatives also include: + +* [enclave](https://github.com/eanplatter/enclave) +* [motion](https://github.com/motion/motion) +* [quik](https://github.com/satya164/quik) +* [sagui](https://github.com/saguijs/sagui) +* [roc](https://github.com/rocjs/roc) +* [aik](https://github.com/d4rkr00t/aik) +* [react-app](https://github.com/kriasoft/react-app) +* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) +* [tarec](https://github.com/geowarin/tarec) + +You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
    +React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index 92364c5fead..e2925a599be 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -1,7 +1,64 @@ -# react-scripts +# โ˜ข custom-react-scripts โ˜ข -This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). -Please refer to its documentation: +### โš ๏ธ Disclaimer: +> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. -* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file +The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). + +### ๐Ÿ’กFeatures: +* Decorators +* babel-preset-stage-0 +* LESS +* SASS +* CSS modules + +**the features are optional and can be turned on/off individually* + +### โ”How to use it +```create-react-app my-app --scripts-version custom-react-scripts``` + +Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. + +The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. + +### ๐Ÿ“ Configuration options + +#### Styling +- ```REACT_APP_SASS=true``` - enable SASS support +- ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_STYLUS=true``` - enable Stylus support +- ```REACT_APP_CSS_MODULES``` - enable CSS modules + +#### Babel +- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset +- ```REACT_APP_DECORATORS=true``` - enable decorators support + +> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. +> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. + +#### Others +- ```PORT=3015``` - change default port (supported in CRA by default) +- ```OPEN_BROWSER=false``` - don't open browser after running webpack server + +### ๐Ÿค” Why? +The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: + +* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. +* It's hard to maintain code for all of these custom configurations that people want to use. + +But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. + +So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. + +### How does it work? +The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. + +From the original readme: +> To define permanent environment vairables, create a file called .env in the root of your project: +> REACT_APP_SECRET_CODE=abcdef + +I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. + +### Future plans + +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. diff --git a/packages/react-scripts/README_BACKUP.md b/packages/react-scripts/README_BACKUP.md new file mode 100644 index 00000000000..92364c5fead --- /dev/null +++ b/packages/react-scripts/README_BACKUP.md @@ -0,0 +1,7 @@ +# react-scripts + +This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). +Please refer to its documentation: + +* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file From 2540f00dab4bf7394c51c75e8e62837dabb71164 Mon Sep 17 00:00:00 2001 From: kitze Date: Sat, 5 Nov 2016 10:38:49 +0100 Subject: [PATCH 062/140] Publish - custom-react-scripts@0.0.16 --- packages/react-scripts/package.json | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 6d8e38e3d63..445aa62aaf5 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.0.15", + "version": "0.0.16", "description": "Allow custom config for create-react-app without ejecting", "repository": "kitze/create-react-app", "license": "BSD-3-Clause", @@ -89,9 +89,9 @@ "babel-eslint", "babel-jest", "babel-loader", - "babel-plugin-transform-decorators-legacy", "babel-preset-react-app", "babel-preset-stage-0", + "babel-plugin-transform-decorators-legacy", "case-sensitive-paths-webpack-plugin", "chalk", "connect-history-api-fallback", @@ -109,7 +109,6 @@ "extract-text-webpack-plugin", "file-loader", "filesize", - "find-cache-dir", "fs-extra", "gzip-size", "html-webpack-plugin", From cdaa8923f181b7203b5f332fa5992c560884c57a Mon Sep 17 00:00:00 2001 From: kitze Date: Sat, 5 Nov 2016 11:17:33 +0100 Subject: [PATCH 063/140] =?UTF-8?q?=F0=9F=9B=A0=20remove=20bundling=20of?= =?UTF-8?q?=20deps?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/package.json | 56 +---------------------------- tasks/cra.sh | 4 --- tasks/release.sh | 3 -- 3 files changed, 1 insertion(+), 62 deletions(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 445aa62aaf5..70600c8bfe5 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -76,64 +76,10 @@ "whatwg-fetch": "1.0.0" }, "devDependencies": { - "bundle-deps": "1.0.0", "react": "^15.3.0", "react-dom": "^15.3.0" }, "optionalDependencies": { "fsevents": "1.0.14" - }, - "bundledDependencies": [ - "autoprefixer", - "babel-core", - "babel-eslint", - "babel-jest", - "babel-loader", - "babel-preset-react-app", - "babel-preset-stage-0", - "babel-plugin-transform-decorators-legacy", - "case-sensitive-paths-webpack-plugin", - "chalk", - "connect-history-api-fallback", - "cross-spawn", - "css-loader", - "detect-port", - "dotenv", - "eslint", - "eslint-config-react-app", - "eslint-loader", - "eslint-plugin-flowtype", - "eslint-plugin-import", - "eslint-plugin-jsx-a11y", - "eslint-plugin-react", - "extract-text-webpack-plugin", - "file-loader", - "filesize", - "fs-extra", - "gzip-size", - "html-webpack-plugin", - "http-proxy-middleware", - "jest", - "json-loader", - "less", - "less-loader", - "node-sass", - "object-assign", - "path-exists", - "postcss-loader", - "promise", - "react-dev-utils", - "recursive-readdir", - "rimraf", - "sass-loader", - "strip-ansi", - "style-loader", - "stylus", - "stylus-loader", - "url-loader", - "webpack", - "webpack-dev-server", - "webpack-manifest-plugin", - "whatwg-fetch" - ] + } } diff --git a/tasks/cra.sh b/tasks/cra.sh index 0271536d706..09796e68cbd 100755 --- a/tasks/cra.sh +++ b/tasks/cra.sh @@ -59,10 +59,6 @@ cd packages/react-scripts # Save package.json because we're going to touch it cp package.json package.json.orig -# Like bundle-deps, this script modifies packages/react-scripts/package.json, -# copying own dependencies (those in the `packages` dir) to bundledDependencies -node $root_path/tasks/bundle-own-deps.js - # Finally, pack react-scripts scripts_path=$root_path/packages/react-scripts/`npm pack` diff --git a/tasks/release.sh b/tasks/release.sh index 14b5cb77b18..dbe03bdfed7 100755 --- a/tasks/release.sh +++ b/tasks/release.sh @@ -53,9 +53,6 @@ npm dedupe # Since it's in optionalDependencies, it will attempt install outside bundle rm -rf node_modules/fsevents -# This modifies package.json to copy all dependencies to bundledDependencies -node ./node_modules/.bin/bundle-deps - cd $root_path # Go! ./node_modules/.bin/lerna publish --independent "$@" From 16cec1edf04f480457db6cc6e19576b8017e4420 Mon Sep 17 00:00:00 2001 From: kitze Date: Sat, 5 Nov 2016 11:22:09 +0100 Subject: [PATCH 064/140] Publish - custom-react-scripts@0.0.17 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 70600c8bfe5..5b40b6310f3 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.0.16", + "version": "0.0.17", "description": "Allow custom config for create-react-app without ejecting", "repository": "kitze/create-react-app", "license": "BSD-3-Clause", From ebc72af67e0bfbfea7ab0e8fd0e44f369a378e90 Mon Sep 17 00:00:00 2001 From: Mark Dalgleish Date: Mon, 7 Nov 2016 15:29:47 +1100 Subject: [PATCH 065/140] Fix CSS Modules configuration option --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e2925a599be..8cec2cc90c0 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ The generated project comes with SASS, LESS, and CSS modules support by default, - ```REACT_APP_SASS=true``` - enable SASS support - ```REACT_APP_LESS=true``` - enable LESS support - ```REACT_APP_STYLUS=true``` - enable Stylus support -- ```REACT_APP_CSS_MODULES``` - enable CSS modules +- ```REACT_APP_CSS_MODULES=true``` - enable CSS modules #### Babel - ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset From 5dae1b0dcb98d3867de0b39d7fe41c5b6be0c653 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Golder?= Date: Tue, 8 Nov 2016 20:02:33 +0100 Subject: [PATCH 066/140] fix jest moduleNameMapper to handle other styling libraries --- packages/react-scripts/utils/createJestConfig.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/utils/createJestConfig.js b/packages/react-scripts/utils/createJestConfig.js index df0238f2587..f2a3a5c9c81 100644 --- a/packages/react-scripts/utils/createJestConfig.js +++ b/packages/react-scripts/utils/createJestConfig.js @@ -22,7 +22,7 @@ module.exports = (resolve, rootDir, isEjecting) => { moduleFileExtensions: ['jsx', 'js', 'json'], moduleNameMapper: { '^.+\\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': resolve('config/jest/FileStub.js'), - '^.+\\.css$': resolve('config/jest/CSSStub.js') + '^.+\\.(css|less|scss|sass|styl)$': resolve('config/jest/CSSStub.js') }, setupFiles: [resolve('config/polyfills.js')], setupTestFrameworkScriptFile: setupTestsFile, From 749aec132490e93a3b2eb5105adf684958df3479 Mon Sep 17 00:00:00 2001 From: Huy Giang Date: Fri, 18 Nov 2016 10:59:16 +0700 Subject: [PATCH 067/140] Add camelCase to css-loader config --- packages/react-scripts/config/customizers.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/config/customizers.js b/packages/react-scripts/config/customizers.js index eeb97b52df1..36d532a68cc 100644 --- a/packages/react-scripts/config/customizers.js +++ b/packages/react-scripts/config/customizers.js @@ -60,8 +60,8 @@ module.exports = { }, 'CSS_MODULES': { config: { - dev: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss', - prod: 'style!css?modules&-autoprefixer&importLoaders=1!postcss' + dev: 'style!css?modules&camelCase&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss', + prod: 'style!css?modules&camelCase&-autoprefixer&importLoaders=1!postcss' } } } From b6295b895b04d629057e5f3f75785a339a5495b5 Mon Sep 17 00:00:00 2001 From: kitze Date: Mon, 21 Nov 2016 10:15:25 +0100 Subject: [PATCH 068/140] =?UTF-8?q?=F0=9F=93=96=20revert=20readme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 246 +++++++++++++++++++----- README_BACKUP.md | 224 --------------------- packages/react-scripts/README.md | 67 +------ packages/react-scripts/README_BACKUP.md | 7 - 4 files changed, 208 insertions(+), 336 deletions(-) delete mode 100644 README_BACKUP.md delete mode 100644 packages/react-scripts/README_BACKUP.md diff --git a/README.md b/README.md index e2925a599be..1bf36aa46d9 100644 --- a/README.md +++ b/README.md @@ -1,64 +1,224 @@ -# โ˜ข custom-react-scripts โ˜ข +# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) -### โš ๏ธ Disclaimer: -> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. +Create React apps with no build configuration. -The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). +* [Getting Started](#getting-started) โ€“ How to create a new app. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. -### ๐Ÿ’กFeatures: -* Decorators -* babel-preset-stage-0 -* LESS -* SASS -* CSS modules +## tl;dr -**the features are optional and can be turned on/off individually* +```sh +npm install -g create-react-app -### โ”How to use it -```create-react-app my-app --scripts-version custom-react-scripts``` +create-react-app my-app +cd my-app/ +npm start -Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. +``` -The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. +Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
    +When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. -### ๐Ÿ“ Configuration options +npm start -#### Styling -- ```REACT_APP_SASS=true``` - enable SASS support -- ```REACT_APP_LESS=true``` - enable LESS support -- ```REACT_APP_STYLUS=true``` - enable Stylus support -- ```REACT_APP_CSS_MODULES``` - enable CSS modules +## Getting Started -#### Babel -- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset -- ```REACT_APP_DECORATORS=true``` - enable decorators support +### Installation -> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. -> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. +Install it once globally: -#### Others -- ```PORT=3015``` - change default port (supported in CRA by default) -- ```OPEN_BROWSER=false``` - don't open browser after running webpack server +```sh +npm install -g create-react-app +``` -### ๐Ÿค” Why? -The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: +**Youโ€™ll need to have Node >= 4 on your machine**. -* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. -* It's hard to maintain code for all of these custom configurations that people want to use. +**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. -But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. +**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. -So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. +### Creating an App -### How does it work? -The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. +To create a new app, run: -From the original readme: -> To define permanent environment vairables, create a file called .env in the root of your project: -> REACT_APP_SECRET_CODE=abcdef +```sh +create-react-app my-app +cd my-app +``` -I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. +It will create a directory called `my-app` inside the current folder.
    +Inside that directory, it will generate the initial project structure and install the transitive dependencies: -### Future plans +``` +my-app/ + README.md + node_modules/ + package.json + .gitignore + public/ + favicon.ico + index.html + src/ + App.css + App.js + App.test.js + index.css + index.js + logo.svg +``` -I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. +No configuration or complicated folder structures, just the files you need to build your app.
    +Once the installation is done, you can run some commands inside the project folder: + +### `npm start` + +Runs the app in development mode.
    +Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
    +You will see the build errors and lint warnings in the console. + +Build errors + +### `npm test` + +Runs the test watcher in an interactive mode. +By default, runs tests related to files changes since the last commit. + +[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) + +### `npm run build` + +Builds the app for production to the `build` folder.
    +It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
    +Your app is ready to be deployed! + +## User Guide + +The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: + +- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) +- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) +- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) +- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) +- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) +- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) +- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) +- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) +- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) +- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) +- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) +- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) +- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) +- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) +- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) +- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) +- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) +- [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) +- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) +- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) + +A copy of the user guide will be created as `README.md` in your project folder. + +## How to Update to New Versions? + +Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) for this and other information. + +## Philosophy + +* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. + +* **Zero Configuration:** There are no configuration files or command line options. Configuring both development and production builds is handled for you so you can focus on writing code. + +* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. + +## Why Use This? + +**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: + +* React, JSX, and ES6 support. +* Language extras beyond ES6 like the object spread operator. +* A dev server that lints for common errors. +* Import CSS and image files directly from JavaScript. +* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. +* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. + +**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. + +**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. + +### Converting to a Custom Setup + +**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. + +Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. + +**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** + +You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. + +## Limitations + +Some features are currently **not supported**: + +* Server rendering. +* Some experimental syntax extensions (e.g. decorators). +* CSS Modules. +* LESS or Sass. +* Hot reloading of components. + +Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. + +## Whatโ€™s Inside? + +The tools used by Create React App are subject to change. +Currently it is a thin layer on top of many amazing community projects, such as: + +* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) +* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) +* [Autoprefixer](https://github.com/postcss/autoprefixer) +* [ESLint](http://eslint.org/) +* [Jest](http://facebook.github.io/jest) +* and others. + +All of them are transitive dependencies of the provided npm package. + +## Contributing + +We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. + +## Acknowledgements + +We are grateful to the authors of existing related projects for their ideas and collaboration: + +* [@eanplatter](https://github.com/eanplatter) +* [@insin](https://github.com/insin) +* [@mxstbr](https://github.com/mxstbr) + +## Alternatives + +If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. +Some of the more popular and actively maintained ones are: + +* [insin/nwb](https://github.com/insin/nwb) +* [mozilla/neo](https://github.com/mozilla/neo) +* [NYTimes/kyt](https://github.com/NYTimes/kyt) +* [zeit/next.js](https://github.com/zeit/next.js) +* [gatsbyjs/gatsby](https://github.com/gatsbyjs/gatsby) + +Notable alternatives also include: + +* [enclave](https://github.com/eanplatter/enclave) +* [motion](https://github.com/motion/motion) +* [quik](https://github.com/satya164/quik) +* [sagui](https://github.com/saguijs/sagui) +* [roc](https://github.com/rocjs/roc) +* [aik](https://github.com/d4rkr00t/aik) +* [react-app](https://github.com/kriasoft/react-app) +* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) +* [tarec](https://github.com/geowarin/tarec) + +You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
    +React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file diff --git a/README_BACKUP.md b/README_BACKUP.md deleted file mode 100644 index 1bf36aa46d9..00000000000 --- a/README_BACKUP.md +++ /dev/null @@ -1,224 +0,0 @@ -# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) - -Create React apps with no build configuration. - -* [Getting Started](#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. - -## tl;dr - -```sh -npm install -g create-react-app - -create-react-app my-app -cd my-app/ -npm start - -``` - -Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
    -When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. - -npm start - -## Getting Started - -### Installation - -Install it once globally: - -```sh -npm install -g create-react-app -``` - -**Youโ€™ll need to have Node >= 4 on your machine**. - -**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. - -**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. - -### Creating an App - -To create a new app, run: - -```sh -create-react-app my-app -cd my-app -``` - -It will create a directory called `my-app` inside the current folder.
    -Inside that directory, it will generate the initial project structure and install the transitive dependencies: - -``` -my-app/ - README.md - node_modules/ - package.json - .gitignore - public/ - favicon.ico - index.html - src/ - App.css - App.js - App.test.js - index.css - index.js - logo.svg -``` - -No configuration or complicated folder structures, just the files you need to build your app.
    -Once the installation is done, you can run some commands inside the project folder: - -### `npm start` - -Runs the app in development mode.
    -Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.
    -You will see the build errors and lint warnings in the console. - -Build errors - -### `npm test` - -Runs the test watcher in an interactive mode. -By default, runs tests related to files changes since the last commit. - -[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) - -### `npm run build` - -Builds the app for production to the `build` folder.
    -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.
    -Your app is ready to be deployed! - -## User Guide - -The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: - -- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) -- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) -- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) -- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) -- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) -- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) -- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) -- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) -- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) -- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) -- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) -- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) -- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) -- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) -- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) -- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) -- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) -- [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) -- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) -- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) - -A copy of the user guide will be created as `README.md` in your project folder. - -## How to Update to New Versions? - -Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) for this and other information. - -## Philosophy - -* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. - -* **Zero Configuration:** There are no configuration files or command line options. Configuring both development and production builds is handled for you so you can focus on writing code. - -* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. - -## Why Use This? - -**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: - -* React, JSX, and ES6 support. -* Language extras beyond ES6 like the object spread operator. -* A dev server that lints for common errors. -* Import CSS and image files directly from JavaScript. -* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. -* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. - -**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. - -**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. - -### Converting to a Custom Setup - -**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. - -Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. - -**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** - -You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. - -## Limitations - -Some features are currently **not supported**: - -* Server rendering. -* Some experimental syntax extensions (e.g. decorators). -* CSS Modules. -* LESS or Sass. -* Hot reloading of components. - -Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. - -## Whatโ€™s Inside? - -The tools used by Create React App are subject to change. -Currently it is a thin layer on top of many amazing community projects, such as: - -* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) -* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) -* [Autoprefixer](https://github.com/postcss/autoprefixer) -* [ESLint](http://eslint.org/) -* [Jest](http://facebook.github.io/jest) -* and others. - -All of them are transitive dependencies of the provided npm package. - -## Contributing - -We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. - -## Acknowledgements - -We are grateful to the authors of existing related projects for their ideas and collaboration: - -* [@eanplatter](https://github.com/eanplatter) -* [@insin](https://github.com/insin) -* [@mxstbr](https://github.com/mxstbr) - -## Alternatives - -If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. -Some of the more popular and actively maintained ones are: - -* [insin/nwb](https://github.com/insin/nwb) -* [mozilla/neo](https://github.com/mozilla/neo) -* [NYTimes/kyt](https://github.com/NYTimes/kyt) -* [zeit/next.js](https://github.com/zeit/next.js) -* [gatsbyjs/gatsby](https://github.com/gatsbyjs/gatsby) - -Notable alternatives also include: - -* [enclave](https://github.com/eanplatter/enclave) -* [motion](https://github.com/motion/motion) -* [quik](https://github.com/satya164/quik) -* [sagui](https://github.com/saguijs/sagui) -* [roc](https://github.com/rocjs/roc) -* [aik](https://github.com/d4rkr00t/aik) -* [react-app](https://github.com/kriasoft/react-app) -* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) -* [tarec](https://github.com/geowarin/tarec) - -You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
    -React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index e2925a599be..92364c5fead 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -1,64 +1,7 @@ -# โ˜ข custom-react-scripts โ˜ข +# react-scripts -### โš ๏ธ Disclaimer: -> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. +This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). +Please refer to its documentation: -The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). - -### ๐Ÿ’กFeatures: -* Decorators -* babel-preset-stage-0 -* LESS -* SASS -* CSS modules - -**the features are optional and can be turned on/off individually* - -### โ”How to use it -```create-react-app my-app --scripts-version custom-react-scripts``` - -Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. - -The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. - -### ๐Ÿ“ Configuration options - -#### Styling -- ```REACT_APP_SASS=true``` - enable SASS support -- ```REACT_APP_LESS=true``` - enable LESS support -- ```REACT_APP_STYLUS=true``` - enable Stylus support -- ```REACT_APP_CSS_MODULES``` - enable CSS modules - -#### Babel -- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset -- ```REACT_APP_DECORATORS=true``` - enable decorators support - -> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. -> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. - -#### Others -- ```PORT=3015``` - change default port (supported in CRA by default) -- ```OPEN_BROWSER=false``` - don't open browser after running webpack server - -### ๐Ÿค” Why? -The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: - -* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. -* It's hard to maintain code for all of these custom configurations that people want to use. - -But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. - -So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. - -### How does it work? -The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. - -From the original readme: -> To define permanent environment vairables, create a file called .env in the root of your project: -> REACT_APP_SECRET_CODE=abcdef - -I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. - -### Future plans - -I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. +* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file diff --git a/packages/react-scripts/README_BACKUP.md b/packages/react-scripts/README_BACKUP.md deleted file mode 100644 index 92364c5fead..00000000000 --- a/packages/react-scripts/README_BACKUP.md +++ /dev/null @@ -1,7 +0,0 @@ -# react-scripts - -This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). -Please refer to its documentation: - -* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file From f45ee043a7344c55a96deb3552c08498ba81dc2b Mon Sep 17 00:00:00 2001 From: kitze Date: Mon, 21 Nov 2016 10:37:44 +0100 Subject: [PATCH 069/140] =?UTF-8?q?=F0=9F=9B=A0=20get=20extra=20regex=20fo?= =?UTF-8?q?r=20files=20directly=20from=20customizers?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/config/customizers.js | 3 +++ packages/react-scripts/config/get-custom-config.js | 6 +++++- packages/react-scripts/config/webpack.config.dev.js | 3 ++- packages/react-scripts/config/webpack.config.prod.js | 3 ++- 4 files changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/config/customizers.js b/packages/react-scripts/config/customizers.js index eeb97b52df1..6698dfbede6 100644 --- a/packages/react-scripts/config/customizers.js +++ b/packages/react-scripts/config/customizers.js @@ -15,6 +15,7 @@ module.exports = { }, 'SASS': { toArray: 'loaders', + fileRegex: /\.(scss|sass)/, getDev: function () { return { test: /(\.scss|\.sass)$/, @@ -30,6 +31,7 @@ module.exports = { }, 'LESS': { toArray: 'loaders', + fileRegex: /\.less$/, getDev: function () { return { test: /\.less$/, @@ -45,6 +47,7 @@ module.exports = { }, 'STYLUS': { toArray: 'loaders', + fileRegex: /\.styl$/, getDev: function () { return { test: /\.styl/, diff --git a/packages/react-scripts/config/get-custom-config.js b/packages/react-scripts/config/get-custom-config.js index d2d1784c895..34cac14e696 100644 --- a/packages/react-scripts/config/get-custom-config.js +++ b/packages/react-scripts/config/get-custom-config.js @@ -17,6 +17,9 @@ function getCustomConfig(prod) { var getCustomizer = (prod ? customizer.getProd : customizer.getDev) || customizer.getDev; finalConfig[customizer.toArray].push(getCustomizer()); } + if (customizer.fileRegex) { + finalConfig.excludedFilesRegex.push(customizer.fileRegex); + } finalConfig.values[customizerKey] = customizer.config || true; } return finalConfig; @@ -25,7 +28,8 @@ function getCustomConfig(prod) { babelPlugins: [], plugins: [], loaders: [], - values: {} + values: {}, + excludedFilesRegex: [] }); return result; diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index cff038b2cf7..e4a34519741 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -129,8 +129,9 @@ module.exports = { exclude: [ /\.(js|jsx)$/, /\.css$/, + /\.html$/, /\.json$/ - ], + ].concat(customConfig.excludedFilesRegex), loader: 'url', query: { limit: 10000, diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index ff0519097e7..ad7a1b7d236 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -137,8 +137,9 @@ module.exports = { exclude: [ /\.(js|jsx)$/, /\.css$/, + /\.html$/, /\.json$/ - ], + ].concat(customConfig.excludedFilesRegex), loader: 'url', query: { limit: 10000, From fc4640c8bb1bde3d04529460f14625a3485b3871 Mon Sep 17 00:00:00 2001 From: kitze Date: Mon, 21 Nov 2016 10:40:21 +0100 Subject: [PATCH 070/140] =?UTF-8?q?=F0=9F=93=96=20add=20custom=20readmes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 248 ++++-------------------- README_BACKUP.md | 226 +++++++++++++++++++++ packages/react-scripts/README_BACKUP.md | 7 + 3 files changed, 276 insertions(+), 205 deletions(-) create mode 100644 README_BACKUP.md create mode 100644 packages/react-scripts/README_BACKUP.md diff --git a/README.md b/README.md index 0ca7b6df1ca..e2925a599be 100644 --- a/README.md +++ b/README.md @@ -1,226 +1,64 @@ -# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) +# โ˜ข custom-react-scripts โ˜ข -Create React apps with no build configuration. +### โš ๏ธ Disclaimer: +> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. -* [Getting Started](#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. +The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). -## tl;dr +### ๐Ÿ’กFeatures: +* Decorators +* babel-preset-stage-0 +* LESS +* SASS +* CSS modules -```sh -npm install -g create-react-app +**the features are optional and can be turned on/off individually* -create-react-app my-app -cd my-app/ -npm start +### โ”How to use it +```create-react-app my-app --scripts-version custom-react-scripts``` -``` +Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. -Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
    -When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. +The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. -npm start +### ๐Ÿ“ Configuration options -## Getting Started +#### Styling +- ```REACT_APP_SASS=true``` - enable SASS support +- ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_STYLUS=true``` - enable Stylus support +- ```REACT_APP_CSS_MODULES``` - enable CSS modules -### Installation +#### Babel +- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset +- ```REACT_APP_DECORATORS=true``` - enable decorators support -Install it once globally: +> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. +> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. -```sh -npm install -g create-react-app -``` +#### Others +- ```PORT=3015``` - change default port (supported in CRA by default) +- ```OPEN_BROWSER=false``` - don't open browser after running webpack server -**Youโ€™ll need to have Node >= 4 on your machine**. +### ๐Ÿค” Why? +The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: -**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. +* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. +* It's hard to maintain code for all of these custom configurations that people want to use. -**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. +But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. -### Creating an App +So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. -To create a new app, run: +### How does it work? +The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. -```sh -create-react-app my-app -cd my-app -``` +From the original readme: +> To define permanent environment vairables, create a file called .env in the root of your project: +> REACT_APP_SECRET_CODE=abcdef -It will create a directory called `my-app` inside the current folder.
    -Inside that directory, it will generate the initial project structure and install the transitive dependencies: +I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. -``` -my-app/ - README.md - node_modules/ - package.json - .gitignore - public/ - favicon.ico - index.html - src/ - App.css - App.js - App.test.js - index.css - index.js - logo.svg -``` +### Future plans -No configuration or complicated folder structures, just the files you need to build your app.
    -Once the installation is done, you can run some commands inside the project folder: - -### `npm start` - -Runs the app in development mode.
    -Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.
    -You will see the build errors and lint warnings in the console. - -Build errors - -### `npm test` - -Runs the test watcher in an interactive mode. -By default, runs tests related to files changes since the last commit. - -[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) - -### `npm run build` - -Builds the app for production to the `build` folder.
    -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.
    -Your app is ready to be deployed! - -## User Guide - -The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: - -- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) -- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) -- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) -- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) -- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) -- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) -- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) -- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) -- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) -- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) -- [Using Global Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-global-variables) -- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) -- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) -- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) -- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) -- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) -- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) -- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) -- [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) -- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) -- [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation) -- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) - -A copy of the user guide will be created as `README.md` in your project folder. - -## How to Update to New Versions? - -Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) for this and other information. - -## Philosophy - -* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. - -* **Convention over Configuration:** You don't need to configure anything by default. Reasonably good configuration of both development and production builds is handled for you so you can focus on writing code. - -* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. - -## Why Use This? - -**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: - -* React, JSX, and ES6 support. -* Language extras beyond ES6 like the object spread operator. -* A dev server that lints for common errors. -* Import CSS and image files directly from JavaScript. -* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. -* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. - -**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. - -**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. - -### Converting to a Custom Setup - -**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. - -Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. - -**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** - -You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. - -## Limitations - -Some features are currently **not supported**: - -* Server rendering. -* Some experimental syntax extensions (e.g. decorators). -* CSS Modules. -* LESS or Sass. -* Hot reloading of components. - -Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. - -## Whatโ€™s Inside? - -The tools used by Create React App are subject to change. -Currently it is a thin layer on top of many amazing community projects, such as: - -* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) -* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) -* [Autoprefixer](https://github.com/postcss/autoprefixer) -* [ESLint](http://eslint.org/) -* [Jest](http://facebook.github.io/jest) -* and others. - -All of them are transitive dependencies of the provided npm package. - -## Contributing - -We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. - -## Acknowledgements - -We are grateful to the authors of existing related projects for their ideas and collaboration: - -* [@eanplatter](https://github.com/eanplatter) -* [@insin](https://github.com/insin) -* [@mxstbr](https://github.com/mxstbr) - -## Alternatives - -If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. -Some of the more popular and actively maintained ones are: - -* [insin/nwb](https://github.com/insin/nwb) -* [mozilla/neo](https://github.com/mozilla/neo) -* [NYTimes/kyt](https://github.com/NYTimes/kyt) -* [zeit/next.js](https://github.com/zeit/next.js) -* [gatsbyjs/gatsby](https://github.com/gatsbyjs/gatsby) - -Notable alternatives also include: - -* [enclave](https://github.com/eanplatter/enclave) -* [motion](https://github.com/motion/motion) -* [quik](https://github.com/satya164/quik) -* [sagui](https://github.com/saguijs/sagui) -* [roc](https://github.com/rocjs/roc) -* [aik](https://github.com/d4rkr00t/aik) -* [react-app](https://github.com/kriasoft/react-app) -* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) -* [tarec](https://github.com/geowarin/tarec) - -You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
    -React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. diff --git a/README_BACKUP.md b/README_BACKUP.md new file mode 100644 index 00000000000..0ca7b6df1ca --- /dev/null +++ b/README_BACKUP.md @@ -0,0 +1,226 @@ +# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) + +Create React apps with no build configuration. + +* [Getting Started](#getting-started) โ€“ How to create a new app. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. + +## tl;dr + +```sh +npm install -g create-react-app + +create-react-app my-app +cd my-app/ +npm start + +``` + +Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
    +When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. + +npm start + +## Getting Started + +### Installation + +Install it once globally: + +```sh +npm install -g create-react-app +``` + +**Youโ€™ll need to have Node >= 4 on your machine**. + +**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. + +**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. + +### Creating an App + +To create a new app, run: + +```sh +create-react-app my-app +cd my-app +``` + +It will create a directory called `my-app` inside the current folder.
    +Inside that directory, it will generate the initial project structure and install the transitive dependencies: + +``` +my-app/ + README.md + node_modules/ + package.json + .gitignore + public/ + favicon.ico + index.html + src/ + App.css + App.js + App.test.js + index.css + index.js + logo.svg +``` + +No configuration or complicated folder structures, just the files you need to build your app.
    +Once the installation is done, you can run some commands inside the project folder: + +### `npm start` + +Runs the app in development mode.
    +Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
    +You will see the build errors and lint warnings in the console. + +Build errors + +### `npm test` + +Runs the test watcher in an interactive mode. +By default, runs tests related to files changes since the last commit. + +[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) + +### `npm run build` + +Builds the app for production to the `build` folder.
    +It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
    +Your app is ready to be deployed! + +## User Guide + +The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: + +- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) +- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) +- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) +- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) +- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) +- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) +- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) +- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) +- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) +- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) +- [Using Global Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-global-variables) +- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) +- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) +- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) +- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) +- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) +- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) +- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) +- [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) +- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) +- [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation) +- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) + +A copy of the user guide will be created as `README.md` in your project folder. + +## How to Update to New Versions? + +Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) for this and other information. + +## Philosophy + +* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. + +* **Convention over Configuration:** You don't need to configure anything by default. Reasonably good configuration of both development and production builds is handled for you so you can focus on writing code. + +* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. + +## Why Use This? + +**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: + +* React, JSX, and ES6 support. +* Language extras beyond ES6 like the object spread operator. +* A dev server that lints for common errors. +* Import CSS and image files directly from JavaScript. +* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. +* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. + +**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. + +**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. + +### Converting to a Custom Setup + +**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. + +Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. + +**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** + +You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. + +## Limitations + +Some features are currently **not supported**: + +* Server rendering. +* Some experimental syntax extensions (e.g. decorators). +* CSS Modules. +* LESS or Sass. +* Hot reloading of components. + +Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. + +## Whatโ€™s Inside? + +The tools used by Create React App are subject to change. +Currently it is a thin layer on top of many amazing community projects, such as: + +* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) +* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) +* [Autoprefixer](https://github.com/postcss/autoprefixer) +* [ESLint](http://eslint.org/) +* [Jest](http://facebook.github.io/jest) +* and others. + +All of them are transitive dependencies of the provided npm package. + +## Contributing + +We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. + +## Acknowledgements + +We are grateful to the authors of existing related projects for their ideas and collaboration: + +* [@eanplatter](https://github.com/eanplatter) +* [@insin](https://github.com/insin) +* [@mxstbr](https://github.com/mxstbr) + +## Alternatives + +If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. +Some of the more popular and actively maintained ones are: + +* [insin/nwb](https://github.com/insin/nwb) +* [mozilla/neo](https://github.com/mozilla/neo) +* [NYTimes/kyt](https://github.com/NYTimes/kyt) +* [zeit/next.js](https://github.com/zeit/next.js) +* [gatsbyjs/gatsby](https://github.com/gatsbyjs/gatsby) + +Notable alternatives also include: + +* [enclave](https://github.com/eanplatter/enclave) +* [motion](https://github.com/motion/motion) +* [quik](https://github.com/satya164/quik) +* [sagui](https://github.com/saguijs/sagui) +* [roc](https://github.com/rocjs/roc) +* [aik](https://github.com/d4rkr00t/aik) +* [react-app](https://github.com/kriasoft/react-app) +* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) +* [tarec](https://github.com/geowarin/tarec) + +You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
    +React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file diff --git a/packages/react-scripts/README_BACKUP.md b/packages/react-scripts/README_BACKUP.md new file mode 100644 index 00000000000..92364c5fead --- /dev/null +++ b/packages/react-scripts/README_BACKUP.md @@ -0,0 +1,7 @@ +# react-scripts + +This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). +Please refer to its documentation: + +* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file From 2a1ecd6632b50ed878830375de569db11f2ff02d Mon Sep 17 00:00:00 2001 From: kitze Date: Mon, 21 Nov 2016 13:16:11 +0100 Subject: [PATCH 071/140] =?UTF-8?q?=F0=9F=9B=A0=20small=20fix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/config/webpack.config.dev.js | 1 - packages/react-scripts/config/webpack.config.prod.js | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 9ab93b31ec3..b7a007d312d 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -130,7 +130,6 @@ module.exports = { /\.(html)$/, /\.(js|jsx)$/, /\.css$/, - /\.html$/, /\.json$/ ].concat(customConfig.excludedFilesRegex), loader: 'url', diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index c8420ad8d4a..425daad97e0 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -138,7 +138,6 @@ module.exports = { /\.(html)$/, /\.(js|jsx)$/, /\.css$/, - /\.html$/, /\.json$/ ].concat(customConfig.excludedFilesRegex), loader: 'url', From 438ee834a54c35776c9cd8f8ee0d1d85b00dcdc2 Mon Sep 17 00:00:00 2001 From: kitze Date: Mon, 21 Nov 2016 13:16:51 +0100 Subject: [PATCH 072/140] Publish - custom-react-scripts@0.0.18 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 65970d21ca1..bef1f8c2a4a 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.0.17", + "version": "0.0.18", "description": "Allow custom config for create-react-app without ejecting", "repository": "kitze/create-react-app", "license": "BSD-3-Clause", From 5fdf590a848a5b7bcb079e573a6d1e15f697b7e3 Mon Sep 17 00:00:00 2001 From: Nathan Hagen Date: Wed, 30 Nov 2016 23:54:43 -0500 Subject: [PATCH 073/140] Replace spread argument syntax --- packages/react-scripts/config/webpack.config.prod.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 425daad97e0..2a810010361 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -173,7 +173,7 @@ module.exports = { // in the main CSS file. { test: /\.css$/, - loader: ExtractTextPlugin.extract(...customConfig.values.CSS_MODULES ? ['style', 'css?modules&importLoaders=1', 'postcss'] : ['style', 'css?importLoaders=1', 'postcss']) + loader: ExtractTextPlugin.extract.apply(null, customConfig.values.CSS_MODULES ? ['style', 'css?modules&importLoaders=1', 'postcss'] : ['style', 'css?importLoaders=1', 'postcss']) // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, // JSON is not enabled by default in Webpack but both Node and Browserify From a7655374b9fd3ee716938750236ae42eb821f002 Mon Sep 17 00:00:00 2001 From: kitze Date: Thu, 1 Dec 2016 06:15:07 +0100 Subject: [PATCH 074/140] Publish - custom-react-scripts@0.0.19 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index bef1f8c2a4a..235e62ae817 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.0.18", + "version": "0.0.19", "description": "Allow custom config for create-react-app without ejecting", "repository": "kitze/create-react-app", "license": "BSD-3-Clause", From 27ca91d1c46d880df164c0268d654ce912525d99 Mon Sep 17 00:00:00 2001 From: kitze Date: Thu, 1 Dec 2016 10:13:45 +0100 Subject: [PATCH 075/140] =?UTF-8?q?=E2=9E=95=20add=20custom=20babel=20plug?= =?UTF-8?q?ins=20and=20presets=20to=20jest=20configuration,=20fixes=20#1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/config/jest/transform.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/config/jest/transform.js b/packages/react-scripts/config/jest/transform.js index 145bd86cc9a..df1e3ff5549 100644 --- a/packages/react-scripts/config/jest/transform.js +++ b/packages/react-scripts/config/jest/transform.js @@ -7,8 +7,11 @@ */ const babelJest = require('babel-jest'); +const getCustomConfig = require('../get-custom-config'); +const customConfig = getCustomConfig(); module.exports = babelJest.createTransformer({ - presets: [require.resolve('babel-preset-react-app')], + presets: [require.resolve('babel-preset-react-app')].concat(customConfig.presets), + plugins: customConfig.plugins, babelrc: false }); From d5eae3226b34956606ab94632d4310a2dc24c28e Mon Sep 17 00:00:00 2001 From: kitze Date: Thu, 1 Dec 2016 10:45:27 +0100 Subject: [PATCH 076/140] =?UTF-8?q?=E2=9E=96=20revert=20readmes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 +- README_BACKUP.md | 226 ------------------------ packages/react-scripts/README.md | 67 +------ packages/react-scripts/README_BACKUP.md | 7 - 4 files changed, 6 insertions(+), 298 deletions(-) delete mode 100644 README_BACKUP.md delete mode 100644 packages/react-scripts/README_BACKUP.md diff --git a/README.md b/README.md index f204942a7aa..0ca7b6df1ca 100644 --- a/README.md +++ b/README.md @@ -120,9 +120,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast - [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) - [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) - [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation) -- [Making a Progressive Web App](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) - [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) -- [Troubleshooting](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#troubleshooting) A copy of the user guide will be created as `README.md` in your project folder. @@ -225,4 +223,4 @@ Notable alternatives also include: * [tarec](https://github.com/geowarin/tarec) You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
    -React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. +React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file diff --git a/README_BACKUP.md b/README_BACKUP.md deleted file mode 100644 index 0ca7b6df1ca..00000000000 --- a/README_BACKUP.md +++ /dev/null @@ -1,226 +0,0 @@ -# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) - -Create React apps with no build configuration. - -* [Getting Started](#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. - -## tl;dr - -```sh -npm install -g create-react-app - -create-react-app my-app -cd my-app/ -npm start - -``` - -Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
    -When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. - -npm start - -## Getting Started - -### Installation - -Install it once globally: - -```sh -npm install -g create-react-app -``` - -**Youโ€™ll need to have Node >= 4 on your machine**. - -**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. - -**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. - -### Creating an App - -To create a new app, run: - -```sh -create-react-app my-app -cd my-app -``` - -It will create a directory called `my-app` inside the current folder.
    -Inside that directory, it will generate the initial project structure and install the transitive dependencies: - -``` -my-app/ - README.md - node_modules/ - package.json - .gitignore - public/ - favicon.ico - index.html - src/ - App.css - App.js - App.test.js - index.css - index.js - logo.svg -``` - -No configuration or complicated folder structures, just the files you need to build your app.
    -Once the installation is done, you can run some commands inside the project folder: - -### `npm start` - -Runs the app in development mode.
    -Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.
    -You will see the build errors and lint warnings in the console. - -Build errors - -### `npm test` - -Runs the test watcher in an interactive mode. -By default, runs tests related to files changes since the last commit. - -[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) - -### `npm run build` - -Builds the app for production to the `build` folder.
    -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.
    -Your app is ready to be deployed! - -## User Guide - -The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: - -- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) -- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) -- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) -- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) -- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) -- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) -- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) -- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) -- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) -- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) -- [Using Global Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-global-variables) -- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) -- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) -- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) -- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) -- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) -- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) -- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) -- [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) -- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) -- [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation) -- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) - -A copy of the user guide will be created as `README.md` in your project folder. - -## How to Update to New Versions? - -Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) for this and other information. - -## Philosophy - -* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. - -* **Convention over Configuration:** You don't need to configure anything by default. Reasonably good configuration of both development and production builds is handled for you so you can focus on writing code. - -* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. - -## Why Use This? - -**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: - -* React, JSX, and ES6 support. -* Language extras beyond ES6 like the object spread operator. -* A dev server that lints for common errors. -* Import CSS and image files directly from JavaScript. -* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. -* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. - -**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. - -**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. - -### Converting to a Custom Setup - -**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. - -Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. - -**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** - -You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. - -## Limitations - -Some features are currently **not supported**: - -* Server rendering. -* Some experimental syntax extensions (e.g. decorators). -* CSS Modules. -* LESS or Sass. -* Hot reloading of components. - -Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. - -## Whatโ€™s Inside? - -The tools used by Create React App are subject to change. -Currently it is a thin layer on top of many amazing community projects, such as: - -* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) -* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) -* [Autoprefixer](https://github.com/postcss/autoprefixer) -* [ESLint](http://eslint.org/) -* [Jest](http://facebook.github.io/jest) -* and others. - -All of them are transitive dependencies of the provided npm package. - -## Contributing - -We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. - -## Acknowledgements - -We are grateful to the authors of existing related projects for their ideas and collaboration: - -* [@eanplatter](https://github.com/eanplatter) -* [@insin](https://github.com/insin) -* [@mxstbr](https://github.com/mxstbr) - -## Alternatives - -If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. -Some of the more popular and actively maintained ones are: - -* [insin/nwb](https://github.com/insin/nwb) -* [mozilla/neo](https://github.com/mozilla/neo) -* [NYTimes/kyt](https://github.com/NYTimes/kyt) -* [zeit/next.js](https://github.com/zeit/next.js) -* [gatsbyjs/gatsby](https://github.com/gatsbyjs/gatsby) - -Notable alternatives also include: - -* [enclave](https://github.com/eanplatter/enclave) -* [motion](https://github.com/motion/motion) -* [quik](https://github.com/satya164/quik) -* [sagui](https://github.com/saguijs/sagui) -* [roc](https://github.com/rocjs/roc) -* [aik](https://github.com/d4rkr00t/aik) -* [react-app](https://github.com/kriasoft/react-app) -* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) -* [tarec](https://github.com/geowarin/tarec) - -You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
    -React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index e2925a599be..92364c5fead 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -1,64 +1,7 @@ -# โ˜ข custom-react-scripts โ˜ข +# react-scripts -### โš ๏ธ Disclaimer: -> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. +This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). +Please refer to its documentation: -The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). - -### ๐Ÿ’กFeatures: -* Decorators -* babel-preset-stage-0 -* LESS -* SASS -* CSS modules - -**the features are optional and can be turned on/off individually* - -### โ”How to use it -```create-react-app my-app --scripts-version custom-react-scripts``` - -Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. - -The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. - -### ๐Ÿ“ Configuration options - -#### Styling -- ```REACT_APP_SASS=true``` - enable SASS support -- ```REACT_APP_LESS=true``` - enable LESS support -- ```REACT_APP_STYLUS=true``` - enable Stylus support -- ```REACT_APP_CSS_MODULES``` - enable CSS modules - -#### Babel -- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset -- ```REACT_APP_DECORATORS=true``` - enable decorators support - -> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. -> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. - -#### Others -- ```PORT=3015``` - change default port (supported in CRA by default) -- ```OPEN_BROWSER=false``` - don't open browser after running webpack server - -### ๐Ÿค” Why? -The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: - -* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. -* It's hard to maintain code for all of these custom configurations that people want to use. - -But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. - -So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. - -### How does it work? -The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. - -From the original readme: -> To define permanent environment vairables, create a file called .env in the root of your project: -> REACT_APP_SECRET_CODE=abcdef - -I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. - -### Future plans - -I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. +* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file diff --git a/packages/react-scripts/README_BACKUP.md b/packages/react-scripts/README_BACKUP.md deleted file mode 100644 index 92364c5fead..00000000000 --- a/packages/react-scripts/README_BACKUP.md +++ /dev/null @@ -1,7 +0,0 @@ -# react-scripts - -This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). -Please refer to its documentation: - -* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file From 2f62b7bf5176930c3e939f75b16a71a1136725b0 Mon Sep 17 00:00:00 2001 From: kitze Date: Thu, 1 Dec 2016 16:57:34 +0100 Subject: [PATCH 077/140] =?UTF-8?q?=F0=9F=9B=A0=20temporary=20fix=20until?= =?UTF-8?q?=20getProcessForPort=20is=20published=20properly?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react-scripts/config/jest/transform.js | 4 +- .../scripts/getProcessForPort.js | 61 +++++++++++++++++++ packages/react-scripts/scripts/start.js | 2 +- 3 files changed, 64 insertions(+), 3 deletions(-) create mode 100644 packages/react-scripts/scripts/getProcessForPort.js diff --git a/packages/react-scripts/config/jest/transform.js b/packages/react-scripts/config/jest/transform.js index df1e3ff5549..3400cb7a50c 100644 --- a/packages/react-scripts/config/jest/transform.js +++ b/packages/react-scripts/config/jest/transform.js @@ -8,10 +8,10 @@ const babelJest = require('babel-jest'); const getCustomConfig = require('../get-custom-config'); -const customConfig = getCustomConfig(); +const customConfig = getCustomConfig(false); module.exports = babelJest.createTransformer({ presets: [require.resolve('babel-preset-react-app')].concat(customConfig.presets), plugins: customConfig.plugins, babelrc: false -}); +}); \ No newline at end of file diff --git a/packages/react-scripts/scripts/getProcessForPort.js b/packages/react-scripts/scripts/getProcessForPort.js new file mode 100644 index 00000000000..5540fbad47a --- /dev/null +++ b/packages/react-scripts/scripts/getProcessForPort.js @@ -0,0 +1,61 @@ +var chalk = require('chalk'); +var execSync = require('child_process').execSync; +var path = require('path'); + +var execOptions = { + encoding: 'utf8', + stdio: [ + 'pipe', // stdin (default) + 'pipe', // stdout (default) + 'ignore' //stderr + ] +}; + +function isProcessAReactApp(processCommand) { + return /^node .*react-scripts\/scripts\/start\.js\s?$/.test(processCommand); +} + +function getProcessIdOnPort(port) { + return execSync('lsof -i:' + port + ' -P -t -sTCP:LISTEN', execOptions).trim(); +} + +function getPackageNameInDirectory(directory) { + var packagePath = path.join(directory.trim(), 'package.json'); + + try { + return require(packagePath).name; + } catch(e) { + return null; + } + +} + +function getProcessCommand(processId, processDirectory) { + var command = execSync('ps -o command -p ' + processId + ' | sed -n 2p', execOptions); + + if (isProcessAReactApp(command)) { + const packageName = getPackageNameInDirectory(processDirectory); + return (packageName) ? packageName + '\n' : command; + } else { + return command; + } + +} + +function getDirectoryOfProcessById(processId) { + return execSync('lsof -p '+ processId + ' | grep cwd | awk \'{print $9}\'', execOptions).trim(); +} + +function getProcessForPort(port) { + try { + var processId = getProcessIdOnPort(port); + var directory = getDirectoryOfProcessById(processId); + var command = getProcessCommand(processId, directory); + return chalk.cyan(command) + chalk.blue(' in ') + chalk.cyan(directory); + } catch(e) { + return null; + } +} + +module.exports = getProcessForPort; + diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index f07603c2bea..9d228a7b45b 100644 --- a/packages/react-scripts/scripts/start.js +++ b/packages/react-scripts/scripts/start.js @@ -26,7 +26,7 @@ var detect = require('detect-port'); var clearConsole = require('react-dev-utils/clearConsole'); var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); -var getProcessForPort = require('react-dev-utils/getProcessForPort'); +var getProcessForPort = require('./getProcessForPort'); var openBrowser = require('react-dev-utils/openBrowser'); var prompt = require('react-dev-utils/prompt'); var pathExists = require('path-exists'); From 164667f6a797af6bd23dee26809fcec6b8424a70 Mon Sep 17 00:00:00 2001 From: kitze Date: Thu, 1 Dec 2016 16:58:15 +0100 Subject: [PATCH 078/140] Publish - react-scripts@0.7.1 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 2a252171b69..4755008a550 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "react-scripts", - "version": "0.7.0", + "version": "0.7.1", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", From 251c9e7ea18b7ec09ba83dce64ac7c4234d7de1b Mon Sep 17 00:00:00 2001 From: kitze Date: Thu, 1 Dec 2016 17:01:11 +0100 Subject: [PATCH 079/140] =?UTF-8?q?=E2=9E=96=20revert=20version?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 4755008a550..2a252171b69 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "react-scripts", - "version": "0.7.1", + "version": "0.7.0", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", From 77d525312c56b75c216875e5f713910c99b3ebb5 Mon Sep 17 00:00:00 2001 From: kitze Date: Thu, 1 Dec 2016 17:01:19 +0100 Subject: [PATCH 080/140] Publish - react-scripts@0.7.1 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 2a252171b69..4755008a550 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "react-scripts", - "version": "0.7.0", + "version": "0.7.1", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", From 3e7fa6d81c8c576d867207a9583e95a84c570eb6 Mon Sep 17 00:00:00 2001 From: kitze Date: Thu, 1 Dec 2016 17:02:06 +0100 Subject: [PATCH 081/140] =?UTF-8?q?=E2=9E=95=20bump=20version=20(problems?= =?UTF-8?q?=20with=20npm=20run=20publish=20from=20CRA)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 4755008a550..362560ddd1b 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "react-scripts", - "version": "0.7.1", + "version": "0.7.2", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", From d54eb57364a1ec17d24bd536464d80b72b75dc6c Mon Sep 17 00:00:00 2001 From: kitze Date: Thu, 1 Dec 2016 17:02:27 +0100 Subject: [PATCH 082/140] Publish - react-scripts@0.7.3 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 362560ddd1b..fa434902204 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "react-scripts", - "version": "0.7.2", + "version": "0.7.3", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", From 74ab7dc5c547ff2a18c99e4bff491419af83635b Mon Sep 17 00:00:00 2001 From: kitze Date: Thu, 1 Dec 2016 17:03:31 +0100 Subject: [PATCH 083/140] =?UTF-8?q?=F0=9F=9B=A0=20fix=20package.json?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index fa434902204..29e1d4d2191 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,14 +1,14 @@ { - "name": "react-scripts", - "version": "0.7.3", + "name": "custom-react-scripts", + "version": "0.7.5", "description": "Configuration and scripts for Create React App.", - "repository": "facebookincubator/create-react-app", + "repository": "npmjs.com/package/custom-react-scripts", "license": "BSD-3-Clause", "engines": { "node": ">=4" }, "bugs": { - "url": "https://github.com/facebookincubator/create-react-app/issues" + "url": "https://github.com/kitze/create-react-app/issues" }, "files": [ ".babelrc", From 32276c2f70fdc6fbc84536d9a33eb6c79aab04d0 Mon Sep 17 00:00:00 2001 From: kitze Date: Thu, 1 Dec 2016 17:04:21 +0100 Subject: [PATCH 084/140] =?UTF-8?q?=E2=9E=96=20revert=20custom=20package.j?= =?UTF-8?q?son?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 29e1d4d2191..b898d9c25b8 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,8 +1,8 @@ { "name": "custom-react-scripts", - "version": "0.7.5", + "version": "0.0.19", "description": "Configuration and scripts for Create React App.", - "repository": "npmjs.com/package/custom-react-scripts", + "repository": "https://npmjs.com/package/custom-react-scripts", "license": "BSD-3-Clause", "engines": { "node": ">=4" From 660724a96490a910eb65360b33fea693f7da1f13 Mon Sep 17 00:00:00 2001 From: kitze Date: Thu, 1 Dec 2016 17:04:31 +0100 Subject: [PATCH 085/140] Publish - custom-react-scripts@0.0.20 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index b898d9c25b8..4ce7473082d 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.0.19", + "version": "0.0.20", "description": "Configuration and scripts for Create React App.", "repository": "https://npmjs.com/package/custom-react-scripts", "license": "BSD-3-Clause", From afbb1770e4f656fd681a4f4cfb0998b35ae0f2dc Mon Sep 17 00:00:00 2001 From: kitze Date: Thu, 1 Dec 2016 17:28:41 +0100 Subject: [PATCH 086/140] revert readmes --- README.md | 248 ++++-------------------- README_BACKUP.md | 226 +++++++++++++++++++++ packages/react-scripts/README.md | 67 ++++++- packages/react-scripts/README_BACKUP.md | 7 + 4 files changed, 338 insertions(+), 210 deletions(-) create mode 100644 README_BACKUP.md create mode 100644 packages/react-scripts/README_BACKUP.md diff --git a/README.md b/README.md index 0ca7b6df1ca..e2925a599be 100644 --- a/README.md +++ b/README.md @@ -1,226 +1,64 @@ -# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) +# โ˜ข custom-react-scripts โ˜ข -Create React apps with no build configuration. +### โš ๏ธ Disclaimer: +> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. -* [Getting Started](#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. +The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). -## tl;dr +### ๐Ÿ’กFeatures: +* Decorators +* babel-preset-stage-0 +* LESS +* SASS +* CSS modules -```sh -npm install -g create-react-app +**the features are optional and can be turned on/off individually* -create-react-app my-app -cd my-app/ -npm start +### โ”How to use it +```create-react-app my-app --scripts-version custom-react-scripts``` -``` +Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. -Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
    -When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. +The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. -npm start +### ๐Ÿ“ Configuration options -## Getting Started +#### Styling +- ```REACT_APP_SASS=true``` - enable SASS support +- ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_STYLUS=true``` - enable Stylus support +- ```REACT_APP_CSS_MODULES``` - enable CSS modules -### Installation +#### Babel +- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset +- ```REACT_APP_DECORATORS=true``` - enable decorators support -Install it once globally: +> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. +> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. -```sh -npm install -g create-react-app -``` +#### Others +- ```PORT=3015``` - change default port (supported in CRA by default) +- ```OPEN_BROWSER=false``` - don't open browser after running webpack server -**Youโ€™ll need to have Node >= 4 on your machine**. +### ๐Ÿค” Why? +The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: -**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. +* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. +* It's hard to maintain code for all of these custom configurations that people want to use. -**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. +But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. -### Creating an App +So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. -To create a new app, run: +### How does it work? +The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. -```sh -create-react-app my-app -cd my-app -``` +From the original readme: +> To define permanent environment vairables, create a file called .env in the root of your project: +> REACT_APP_SECRET_CODE=abcdef -It will create a directory called `my-app` inside the current folder.
    -Inside that directory, it will generate the initial project structure and install the transitive dependencies: +I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. -``` -my-app/ - README.md - node_modules/ - package.json - .gitignore - public/ - favicon.ico - index.html - src/ - App.css - App.js - App.test.js - index.css - index.js - logo.svg -``` +### Future plans -No configuration or complicated folder structures, just the files you need to build your app.
    -Once the installation is done, you can run some commands inside the project folder: - -### `npm start` - -Runs the app in development mode.
    -Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.
    -You will see the build errors and lint warnings in the console. - -Build errors - -### `npm test` - -Runs the test watcher in an interactive mode. -By default, runs tests related to files changes since the last commit. - -[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) - -### `npm run build` - -Builds the app for production to the `build` folder.
    -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.
    -Your app is ready to be deployed! - -## User Guide - -The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: - -- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) -- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) -- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) -- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) -- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) -- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) -- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) -- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) -- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) -- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) -- [Using Global Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-global-variables) -- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) -- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) -- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) -- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) -- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) -- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) -- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) -- [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) -- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) -- [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation) -- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) - -A copy of the user guide will be created as `README.md` in your project folder. - -## How to Update to New Versions? - -Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) for this and other information. - -## Philosophy - -* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. - -* **Convention over Configuration:** You don't need to configure anything by default. Reasonably good configuration of both development and production builds is handled for you so you can focus on writing code. - -* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. - -## Why Use This? - -**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: - -* React, JSX, and ES6 support. -* Language extras beyond ES6 like the object spread operator. -* A dev server that lints for common errors. -* Import CSS and image files directly from JavaScript. -* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. -* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. - -**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. - -**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. - -### Converting to a Custom Setup - -**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. - -Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. - -**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** - -You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. - -## Limitations - -Some features are currently **not supported**: - -* Server rendering. -* Some experimental syntax extensions (e.g. decorators). -* CSS Modules. -* LESS or Sass. -* Hot reloading of components. - -Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. - -## Whatโ€™s Inside? - -The tools used by Create React App are subject to change. -Currently it is a thin layer on top of many amazing community projects, such as: - -* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) -* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) -* [Autoprefixer](https://github.com/postcss/autoprefixer) -* [ESLint](http://eslint.org/) -* [Jest](http://facebook.github.io/jest) -* and others. - -All of them are transitive dependencies of the provided npm package. - -## Contributing - -We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. - -## Acknowledgements - -We are grateful to the authors of existing related projects for their ideas and collaboration: - -* [@eanplatter](https://github.com/eanplatter) -* [@insin](https://github.com/insin) -* [@mxstbr](https://github.com/mxstbr) - -## Alternatives - -If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. -Some of the more popular and actively maintained ones are: - -* [insin/nwb](https://github.com/insin/nwb) -* [mozilla/neo](https://github.com/mozilla/neo) -* [NYTimes/kyt](https://github.com/NYTimes/kyt) -* [zeit/next.js](https://github.com/zeit/next.js) -* [gatsbyjs/gatsby](https://github.com/gatsbyjs/gatsby) - -Notable alternatives also include: - -* [enclave](https://github.com/eanplatter/enclave) -* [motion](https://github.com/motion/motion) -* [quik](https://github.com/satya164/quik) -* [sagui](https://github.com/saguijs/sagui) -* [roc](https://github.com/rocjs/roc) -* [aik](https://github.com/d4rkr00t/aik) -* [react-app](https://github.com/kriasoft/react-app) -* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) -* [tarec](https://github.com/geowarin/tarec) - -You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
    -React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. diff --git a/README_BACKUP.md b/README_BACKUP.md new file mode 100644 index 00000000000..0ca7b6df1ca --- /dev/null +++ b/README_BACKUP.md @@ -0,0 +1,226 @@ +# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) + +Create React apps with no build configuration. + +* [Getting Started](#getting-started) โ€“ How to create a new app. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. + +## tl;dr + +```sh +npm install -g create-react-app + +create-react-app my-app +cd my-app/ +npm start + +``` + +Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
    +When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. + +npm start + +## Getting Started + +### Installation + +Install it once globally: + +```sh +npm install -g create-react-app +``` + +**Youโ€™ll need to have Node >= 4 on your machine**. + +**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. + +**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. + +### Creating an App + +To create a new app, run: + +```sh +create-react-app my-app +cd my-app +``` + +It will create a directory called `my-app` inside the current folder.
    +Inside that directory, it will generate the initial project structure and install the transitive dependencies: + +``` +my-app/ + README.md + node_modules/ + package.json + .gitignore + public/ + favicon.ico + index.html + src/ + App.css + App.js + App.test.js + index.css + index.js + logo.svg +``` + +No configuration or complicated folder structures, just the files you need to build your app.
    +Once the installation is done, you can run some commands inside the project folder: + +### `npm start` + +Runs the app in development mode.
    +Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
    +You will see the build errors and lint warnings in the console. + +Build errors + +### `npm test` + +Runs the test watcher in an interactive mode. +By default, runs tests related to files changes since the last commit. + +[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) + +### `npm run build` + +Builds the app for production to the `build` folder.
    +It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
    +Your app is ready to be deployed! + +## User Guide + +The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: + +- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) +- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) +- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) +- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) +- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) +- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) +- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) +- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) +- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) +- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) +- [Using Global Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-global-variables) +- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) +- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) +- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) +- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) +- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) +- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) +- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) +- [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) +- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) +- [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation) +- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) + +A copy of the user guide will be created as `README.md` in your project folder. + +## How to Update to New Versions? + +Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) for this and other information. + +## Philosophy + +* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. + +* **Convention over Configuration:** You don't need to configure anything by default. Reasonably good configuration of both development and production builds is handled for you so you can focus on writing code. + +* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. + +## Why Use This? + +**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: + +* React, JSX, and ES6 support. +* Language extras beyond ES6 like the object spread operator. +* A dev server that lints for common errors. +* Import CSS and image files directly from JavaScript. +* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. +* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. + +**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. + +**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. + +### Converting to a Custom Setup + +**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. + +Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. + +**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** + +You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. + +## Limitations + +Some features are currently **not supported**: + +* Server rendering. +* Some experimental syntax extensions (e.g. decorators). +* CSS Modules. +* LESS or Sass. +* Hot reloading of components. + +Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. + +## Whatโ€™s Inside? + +The tools used by Create React App are subject to change. +Currently it is a thin layer on top of many amazing community projects, such as: + +* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) +* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) +* [Autoprefixer](https://github.com/postcss/autoprefixer) +* [ESLint](http://eslint.org/) +* [Jest](http://facebook.github.io/jest) +* and others. + +All of them are transitive dependencies of the provided npm package. + +## Contributing + +We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. + +## Acknowledgements + +We are grateful to the authors of existing related projects for their ideas and collaboration: + +* [@eanplatter](https://github.com/eanplatter) +* [@insin](https://github.com/insin) +* [@mxstbr](https://github.com/mxstbr) + +## Alternatives + +If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. +Some of the more popular and actively maintained ones are: + +* [insin/nwb](https://github.com/insin/nwb) +* [mozilla/neo](https://github.com/mozilla/neo) +* [NYTimes/kyt](https://github.com/NYTimes/kyt) +* [zeit/next.js](https://github.com/zeit/next.js) +* [gatsbyjs/gatsby](https://github.com/gatsbyjs/gatsby) + +Notable alternatives also include: + +* [enclave](https://github.com/eanplatter/enclave) +* [motion](https://github.com/motion/motion) +* [quik](https://github.com/satya164/quik) +* [sagui](https://github.com/saguijs/sagui) +* [roc](https://github.com/rocjs/roc) +* [aik](https://github.com/d4rkr00t/aik) +* [react-app](https://github.com/kriasoft/react-app) +* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) +* [tarec](https://github.com/geowarin/tarec) + +You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
    +React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index 92364c5fead..e2925a599be 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -1,7 +1,64 @@ -# react-scripts +# โ˜ข custom-react-scripts โ˜ข -This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). -Please refer to its documentation: +### โš ๏ธ Disclaimer: +> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. -* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file +The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). + +### ๐Ÿ’กFeatures: +* Decorators +* babel-preset-stage-0 +* LESS +* SASS +* CSS modules + +**the features are optional and can be turned on/off individually* + +### โ”How to use it +```create-react-app my-app --scripts-version custom-react-scripts``` + +Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. + +The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. + +### ๐Ÿ“ Configuration options + +#### Styling +- ```REACT_APP_SASS=true``` - enable SASS support +- ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_STYLUS=true``` - enable Stylus support +- ```REACT_APP_CSS_MODULES``` - enable CSS modules + +#### Babel +- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset +- ```REACT_APP_DECORATORS=true``` - enable decorators support + +> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. +> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. + +#### Others +- ```PORT=3015``` - change default port (supported in CRA by default) +- ```OPEN_BROWSER=false``` - don't open browser after running webpack server + +### ๐Ÿค” Why? +The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: + +* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. +* It's hard to maintain code for all of these custom configurations that people want to use. + +But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. + +So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. + +### How does it work? +The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. + +From the original readme: +> To define permanent environment vairables, create a file called .env in the root of your project: +> REACT_APP_SECRET_CODE=abcdef + +I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. + +### Future plans + +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. diff --git a/packages/react-scripts/README_BACKUP.md b/packages/react-scripts/README_BACKUP.md new file mode 100644 index 00000000000..92364c5fead --- /dev/null +++ b/packages/react-scripts/README_BACKUP.md @@ -0,0 +1,7 @@ +# react-scripts + +This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). +Please refer to its documentation: + +* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file From d71ef7727be98d3eaf2ec468761fadec09ba1079 Mon Sep 17 00:00:00 2001 From: kitze Date: Mon, 12 Dec 2016 11:52:07 +0100 Subject: [PATCH 087/140] =?UTF-8?q?=E2=9E=96=20revert=20readmes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 248 ++++++++++++++++++++---- README_BACKUP.md | 226 --------------------- packages/react-scripts/README.md | 67 +------ packages/react-scripts/README_BACKUP.md | 7 - 4 files changed, 210 insertions(+), 338 deletions(-) delete mode 100644 README_BACKUP.md delete mode 100644 packages/react-scripts/README_BACKUP.md diff --git a/README.md b/README.md index e2925a599be..0ca7b6df1ca 100644 --- a/README.md +++ b/README.md @@ -1,64 +1,226 @@ -# โ˜ข custom-react-scripts โ˜ข +# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) -### โš ๏ธ Disclaimer: -> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. +Create React apps with no build configuration. -The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). +* [Getting Started](#getting-started) โ€“ How to create a new app. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. -### ๐Ÿ’กFeatures: -* Decorators -* babel-preset-stage-0 -* LESS -* SASS -* CSS modules +## tl;dr -**the features are optional and can be turned on/off individually* +```sh +npm install -g create-react-app -### โ”How to use it -```create-react-app my-app --scripts-version custom-react-scripts``` +create-react-app my-app +cd my-app/ +npm start -Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. +``` -The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. +Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
    +When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. -### ๐Ÿ“ Configuration options +npm start -#### Styling -- ```REACT_APP_SASS=true``` - enable SASS support -- ```REACT_APP_LESS=true``` - enable LESS support -- ```REACT_APP_STYLUS=true``` - enable Stylus support -- ```REACT_APP_CSS_MODULES``` - enable CSS modules +## Getting Started -#### Babel -- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset -- ```REACT_APP_DECORATORS=true``` - enable decorators support +### Installation -> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. -> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. +Install it once globally: -#### Others -- ```PORT=3015``` - change default port (supported in CRA by default) -- ```OPEN_BROWSER=false``` - don't open browser after running webpack server +```sh +npm install -g create-react-app +``` -### ๐Ÿค” Why? -The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: +**Youโ€™ll need to have Node >= 4 on your machine**. -* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. -* It's hard to maintain code for all of these custom configurations that people want to use. +**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. -But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. +**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. -So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. +### Creating an App -### How does it work? -The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. +To create a new app, run: -From the original readme: -> To define permanent environment vairables, create a file called .env in the root of your project: -> REACT_APP_SECRET_CODE=abcdef +```sh +create-react-app my-app +cd my-app +``` -I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. +It will create a directory called `my-app` inside the current folder.
    +Inside that directory, it will generate the initial project structure and install the transitive dependencies: -### Future plans +``` +my-app/ + README.md + node_modules/ + package.json + .gitignore + public/ + favicon.ico + index.html + src/ + App.css + App.js + App.test.js + index.css + index.js + logo.svg +``` -I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. +No configuration or complicated folder structures, just the files you need to build your app.
    +Once the installation is done, you can run some commands inside the project folder: + +### `npm start` + +Runs the app in development mode.
    +Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
    +You will see the build errors and lint warnings in the console. + +Build errors + +### `npm test` + +Runs the test watcher in an interactive mode. +By default, runs tests related to files changes since the last commit. + +[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) + +### `npm run build` + +Builds the app for production to the `build` folder.
    +It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
    +Your app is ready to be deployed! + +## User Guide + +The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: + +- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) +- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) +- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) +- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) +- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) +- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) +- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) +- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) +- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) +- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) +- [Using Global Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-global-variables) +- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) +- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) +- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) +- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) +- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) +- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) +- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) +- [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) +- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) +- [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation) +- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) + +A copy of the user guide will be created as `README.md` in your project folder. + +## How to Update to New Versions? + +Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) for this and other information. + +## Philosophy + +* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. + +* **Convention over Configuration:** You don't need to configure anything by default. Reasonably good configuration of both development and production builds is handled for you so you can focus on writing code. + +* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. + +## Why Use This? + +**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: + +* React, JSX, and ES6 support. +* Language extras beyond ES6 like the object spread operator. +* A dev server that lints for common errors. +* Import CSS and image files directly from JavaScript. +* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. +* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. + +**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. + +**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. + +### Converting to a Custom Setup + +**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. + +Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. + +**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** + +You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. + +## Limitations + +Some features are currently **not supported**: + +* Server rendering. +* Some experimental syntax extensions (e.g. decorators). +* CSS Modules. +* LESS or Sass. +* Hot reloading of components. + +Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. + +## Whatโ€™s Inside? + +The tools used by Create React App are subject to change. +Currently it is a thin layer on top of many amazing community projects, such as: + +* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) +* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) +* [Autoprefixer](https://github.com/postcss/autoprefixer) +* [ESLint](http://eslint.org/) +* [Jest](http://facebook.github.io/jest) +* and others. + +All of them are transitive dependencies of the provided npm package. + +## Contributing + +We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. + +## Acknowledgements + +We are grateful to the authors of existing related projects for their ideas and collaboration: + +* [@eanplatter](https://github.com/eanplatter) +* [@insin](https://github.com/insin) +* [@mxstbr](https://github.com/mxstbr) + +## Alternatives + +If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. +Some of the more popular and actively maintained ones are: + +* [insin/nwb](https://github.com/insin/nwb) +* [mozilla/neo](https://github.com/mozilla/neo) +* [NYTimes/kyt](https://github.com/NYTimes/kyt) +* [zeit/next.js](https://github.com/zeit/next.js) +* [gatsbyjs/gatsby](https://github.com/gatsbyjs/gatsby) + +Notable alternatives also include: + +* [enclave](https://github.com/eanplatter/enclave) +* [motion](https://github.com/motion/motion) +* [quik](https://github.com/satya164/quik) +* [sagui](https://github.com/saguijs/sagui) +* [roc](https://github.com/rocjs/roc) +* [aik](https://github.com/d4rkr00t/aik) +* [react-app](https://github.com/kriasoft/react-app) +* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) +* [tarec](https://github.com/geowarin/tarec) + +You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
    +React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file diff --git a/README_BACKUP.md b/README_BACKUP.md deleted file mode 100644 index 0ca7b6df1ca..00000000000 --- a/README_BACKUP.md +++ /dev/null @@ -1,226 +0,0 @@ -# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) - -Create React apps with no build configuration. - -* [Getting Started](#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. - -## tl;dr - -```sh -npm install -g create-react-app - -create-react-app my-app -cd my-app/ -npm start - -``` - -Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
    -When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. - -npm start - -## Getting Started - -### Installation - -Install it once globally: - -```sh -npm install -g create-react-app -``` - -**Youโ€™ll need to have Node >= 4 on your machine**. - -**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. - -**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. - -### Creating an App - -To create a new app, run: - -```sh -create-react-app my-app -cd my-app -``` - -It will create a directory called `my-app` inside the current folder.
    -Inside that directory, it will generate the initial project structure and install the transitive dependencies: - -``` -my-app/ - README.md - node_modules/ - package.json - .gitignore - public/ - favicon.ico - index.html - src/ - App.css - App.js - App.test.js - index.css - index.js - logo.svg -``` - -No configuration or complicated folder structures, just the files you need to build your app.
    -Once the installation is done, you can run some commands inside the project folder: - -### `npm start` - -Runs the app in development mode.
    -Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.
    -You will see the build errors and lint warnings in the console. - -Build errors - -### `npm test` - -Runs the test watcher in an interactive mode. -By default, runs tests related to files changes since the last commit. - -[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) - -### `npm run build` - -Builds the app for production to the `build` folder.
    -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.
    -Your app is ready to be deployed! - -## User Guide - -The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: - -- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) -- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) -- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) -- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) -- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) -- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) -- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) -- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) -- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) -- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) -- [Using Global Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-global-variables) -- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) -- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) -- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) -- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) -- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) -- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) -- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) -- [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) -- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) -- [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation) -- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) - -A copy of the user guide will be created as `README.md` in your project folder. - -## How to Update to New Versions? - -Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) for this and other information. - -## Philosophy - -* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. - -* **Convention over Configuration:** You don't need to configure anything by default. Reasonably good configuration of both development and production builds is handled for you so you can focus on writing code. - -* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. - -## Why Use This? - -**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: - -* React, JSX, and ES6 support. -* Language extras beyond ES6 like the object spread operator. -* A dev server that lints for common errors. -* Import CSS and image files directly from JavaScript. -* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. -* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. - -**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. - -**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. - -### Converting to a Custom Setup - -**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. - -Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. - -**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** - -You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. - -## Limitations - -Some features are currently **not supported**: - -* Server rendering. -* Some experimental syntax extensions (e.g. decorators). -* CSS Modules. -* LESS or Sass. -* Hot reloading of components. - -Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. - -## Whatโ€™s Inside? - -The tools used by Create React App are subject to change. -Currently it is a thin layer on top of many amazing community projects, such as: - -* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) -* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) -* [Autoprefixer](https://github.com/postcss/autoprefixer) -* [ESLint](http://eslint.org/) -* [Jest](http://facebook.github.io/jest) -* and others. - -All of them are transitive dependencies of the provided npm package. - -## Contributing - -We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. - -## Acknowledgements - -We are grateful to the authors of existing related projects for their ideas and collaboration: - -* [@eanplatter](https://github.com/eanplatter) -* [@insin](https://github.com/insin) -* [@mxstbr](https://github.com/mxstbr) - -## Alternatives - -If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. -Some of the more popular and actively maintained ones are: - -* [insin/nwb](https://github.com/insin/nwb) -* [mozilla/neo](https://github.com/mozilla/neo) -* [NYTimes/kyt](https://github.com/NYTimes/kyt) -* [zeit/next.js](https://github.com/zeit/next.js) -* [gatsbyjs/gatsby](https://github.com/gatsbyjs/gatsby) - -Notable alternatives also include: - -* [enclave](https://github.com/eanplatter/enclave) -* [motion](https://github.com/motion/motion) -* [quik](https://github.com/satya164/quik) -* [sagui](https://github.com/saguijs/sagui) -* [roc](https://github.com/rocjs/roc) -* [aik](https://github.com/d4rkr00t/aik) -* [react-app](https://github.com/kriasoft/react-app) -* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) -* [tarec](https://github.com/geowarin/tarec) - -You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
    -React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index e2925a599be..92364c5fead 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -1,64 +1,7 @@ -# โ˜ข custom-react-scripts โ˜ข +# react-scripts -### โš ๏ธ Disclaimer: -> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. +This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). +Please refer to its documentation: -The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). - -### ๐Ÿ’กFeatures: -* Decorators -* babel-preset-stage-0 -* LESS -* SASS -* CSS modules - -**the features are optional and can be turned on/off individually* - -### โ”How to use it -```create-react-app my-app --scripts-version custom-react-scripts``` - -Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. - -The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. - -### ๐Ÿ“ Configuration options - -#### Styling -- ```REACT_APP_SASS=true``` - enable SASS support -- ```REACT_APP_LESS=true``` - enable LESS support -- ```REACT_APP_STYLUS=true``` - enable Stylus support -- ```REACT_APP_CSS_MODULES``` - enable CSS modules - -#### Babel -- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset -- ```REACT_APP_DECORATORS=true``` - enable decorators support - -> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. -> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. - -#### Others -- ```PORT=3015``` - change default port (supported in CRA by default) -- ```OPEN_BROWSER=false``` - don't open browser after running webpack server - -### ๐Ÿค” Why? -The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: - -* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. -* It's hard to maintain code for all of these custom configurations that people want to use. - -But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. - -So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. - -### How does it work? -The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. - -From the original readme: -> To define permanent environment vairables, create a file called .env in the root of your project: -> REACT_APP_SECRET_CODE=abcdef - -I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. - -### Future plans - -I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. +* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file diff --git a/packages/react-scripts/README_BACKUP.md b/packages/react-scripts/README_BACKUP.md deleted file mode 100644 index 92364c5fead..00000000000 --- a/packages/react-scripts/README_BACKUP.md +++ /dev/null @@ -1,7 +0,0 @@ -# react-scripts - -This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). -Please refer to its documentation: - -* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file From 07e0a895547c0ed08d45670aa2f16afd4521f801 Mon Sep 17 00:00:00 2001 From: kitze Date: Mon, 12 Dec 2016 13:09:05 +0100 Subject: [PATCH 088/140] Merge branch 'master' of https://github.com/facebookincubator/create-react-app # Conflicts: # .gitignore # packages/babel-preset-react-app/package.json # packages/create-react-app/package.json # packages/eslint-config-react-app/package.json # packages/react-dev-utils/package.json # packages/react-scripts/config/webpack.config.dev.js # packages/react-scripts/config/webpack.config.prod.js # packages/react-scripts/package.json # packages/react-scripts/utils/createJestConfig.js --- README.md | 249 +++--------------- README_BACKUP.md | 227 ++++++++++++++++ packages/babel-preset-react-app/package.json | 1 - packages/react-scripts/README.md | 67 ++++- packages/react-scripts/README_BACKUP.md | 7 + .../config/jest/babelTransform.js | 2 +- packages/react-scripts/scripts/start.js | 2 +- .../react-scripts/utils/createJestConfig.js | 4 +- 8 files changed, 343 insertions(+), 216 deletions(-) create mode 100644 README_BACKUP.md create mode 100644 packages/react-scripts/README_BACKUP.md diff --git a/README.md b/README.md index b2f224828ba..e2925a599be 100644 --- a/README.md +++ b/README.md @@ -1,227 +1,64 @@ -# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) +# โ˜ข custom-react-scripts โ˜ข -Create React apps with no build configuration. +### โš ๏ธ Disclaimer: +> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. -* [Getting Started](#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. +The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). -## tl;dr +### ๐Ÿ’กFeatures: +* Decorators +* babel-preset-stage-0 +* LESS +* SASS +* CSS modules -```sh -npm install -g create-react-app +**the features are optional and can be turned on/off individually* -create-react-app my-app -cd my-app/ -npm start +### โ”How to use it +```create-react-app my-app --scripts-version custom-react-scripts``` -``` +Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. -Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
    -When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. +The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. -npm start +### ๐Ÿ“ Configuration options -## Getting Started +#### Styling +- ```REACT_APP_SASS=true``` - enable SASS support +- ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_STYLUS=true``` - enable Stylus support +- ```REACT_APP_CSS_MODULES``` - enable CSS modules -### Installation +#### Babel +- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset +- ```REACT_APP_DECORATORS=true``` - enable decorators support -Install it once globally: +> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. +> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. -```sh -npm install -g create-react-app -``` +#### Others +- ```PORT=3015``` - change default port (supported in CRA by default) +- ```OPEN_BROWSER=false``` - don't open browser after running webpack server -**Youโ€™ll need to have Node >= 4 on your machine**. +### ๐Ÿค” Why? +The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: -**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. +* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. +* It's hard to maintain code for all of these custom configurations that people want to use. -**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. +But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. -### Creating an App +So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. -To create a new app, run: +### How does it work? +The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. -```sh -create-react-app my-app -cd my-app -``` +From the original readme: +> To define permanent environment vairables, create a file called .env in the root of your project: +> REACT_APP_SECRET_CODE=abcdef -It will create a directory called `my-app` inside the current folder.
    -Inside that directory, it will generate the initial project structure and install the transitive dependencies: +I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. -``` -my-app/ - README.md - node_modules/ - package.json - .gitignore - public/ - favicon.ico - index.html - src/ - App.css - App.js - App.test.js - index.css - index.js - logo.svg -``` +### Future plans -No configuration or complicated folder structures, just the files you need to build your app.
    -Once the installation is done, you can run some commands inside the project folder: - -### `npm start` - -Runs the app in development mode.
    -Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.
    -You will see the build errors and lint warnings in the console. - -Build errors - -### `npm test` - -Runs the test watcher in an interactive mode. -By default, runs tests related to files changes since the last commit. - -[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) - -### `npm run build` - -Builds the app for production to the `build` folder.
    -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.
    -Your app is ready to be deployed! - -## User Guide - -The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: - -- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) -- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) -- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) -- [Syntax Highlighting in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#syntax-highlighting-in-the-editor) -- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) -- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) -- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) -- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) -- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) -- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) -- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) -- [Using Global Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-global-variables) -- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) -- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) -- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) -- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) -- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) -- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) -- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) -- [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) -- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) -- [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation) -- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) - -A copy of the user guide will be created as `README.md` in your project folder. - -## How to Update to New Versions? - -Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) for this and other information. - -## Philosophy - -* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. - -* **Convention over Configuration:** You don't need to configure anything by default. Reasonably good configuration of both development and production builds is handled for you so you can focus on writing code. - -* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. - -## Why Use This? - -**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: - -* React, JSX, and ES6 support. -* Language extras beyond ES6 like the object spread operator. -* A dev server that lints for common errors. -* Import CSS and image files directly from JavaScript. -* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. -* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. - -**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. - -**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. - -### Converting to a Custom Setup - -**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. - -Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. - -**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** - -You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. - -## Limitations - -Some features are currently **not supported**: - -* Server rendering. -* Some experimental syntax extensions (e.g. decorators). -* CSS Modules. -* LESS or Sass. -* Hot reloading of components. - -Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. - -## Whatโ€™s Inside? - -The tools used by Create React App are subject to change. -Currently it is a thin layer on top of many amazing community projects, such as: - -* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) -* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) -* [Autoprefixer](https://github.com/postcss/autoprefixer) -* [ESLint](http://eslint.org/) -* [Jest](http://facebook.github.io/jest) -* and others. - -All of them are transitive dependencies of the provided npm package. - -## Contributing - -We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. - -## Acknowledgements - -We are grateful to the authors of existing related projects for their ideas and collaboration: - -* [@eanplatter](https://github.com/eanplatter) -* [@insin](https://github.com/insin) -* [@mxstbr](https://github.com/mxstbr) - -## Alternatives - -If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. -Some of the more popular and actively maintained ones are: - -* [insin/nwb](https://github.com/insin/nwb) -* [mozilla/neo](https://github.com/mozilla/neo) -* [NYTimes/kyt](https://github.com/NYTimes/kyt) -* [zeit/next.js](https://github.com/zeit/next.js) -* [gatsbyjs/gatsby](https://github.com/gatsbyjs/gatsby) - -Notable alternatives also include: - -* [enclave](https://github.com/eanplatter/enclave) -* [motion](https://github.com/motion/motion) -* [quik](https://github.com/satya164/quik) -* [sagui](https://github.com/saguijs/sagui) -* [roc](https://github.com/rocjs/roc) -* [aik](https://github.com/d4rkr00t/aik) -* [react-app](https://github.com/kriasoft/react-app) -* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) -* [tarec](https://github.com/geowarin/tarec) - -You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
    -React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. diff --git a/README_BACKUP.md b/README_BACKUP.md new file mode 100644 index 00000000000..b2f224828ba --- /dev/null +++ b/README_BACKUP.md @@ -0,0 +1,227 @@ +# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) + +Create React apps with no build configuration. + +* [Getting Started](#getting-started) โ€“ How to create a new app. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. + +## tl;dr + +```sh +npm install -g create-react-app + +create-react-app my-app +cd my-app/ +npm start + +``` + +Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
    +When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. + +npm start + +## Getting Started + +### Installation + +Install it once globally: + +```sh +npm install -g create-react-app +``` + +**Youโ€™ll need to have Node >= 4 on your machine**. + +**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. + +**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. + +### Creating an App + +To create a new app, run: + +```sh +create-react-app my-app +cd my-app +``` + +It will create a directory called `my-app` inside the current folder.
    +Inside that directory, it will generate the initial project structure and install the transitive dependencies: + +``` +my-app/ + README.md + node_modules/ + package.json + .gitignore + public/ + favicon.ico + index.html + src/ + App.css + App.js + App.test.js + index.css + index.js + logo.svg +``` + +No configuration or complicated folder structures, just the files you need to build your app.
    +Once the installation is done, you can run some commands inside the project folder: + +### `npm start` + +Runs the app in development mode.
    +Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
    +You will see the build errors and lint warnings in the console. + +Build errors + +### `npm test` + +Runs the test watcher in an interactive mode. +By default, runs tests related to files changes since the last commit. + +[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) + +### `npm run build` + +Builds the app for production to the `build` folder.
    +It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
    +Your app is ready to be deployed! + +## User Guide + +The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: + +- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) +- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) +- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) +- [Syntax Highlighting in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#syntax-highlighting-in-the-editor) +- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) +- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) +- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) +- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) +- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) +- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) +- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) +- [Using Global Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-global-variables) +- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) +- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) +- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) +- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) +- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) +- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) +- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) +- [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) +- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) +- [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation) +- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) + +A copy of the user guide will be created as `README.md` in your project folder. + +## How to Update to New Versions? + +Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) for this and other information. + +## Philosophy + +* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. + +* **Convention over Configuration:** You don't need to configure anything by default. Reasonably good configuration of both development and production builds is handled for you so you can focus on writing code. + +* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. + +## Why Use This? + +**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: + +* React, JSX, and ES6 support. +* Language extras beyond ES6 like the object spread operator. +* A dev server that lints for common errors. +* Import CSS and image files directly from JavaScript. +* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. +* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. + +**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. + +**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. + +### Converting to a Custom Setup + +**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. + +Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. + +**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** + +You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. + +## Limitations + +Some features are currently **not supported**: + +* Server rendering. +* Some experimental syntax extensions (e.g. decorators). +* CSS Modules. +* LESS or Sass. +* Hot reloading of components. + +Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. + +## Whatโ€™s Inside? + +The tools used by Create React App are subject to change. +Currently it is a thin layer on top of many amazing community projects, such as: + +* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) +* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) +* [Autoprefixer](https://github.com/postcss/autoprefixer) +* [ESLint](http://eslint.org/) +* [Jest](http://facebook.github.io/jest) +* and others. + +All of them are transitive dependencies of the provided npm package. + +## Contributing + +We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. + +## Acknowledgements + +We are grateful to the authors of existing related projects for their ideas and collaboration: + +* [@eanplatter](https://github.com/eanplatter) +* [@insin](https://github.com/insin) +* [@mxstbr](https://github.com/mxstbr) + +## Alternatives + +If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. +Some of the more popular and actively maintained ones are: + +* [insin/nwb](https://github.com/insin/nwb) +* [mozilla/neo](https://github.com/mozilla/neo) +* [NYTimes/kyt](https://github.com/NYTimes/kyt) +* [zeit/next.js](https://github.com/zeit/next.js) +* [gatsbyjs/gatsby](https://github.com/gatsbyjs/gatsby) + +Notable alternatives also include: + +* [enclave](https://github.com/eanplatter/enclave) +* [motion](https://github.com/motion/motion) +* [quik](https://github.com/satya164/quik) +* [sagui](https://github.com/saguijs/sagui) +* [roc](https://github.com/rocjs/roc) +* [aik](https://github.com/d4rkr00t/aik) +* [react-app](https://github.com/kriasoft/react-app) +* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) +* [tarec](https://github.com/geowarin/tarec) + +You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.
    +React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index cfa1f68490a..d8ad7d337ec 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -2,7 +2,6 @@ "name": "babel-preset-react-app", "version": "2.0.1", "private": true, - "version": "1.0.0", "description": "Babel preset used by Create React App", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index 92364c5fead..e2925a599be 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -1,7 +1,64 @@ -# react-scripts +# โ˜ข custom-react-scripts โ˜ข -This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). -Please refer to its documentation: +### โš ๏ธ Disclaimer: +> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. -* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file +The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). + +### ๐Ÿ’กFeatures: +* Decorators +* babel-preset-stage-0 +* LESS +* SASS +* CSS modules + +**the features are optional and can be turned on/off individually* + +### โ”How to use it +```create-react-app my-app --scripts-version custom-react-scripts``` + +Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. + +The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. + +### ๐Ÿ“ Configuration options + +#### Styling +- ```REACT_APP_SASS=true``` - enable SASS support +- ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_STYLUS=true``` - enable Stylus support +- ```REACT_APP_CSS_MODULES``` - enable CSS modules + +#### Babel +- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset +- ```REACT_APP_DECORATORS=true``` - enable decorators support + +> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. +> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. + +#### Others +- ```PORT=3015``` - change default port (supported in CRA by default) +- ```OPEN_BROWSER=false``` - don't open browser after running webpack server + +### ๐Ÿค” Why? +The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: + +* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. +* It's hard to maintain code for all of these custom configurations that people want to use. + +But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. + +So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. + +### How does it work? +The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. + +From the original readme: +> To define permanent environment vairables, create a file called .env in the root of your project: +> REACT_APP_SECRET_CODE=abcdef + +I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. + +### Future plans + +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. diff --git a/packages/react-scripts/README_BACKUP.md b/packages/react-scripts/README_BACKUP.md new file mode 100644 index 00000000000..92364c5fead --- /dev/null +++ b/packages/react-scripts/README_BACKUP.md @@ -0,0 +1,7 @@ +# react-scripts + +This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). +Please refer to its documentation: + +* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file diff --git a/packages/react-scripts/config/jest/babelTransform.js b/packages/react-scripts/config/jest/babelTransform.js index 3400cb7a50c..27430154361 100644 --- a/packages/react-scripts/config/jest/babelTransform.js +++ b/packages/react-scripts/config/jest/babelTransform.js @@ -12,6 +12,6 @@ const customConfig = getCustomConfig(false); module.exports = babelJest.createTransformer({ presets: [require.resolve('babel-preset-react-app')].concat(customConfig.presets), - plugins: customConfig.plugins, + plugins: [].concat(customConfig.babelPlugins), babelrc: false }); \ No newline at end of file diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index b93bcccd236..009641fdec9 100644 --- a/packages/react-scripts/scripts/start.js +++ b/packages/react-scripts/scripts/start.js @@ -26,7 +26,7 @@ var detect = require('detect-port'); var clearConsole = require('react-dev-utils/clearConsole'); var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); -var getProcessForPort = require('./getProcessForPort'); +var getProcessForPort = require('react-dev-utils/getProcessForPort'); var openBrowser = require('react-dev-utils/openBrowser'); var prompt = require('react-dev-utils/prompt'); var pathExists = require('path-exists'); diff --git a/packages/react-scripts/utils/createJestConfig.js b/packages/react-scripts/utils/createJestConfig.js index 36550ccb9bd..cbb8da81641 100644 --- a/packages/react-scripts/utils/createJestConfig.js +++ b/packages/react-scripts/utils/createJestConfig.js @@ -33,7 +33,7 @@ module.exports = (resolve, rootDir, isEjecting) => { '/node_modules/babel-jest' : resolve('config/jest/babelTransform.js'), '^.+\\.css$': resolve('config/jest/cssTransform.js'), - '^(?!.*\\.(js|jsx|css|json)$)': resolve('config/jest/fileTransform.js'), + '^(?!.*\\.(js|jsx|styl|sass|less|css|json)$)': resolve('config/jest/fileTransform.js'), }, transformIgnorePatterns: [ '[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$' @@ -46,4 +46,4 @@ module.exports = (resolve, rootDir, isEjecting) => { config.rootDir = rootDir; } return config; -}; +}; \ No newline at end of file From 74de2627c42b40b84cbeca5fa839aecf174262c8 Mon Sep 17 00:00:00 2001 From: kitze Date: Mon, 12 Dec 2016 13:13:03 +0100 Subject: [PATCH 089/140] =?UTF-8?q?=F0=9F=93=96=20update=20readme=20with?= =?UTF-8?q?=20latest=20react-scripts=20version?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 + packages/react-scripts/README.md | 1 + packages/react-scripts/bin/CUSTOM_README.md | 1 + 3 files changed, 3 insertions(+) diff --git a/README.md b/README.md index e2925a599be..1776dce86cf 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # โ˜ข custom-react-scripts โ˜ข +Latest version of original react-scripts: **0.8.4** ### โš ๏ธ Disclaimer: > This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index e2925a599be..1776dce86cf 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -1,4 +1,5 @@ # โ˜ข custom-react-scripts โ˜ข +Latest version of original react-scripts: **0.8.4** ### โš ๏ธ Disclaimer: > This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. diff --git a/packages/react-scripts/bin/CUSTOM_README.md b/packages/react-scripts/bin/CUSTOM_README.md index e2925a599be..1776dce86cf 100644 --- a/packages/react-scripts/bin/CUSTOM_README.md +++ b/packages/react-scripts/bin/CUSTOM_README.md @@ -1,4 +1,5 @@ # โ˜ข custom-react-scripts โ˜ข +Latest version of original react-scripts: **0.8.4** ### โš ๏ธ Disclaimer: > This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. From 433081ac17a72a34c8b6977e1eda75a6f0c932c8 Mon Sep 17 00:00:00 2001 From: kitze Date: Mon, 12 Dec 2016 13:15:22 +0100 Subject: [PATCH 090/140] Publish - custom-react-scripts@0.0.21 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 5eddd40a6de..b40113c6595 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.0.20", + "version": "0.0.21", "description": "Configuration and scripts for Create React App.", "repository": "https://npmjs.com/package/custom-react-scripts", "license": "BSD-3-Clause", From 5a3ba5e092aed1f150b506219e888a49f29e47ae Mon Sep 17 00:00:00 2001 From: Daniel Spitzer Date: Fri, 13 Jan 2017 13:03:17 +0100 Subject: [PATCH 091/140] Transform pre-processed styles into empty objects Running tests would fail with parsing errors when using style pre-processors, now the tests ignore pre-processed styles using the `cssTransform` jest transformer --- packages/react-scripts/utils/createJestConfig.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/utils/createJestConfig.js b/packages/react-scripts/utils/createJestConfig.js index cbb8da81641..a4ca6195871 100644 --- a/packages/react-scripts/utils/createJestConfig.js +++ b/packages/react-scripts/utils/createJestConfig.js @@ -32,7 +32,7 @@ module.exports = (resolve, rootDir, isEjecting) => { '^.+\\.(js|jsx)$': isEjecting ? '/node_modules/babel-jest' : resolve('config/jest/babelTransform.js'), - '^.+\\.css$': resolve('config/jest/cssTransform.js'), + '^.+\\.(styl|sass|less|css)$': resolve('config/jest/cssTransform.js'), '^(?!.*\\.(js|jsx|styl|sass|less|css|json)$)': resolve('config/jest/fileTransform.js'), }, transformIgnorePatterns: [ @@ -46,4 +46,4 @@ module.exports = (resolve, rootDir, isEjecting) => { config.rootDir = rootDir; } return config; -}; \ No newline at end of file +}; From a36c60f4744f572c889128d9f1b852b947d3bf21 Mon Sep 17 00:00:00 2001 From: Jakub Benes Date: Fri, 20 Jan 2017 10:37:00 +0100 Subject: [PATCH 092/140] updated readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1776dce86cf..635a9ef5510 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # โ˜ข custom-react-scripts โ˜ข -Latest version of original react-scripts: **0.8.4** +Latest version of original react-scripts: **0.8.5** ### โš ๏ธ Disclaimer: > This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. From c7a830ee39d8daa14e15947d06d4473c4e26c938 Mon Sep 17 00:00:00 2001 From: kitze Date: Sat, 4 Feb 2017 14:53:46 +0100 Subject: [PATCH 093/140] Merge branch 'master' of https://github.com/facebookincubator/create-react-app # Conflicts: # README.md --- README.md | 253 +++++------------------- README_BACKUP.md | 13 +- packages/react-scripts/README_BACKUP.md | 68 ++++++- 3 files changed, 115 insertions(+), 219 deletions(-) diff --git a/README.md b/README.md index 85a23174d2b..635a9ef5510 100644 --- a/README.md +++ b/README.md @@ -1,230 +1,65 @@ -# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) +# โ˜ข custom-react-scripts โ˜ข +Latest version of original react-scripts: **0.8.5** -Create React apps with no build configuration. +### โš ๏ธ Disclaimer: +> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. -* [Getting Started](#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. +The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). -## tl;dr +### ๐Ÿ’กFeatures: +* Decorators +* babel-preset-stage-0 +* LESS +* SASS +* CSS modules -```sh -npm install -g create-react-app +**the features are optional and can be turned on/off individually* -create-react-app my-app -cd my-app/ -npm start +### โ”How to use it +```create-react-app my-app --scripts-version custom-react-scripts``` -``` +Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. -Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
    -When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. +The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. -npm start +### ๐Ÿ“ Configuration options -## Getting Started +#### Styling +- ```REACT_APP_SASS=true``` - enable SASS support +- ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_STYLUS=true``` - enable Stylus support +- ```REACT_APP_CSS_MODULES``` - enable CSS modules -### Installation +#### Babel +- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset +- ```REACT_APP_DECORATORS=true``` - enable decorators support -Install it once globally: +> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. +> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. -```sh -npm install -g create-react-app -``` +#### Others +- ```PORT=3015``` - change default port (supported in CRA by default) +- ```OPEN_BROWSER=false``` - don't open browser after running webpack server -**Youโ€™ll need to have Node >= 4 on your machine**. +### ๐Ÿค” Why? +The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: -**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. +* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. +* It's hard to maintain code for all of these custom configurations that people want to use. -**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. +But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. -### Creating an App +So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. -To create a new app, run: +### How does it work? +The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. -```sh -create-react-app my-app -cd my-app -``` +From the original readme: +> To define permanent environment vairables, create a file called .env in the root of your project: +> REACT_APP_SECRET_CODE=abcdef -It will create a directory called `my-app` inside the current folder.
    -Inside that directory, it will generate the initial project structure and install the transitive dependencies: +I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. -``` -my-app/ - README.md - node_modules/ - package.json - .gitignore - public/ - favicon.ico - index.html - src/ - App.css - App.js - App.test.js - index.css - index.js - logo.svg -``` +### Future plans -No configuration or complicated folder structures, just the files you need to build your app.
    -Once the installation is done, you can run some commands inside the project folder: - -### `npm start` - -Runs the app in development mode.
    -Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.
    -You will see the build errors and lint warnings in the console. - -Build errors - -### `npm test` - -Runs the test watcher in an interactive mode.
    -By default, runs tests related to files changes since the last commit. - -[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) - -### `npm run build` - -Builds the app for production to the `build` folder.
    -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.
    -Your app is ready to be deployed! - -## User Guide - -The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: - -- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) -- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) -- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) -- [Syntax Highlighting in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#syntax-highlighting-in-the-editor) -- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) -- [Changing the Page ``](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#changing-the-page-title) -- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) -- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) -- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) -- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) -- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) -- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) -- [Using Global Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-global-variables) -- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) -- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) -- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) -- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) -- [Integrating with an API Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-an-api-backend) -- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) -- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) -- [Generating Dynamic `<meta>` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) -- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) -- [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation) -- [Making a Progressive Web App](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) -- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) -- [Troubleshooting](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#troubleshooting) - -A copy of the user guide will be created as `README.md` in your project folder. - -## How to Update to New Versions? - -Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) for this and other information. - -## Philosophy - -* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. - -* **Convention over Configuration:** You don't need to configure anything by default. Reasonably good configuration of both development and production builds is handled for you so you can focus on writing code. - -* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. - -## Why Use This? - -**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: - -* React, JSX, ES6, and Flow syntax support. -* Language extras beyond ES6 like the object spread operator. -* A dev server that lints for common errors. -* Import CSS and image files directly from JavaScript. -* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. -* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. - -**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. - -**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. - -### Converting to a Custom Setup - -**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. - -Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. - -**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** - -You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. - -## Limitations - -Some features are currently **not supported**: - -* Server rendering. -* Some experimental syntax extensions (e.g. decorators). -* CSS Modules. -* LESS or Sass. -* Hot reloading of components. - -Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. - -## Whatโ€™s Inside? - -The tools used by Create React App are subject to change. -Currently it is a thin layer on top of many amazing community projects, such as: - -* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) -* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) -* [Autoprefixer](https://github.com/postcss/autoprefixer) -* [ESLint](http://eslint.org/) -* [Jest](http://facebook.github.io/jest) -* and others. - -All of them are transitive dependencies of the provided npm package. - -## Contributing - -We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. - -## Acknowledgements - -We are grateful to the authors of existing related projects for their ideas and collaboration: - -* [@eanplatter](https://github.com/eanplatter) -* [@insin](https://github.com/insin) -* [@mxstbr](https://github.com/mxstbr) - -## Alternatives - -If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs.<br> -Some of the more popular and actively maintained ones are: - -* [insin/nwb](https://github.com/insin/nwb) -* [mozilla/neo](https://github.com/mozilla/neo) -* [NYTimes/kyt](https://github.com/NYTimes/kyt) -* [zeit/next.js](https://github.com/zeit/next.js) -* [gatsbyjs/gatsby](https://github.com/gatsbyjs/gatsby) - -Notable alternatives also include: - -* [enclave](https://github.com/eanplatter/enclave) -* [motion](https://github.com/motion/motion) -* [quik](https://github.com/satya164/quik) -* [sagui](https://github.com/saguijs/sagui) -* [roc](https://github.com/rocjs/roc) -* [aik](https://github.com/d4rkr00t/aik) -* [react-app](https://github.com/kriasoft/react-app) -* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) -* [tarec](https://github.com/geowarin/tarec) - -You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.<br> -React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. diff --git a/README_BACKUP.md b/README_BACKUP.md index b2f224828ba..85a23174d2b 100644 --- a/README_BACKUP.md +++ b/README_BACKUP.md @@ -82,7 +82,7 @@ You will see the build errors and lint warnings in the console. ### `npm test` -Runs the test watcher in an interactive mode. +Runs the test watcher in an interactive mode.<br> By default, runs tests related to files changes since the last commit. [Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) @@ -104,6 +104,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast - [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) - [Syntax Highlighting in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#syntax-highlighting-in-the-editor) - [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) +- [Changing the Page `<title>`](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#changing-the-page-title) - [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) - [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) - [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) @@ -115,13 +116,15 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast - [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) - [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) - [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) -- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend) +- [Integrating with an API Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-an-api-backend) - [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) - [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) - [Generating Dynamic `<meta>` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) - [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) - [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation) +- [Making a Progressive Web App](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) - [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) +- [Troubleshooting](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#troubleshooting) A copy of the user guide will be created as `README.md` in your project folder. @@ -141,7 +144,7 @@ Please refer to the [User Guide](https://github.com/facebookincubator/create-rea **If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: -* React, JSX, and ES6 support. +* React, JSX, ES6, and Flow syntax support. * Language extras beyond ES6 like the object spread operator. * A dev server that lints for common errors. * Import CSS and image files directly from JavaScript. @@ -202,7 +205,7 @@ We are grateful to the authors of existing related projects for their ideas and ## Alternatives -If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. +If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs.<br> Some of the more popular and actively maintained ones are: * [insin/nwb](https://github.com/insin/nwb) @@ -224,4 +227,4 @@ Notable alternatives also include: * [tarec](https://github.com/geowarin/tarec) You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.<br> -React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. \ No newline at end of file +React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. diff --git a/packages/react-scripts/README_BACKUP.md b/packages/react-scripts/README_BACKUP.md index 92364c5fead..1776dce86cf 100644 --- a/packages/react-scripts/README_BACKUP.md +++ b/packages/react-scripts/README_BACKUP.md @@ -1,7 +1,65 @@ -# react-scripts +# โ˜ข custom-react-scripts โ˜ข +Latest version of original react-scripts: **0.8.4** -This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). -Please refer to its documentation: +### โš ๏ธ Disclaimer: +> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. -* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. \ No newline at end of file +The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). + +### ๐Ÿ’กFeatures: +* Decorators +* babel-preset-stage-0 +* LESS +* SASS +* CSS modules + +**the features are optional and can be turned on/off individually* + +### โ”How to use it +```create-react-app my-app --scripts-version custom-react-scripts``` + +Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. + +The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. + +### ๐Ÿ“ Configuration options + +#### Styling +- ```REACT_APP_SASS=true``` - enable SASS support +- ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_STYLUS=true``` - enable Stylus support +- ```REACT_APP_CSS_MODULES``` - enable CSS modules + +#### Babel +- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset +- ```REACT_APP_DECORATORS=true``` - enable decorators support + +> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. +> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. + +#### Others +- ```PORT=3015``` - change default port (supported in CRA by default) +- ```OPEN_BROWSER=false``` - don't open browser after running webpack server + +### ๐Ÿค” Why? +The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: + +* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. +* It's hard to maintain code for all of these custom configurations that people want to use. + +But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. + +So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. + +### How does it work? +The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. + +From the original readme: +> To define permanent environment vairables, create a file called .env in the root of your project: +> REACT_APP_SECRET_CODE=abcdef + +I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. + +### Future plans + +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. From ba1d19b86a1ac8de3d5e556e0f0cda40ac9411c7 Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Sun, 5 Feb 2017 09:33:16 +0100 Subject: [PATCH 094/140] =?UTF-8?q?=E2=9E=95=20add=20github=20repository?= =?UTF-8?q?=20field?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/package.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index cf4871f00ce..9b680adda47 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -2,7 +2,10 @@ "name": "custom-react-scripts", "version": "0.0.22", "description": "Configuration and scripts for Create React App.", - "repository": "https://npmjs.com/package/custom-react-scripts", + "repository": { + "type": "git", + "url": "https://github.com/kitze/create-react-app/" + }, "license": "BSD-3-Clause", "engines": { "node": ">=4" From b49fb437eb5eebf1df4679386c36bca26b69bf17 Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Sun, 5 Feb 2017 09:34:54 +0100 Subject: [PATCH 095/140] Publish - custom-react-scripts@0.0.23 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 9b680adda47..a13ed3f5a7e 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.0.22", + "version": "0.0.23", "description": "Configuration and scripts for Create React App.", "repository": { "type": "git", From 1553b68181e0257d80423003a88de3859ef95443 Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Thu, 10 Aug 2017 09:28:36 +0200 Subject: [PATCH 096/140] change customizers, add sass/stylus/less modules --- .env | 6 -- .../config/custom-react-scripts/config.js | 24 ++++++ .../customizers/babel-plugins.js | 5 ++ .../customizers/babel-presets.js | 5 ++ .../customizers/webpack-loaders.js | 32 ++++++++ .../customizers/webpack-plugins.js | 1 + .../custom-react-scripts/postcss-options.js | 12 +++ .../custom-react-scripts/utils/map-object.js | 13 +++ .../webpack-config/style-loader.js | 74 +++++++++++++++++ packages/react-scripts/config/customizers.js | 70 ---------------- .../react-scripts/config/get-custom-config.js | 38 --------- .../config/webpack.config.dev.js | 42 +--------- .../config/webpack.config.prod.js | 71 +--------------- packages/react-scripts/package.json | 6 ++ packages/react-scripts/template/.env | 4 + packages/react-scripts/template/src/App.css | 7 -- packages/react-scripts/template/src/App.js | 81 ++++++++++++------- packages/react-scripts/template/src/App.scss | 14 ---- packages/react-scripts/template/src/Emoji.js | 6 ++ .../template/src/First.module.css | 7 ++ .../template/src/Fourth.module.styl | 2 + .../react-scripts/template/src/Modules.css | 34 -------- .../template/src/Second.module.scss | 3 + .../template/src/Third.module.less | 3 + 24 files changed, 256 insertions(+), 304 deletions(-) delete mode 100644 .env create mode 100644 packages/react-scripts/config/custom-react-scripts/config.js create mode 100644 packages/react-scripts/config/custom-react-scripts/customizers/babel-plugins.js create mode 100644 packages/react-scripts/config/custom-react-scripts/customizers/babel-presets.js create mode 100644 packages/react-scripts/config/custom-react-scripts/customizers/webpack-loaders.js create mode 100644 packages/react-scripts/config/custom-react-scripts/customizers/webpack-plugins.js create mode 100644 packages/react-scripts/config/custom-react-scripts/postcss-options.js create mode 100644 packages/react-scripts/config/custom-react-scripts/utils/map-object.js create mode 100644 packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js delete mode 100644 packages/react-scripts/config/customizers.js delete mode 100644 packages/react-scripts/config/get-custom-config.js create mode 100644 packages/react-scripts/template/src/Emoji.js create mode 100644 packages/react-scripts/template/src/First.module.css create mode 100644 packages/react-scripts/template/src/Fourth.module.styl delete mode 100644 packages/react-scripts/template/src/Modules.css create mode 100644 packages/react-scripts/template/src/Second.module.scss create mode 100644 packages/react-scripts/template/src/Third.module.less diff --git a/.env b/.env deleted file mode 100644 index 591ac0c2712..00000000000 --- a/.env +++ /dev/null @@ -1,6 +0,0 @@ -OPEN_BROWSER=false - -REACT_APP_SASS=true -REACT_APP_LESS=true -REACT_APP_STYLUS=true -REACT_APP_CSS_MODULES=true diff --git a/packages/react-scripts/config/custom-react-scripts/config.js b/packages/react-scripts/config/custom-react-scripts/config.js new file mode 100644 index 00000000000..25819dad1bc --- /dev/null +++ b/packages/react-scripts/config/custom-react-scripts/config.js @@ -0,0 +1,24 @@ +const mapObject = require('./utils/map-object'); + +const customizers = { + babelPlugins: require('./customizers/babel-plugins'), + babelPresets: require('./customizers/babel-presets'), + webpackLoaders: require('./customizers/webpack-loaders'), + webpackPlugins: require('./customizers/webpack-plugins'), +}; + +module.exports = getCustomConfig = (isDev = true) => { + var env = env || {}; + const result = mapObject(customizers, group => { + return mapObject( + group, + (customizer, key) => { + const envValue = process.env['REACT_APP_' + key]; + const activeEnvValue = env && envValue && envValue !== 'false'; + return (activeEnvValue || customizer.default) && customizer.get(isDev); + }, + true + ); + }); + return result; +}; diff --git a/packages/react-scripts/config/custom-react-scripts/customizers/babel-plugins.js b/packages/react-scripts/config/custom-react-scripts/customizers/babel-plugins.js new file mode 100644 index 00000000000..8650ecaee71 --- /dev/null +++ b/packages/react-scripts/config/custom-react-scripts/customizers/babel-plugins.js @@ -0,0 +1,5 @@ +module.exports = { + DECORATORS: { + get: () => require.resolve('babel-plugin-transform-decorators-legacy'), + }, +}; diff --git a/packages/react-scripts/config/custom-react-scripts/customizers/babel-presets.js b/packages/react-scripts/config/custom-react-scripts/customizers/babel-presets.js new file mode 100644 index 00000000000..1060a35c5b6 --- /dev/null +++ b/packages/react-scripts/config/custom-react-scripts/customizers/babel-presets.js @@ -0,0 +1,5 @@ +module.exports = { + BABEL_STAGE_0: { + get: () => require.resolve('babel-preset-stage-0'), + }, +}; diff --git a/packages/react-scripts/config/custom-react-scripts/customizers/webpack-loaders.js b/packages/react-scripts/config/custom-react-scripts/customizers/webpack-loaders.js new file mode 100644 index 00000000000..bbcfec1bfe1 --- /dev/null +++ b/packages/react-scripts/config/custom-react-scripts/customizers/webpack-loaders.js @@ -0,0 +1,32 @@ +const styleLoader = require('../webpack-config/style-loader'); +const sassLoader = require.resolve('sass-loader'); +const lessLoader = require.resolve('less-loader'); +const stylusLoader = require.resolve('stylus-loader'); + +module.exports = { + CSS: { + default: true, + get: styleLoader(undefined, /\.css$/, /\.module\.css$/), + }, + SASS: { + get: styleLoader(sassLoader, /\.s[ac]ss$/, /\.module\.s[ac]ss$/), + }, + LESS: { + get: styleLoader(lessLoader, /\.less$/, /\.module\.less$/), + }, + STYLUS: { + get: styleLoader(stylusLoader, /\.styl/, /\.module\.styl/), + }, + STYLUS_MODULES: { + get: styleLoader(stylusLoader, /\.module\.styl/, undefined, true), + }, + LESS_MODULES: { + get: styleLoader(lessLoader, /\.module\.less$/, undefined, true), + }, + SASS_MODULES: { + get: styleLoader(sassLoader, /\.module\.s[ac]ss$/, undefined, true), + }, + CSS_MODULES: { + get: styleLoader(undefined, /\.module\.css$/, undefined, true), + }, +}; diff --git a/packages/react-scripts/config/custom-react-scripts/customizers/webpack-plugins.js b/packages/react-scripts/config/custom-react-scripts/customizers/webpack-plugins.js new file mode 100644 index 00000000000..f053ebf7976 --- /dev/null +++ b/packages/react-scripts/config/custom-react-scripts/customizers/webpack-plugins.js @@ -0,0 +1 @@ +module.exports = {}; diff --git a/packages/react-scripts/config/custom-react-scripts/postcss-options.js b/packages/react-scripts/config/custom-react-scripts/postcss-options.js new file mode 100644 index 00000000000..07c1a1278e1 --- /dev/null +++ b/packages/react-scripts/config/custom-react-scripts/postcss-options.js @@ -0,0 +1,12 @@ +const autoprefixer = require('autoprefixer'); + +module.exports = { + ident: 'postcss', + plugins: () => [ + require('postcss-flexbugs-fixes'), + autoprefixer({ + browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9'], + flexbox: 'no-2009', + }), + ], +}; diff --git a/packages/react-scripts/config/custom-react-scripts/utils/map-object.js b/packages/react-scripts/config/custom-react-scripts/utils/map-object.js new file mode 100644 index 00000000000..c60b072a031 --- /dev/null +++ b/packages/react-scripts/config/custom-react-scripts/utils/map-object.js @@ -0,0 +1,13 @@ +module.exports = function mapObject(obj, fn, toArray) { + return Object.keys(obj).reduce(function(final, key) { + var result = fn(obj[key], key); + if (!result) { + return final; + } + if (toArray) { + final.push(result); + } + final[key] = result; + return final; + }, toArray ? [] : {}); +}; diff --git a/packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js b/packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js new file mode 100644 index 00000000000..27870e7cc39 --- /dev/null +++ b/packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js @@ -0,0 +1,74 @@ +const postCssOptions = require('../postcss-options'); +const ExtractTextPlugin = require('extract-text-webpack-plugin'); + +const paths = require('../../paths'); +const publicPath = paths.servedPath; +const shouldUseRelativeAssetPaths = publicPath === './'; +const cssFilename = 'static/css/[name].[contenthash:8].css'; + +const extractTextPluginOptions = shouldUseRelativeAssetPaths + ? // Making sure that the publicPath goes back to to build folder. + { publicPath: Array(cssFilename.split('/').length).join('../') } + : {}; + +module.exports = (loader, test, exclude, modules) => isDev => { + let loaders = isDev + ? [ + { + loader: require.resolve('style-loader'), + options: { sourceMap: true }, + }, + ] + : []; + + loaders = loaders.concat([ + { + loader: require.resolve('css-loader'), + options: Object.assign( + {}, + { importLoaders: 1 }, + modules === true + ? { + localIdentName: '[sha512:hash:base32]-[name]-[local]', + modules: true, + } + : {} + ), + }, + { + loader: require.resolve('postcss-loader'), + options: Object.assign({}, { sourceMap: isDev }, postCssOptions), + }, + ]); + + if (loader) { + loaders.push({ + loader, + options: { + sourceMap: isDev, + }, + }); + } + + if (isDev) { + return { + test, + exclude, + use: loaders, + }; + } + + return { + test, + exclude, + loader: ExtractTextPlugin.extract( + Object.assign( + { + fallback: require.resolve('style-loader'), + use: loaders, + }, + extractTextPluginOptions + ) + ), + }; +}; diff --git a/packages/react-scripts/config/customizers.js b/packages/react-scripts/config/customizers.js deleted file mode 100644 index 107c4b1f002..00000000000 --- a/packages/react-scripts/config/customizers.js +++ /dev/null @@ -1,70 +0,0 @@ -var ExtractTextPlugin = require('extract-text-webpack-plugin'); - -module.exports = { - 'BABEL_STAGE_0': { - toArray: 'presets', - getDev: function () { - return require.resolve('babel-preset-stage-0') - } - }, - 'DECORATORS': { - toArray: 'babelPlugins', - getDev: function () { - return require.resolve('babel-plugin-transform-decorators-legacy') - } - }, - 'SASS': { - toArray: 'loaders', - fileRegex: /\.(scss|sass)/, - getDev: function () { - return { - test: /(\.scss|\.sass)$/, - loader: "style!css!postcss!sass" - } - }, - getProd: function () { - return { - test: /(\.scss|\.sass)$/, - loader: ExtractTextPlugin.extract('style', 'css!postcss!sass') - } - } - }, - 'LESS': { - toArray: 'loaders', - fileRegex: /\.less$/, - getDev: function () { - return { - test: /\.less$/, - loader: "style!css!postcss!less" - } - }, - getProd: function () { - return { - test: /\.less/, - loader: ExtractTextPlugin.extract('style', 'css!postcss!less') - } - } - }, - 'STYLUS': { - toArray: 'loaders', - fileRegex: /\.styl$/, - getDev: function () { - return { - test: /\.styl/, - loader: 'style!css!postcss!stylus' - } - }, - getProd: function () { - return { - test: /\.styl/, - loader: ExtractTextPlugin.extract('style', 'css!postcss!stylus') - } - } - }, - 'CSS_MODULES': { - config: { - dev: 'style!css?modules&camelCase&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss', - prod: 'style!css?modules&camelCase&-autoprefixer&importLoaders=1!postcss' - } - } -} diff --git a/packages/react-scripts/config/get-custom-config.js b/packages/react-scripts/config/get-custom-config.js deleted file mode 100644 index 34cac14e696..00000000000 --- a/packages/react-scripts/config/get-custom-config.js +++ /dev/null @@ -1,38 +0,0 @@ -var customizers = require('./customizers'); - -function getCustomConfig(prod) { - var prod = prod || false; - var env = env || {}; - var result = Object - .keys(customizers) - .reduce(function (finalConfig, customizerKey) { - var customizer = customizers[customizerKey]; - if (customizer.prod === false && prod === true) { - return finalConfig; - } - - var envValue = process.env['REACT_APP_' + customizerKey]; - if (env && envValue && envValue !== 'false') { - if (customizer.toArray) { - var getCustomizer = (prod ? customizer.getProd : customizer.getDev) || customizer.getDev; - finalConfig[customizer.toArray].push(getCustomizer()); - } - if (customizer.fileRegex) { - finalConfig.excludedFilesRegex.push(customizer.fileRegex); - } - finalConfig.values[customizerKey] = customizer.config || true; - } - return finalConfig; - }, { - presets: [], - babelPlugins: [], - plugins: [], - loaders: [], - values: {}, - excludedFilesRegex: [] - }); - - return result; -} - -module.exports = getCustomConfig; \ No newline at end of file diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 253bc34f062..1b5b92a2b59 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -10,7 +10,6 @@ // @remove-on-eject-end 'use strict'; -const autoprefixer = require('autoprefixer'); const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); @@ -21,6 +20,7 @@ const eslintFormatter = require('react-dev-utils/eslintFormatter'); const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); const getClientEnvironment = require('./env'); const paths = require('./paths'); +const getCustomConfig = require('./custom-react-scripts/config'); // Webpack uses `publicPath` to determine where the app is being served from. // In development, we always serve from the root. This makes config easier. @@ -31,6 +31,8 @@ const publicPath = '/'; const publicUrl = ''; // Get environment variables to inject into our app. const env = getClientEnvironment(publicUrl); +//Get custom configuration for injecting plugins, presets and loaders +const customConfig = getCustomConfig(true); // This is the development configuration. // It is focused on developer experience and fast rebuilds. @@ -182,43 +184,7 @@ module.exports = { cacheDirectory: true, }, }, - // "postcss" loader applies autoprefixer to our CSS. - // "css" loader resolves paths in CSS and adds assets as dependencies. - // "style" loader turns CSS into JS modules that inject <style> tags. - // In production, we use a plugin to extract that CSS to a file, but - // in development "style" loader enables hot editing of CSS. - { - test: /\.css$/, - use: [ - require.resolve('style-loader'), - { - loader: require.resolve('css-loader'), - options: { - importLoaders: 1, - }, - }, - { - loader: require.resolve('postcss-loader'), - options: { - // Necessary for external CSS imports to work - // https://github.com/facebookincubator/create-react-app/issues/2677 - ident: 'postcss', - plugins: () => [ - require('postcss-flexbugs-fixes'), - autoprefixer({ - browsers: [ - '>1%', - 'last 4 versions', - 'Firefox ESR', - 'not ie < 9', // React doesn't support IE8 anyway - ], - flexbox: 'no-2009', - }), - ], - }, - }, - ], - }, + ...customConfig.webpackLoaders, // "file" loader makes sure those assets get served by WebpackDevServer. // When you `import` an asset, you get its (virtual) filename. // In production, they would get copied to the `build` folder. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 0077c34a3f6..c26e73a8a2b 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -10,7 +10,6 @@ // @remove-on-eject-end 'use strict'; -const autoprefixer = require('autoprefixer'); const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); @@ -22,19 +21,19 @@ const eslintFormatter = require('react-dev-utils/eslintFormatter'); const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); const paths = require('./paths'); const getClientEnvironment = require('./env'); +const getCustomConfig = require('./custom-react-scripts/config'); // Webpack uses `publicPath` to determine where the app is being served from. // It requires a trailing slash, or the file assets will get an incorrect path. const publicPath = paths.servedPath; -// Some apps do not use client-side routing with pushState. -// For these, "homepage" can be set to "." to enable relative asset paths. -const shouldUseRelativeAssetPaths = publicPath === './'; // `publicUrl` is just like `publicPath`, but we will provide it to our app // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz. const publicUrl = publicPath.slice(0, -1); // Get environment variables to inject into our app. const env = getClientEnvironment(publicUrl); +//Get custom configuration for injecting plugins, presets and loaders +const customConfig = getCustomConfig(false); // Assert this just to be safe. // Development builds of React are slow and not intended for production. @@ -45,15 +44,6 @@ if (env.stringified['process.env'].NODE_ENV !== '"production"') { // Note: defined here because it will be used more than once. const cssFilename = 'static/css/[name].[contenthash:8].css'; -// ExtractTextPlugin expects the build output to be flat. -// (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27) -// However, our output is structured with css, js and media folders. -// To have this structure working with relative paths, we have to use custom options. -const extractTextPluginOptions = shouldUseRelativeAssetPaths - ? // Making sure that the publicPath goes back to to build folder. - { publicPath: Array(cssFilename.split('/').length).join('../') } - : {}; - // This is the production configuration. // It compiles slowly and is focused on producing a fast and minimal bundle. // The development configuration is different and lives in a separate file. @@ -180,60 +170,7 @@ module.exports = { compact: true, }, }, - // The notation here is somewhat confusing. - // "postcss" loader applies autoprefixer to our CSS. - // "css" loader resolves paths in CSS and adds assets as dependencies. - // "style" loader normally turns CSS into JS modules injecting <style>, - // but unlike in development configuration, we do something different. - // `ExtractTextPlugin` first applies the "postcss" and "css" loaders - // (second argument), then grabs the result CSS and puts it into a - // separate file in our build process. This way we actually ship - // a single CSS file in production instead of JS code injecting <style> - // tags. If you use code splitting, however, any async bundles will still - // use the "style" loader inside the async code so CSS from them won't be - // in the main CSS file. - { - test: /\.css$/, - loader: ExtractTextPlugin.extract( - Object.assign( - { - fallback: require.resolve('style-loader'), - use: [ - { - loader: require.resolve('css-loader'), - options: { - importLoaders: 1, - minimize: true, - sourceMap: true, - }, - }, - { - loader: require.resolve('postcss-loader'), - options: { - // Necessary for external CSS imports to work - // https://github.com/facebookincubator/create-react-app/issues/2677 - ident: 'postcss', - plugins: () => [ - require('postcss-flexbugs-fixes'), - autoprefixer({ - browsers: [ - '>1%', - 'last 4 versions', - 'Firefox ESR', - 'not ie < 9', // React doesn't support IE8 anyway - ], - flexbox: 'no-2009', - }), - ], - }, - }, - ], - }, - extractTextPluginOptions - ) - ), - // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. - }, + ...customConfig.webpackLoaders, // "file" loader makes sure assets end up in the `build` folder. // When you `import` an asset, you get its filename. // This loader don't uses a "test" so it will catch all modules diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 6ea3873c7b6..8a70308157b 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -44,13 +44,19 @@ "fs-extra": "3.0.1", "html-webpack-plugin": "2.29.0", "jest": "20.0.4", + "less": "^2.7.2", + "less-loader": "^4.0.5", + "node-sass": "^4.5.3", "object-assign": "4.1.1", "postcss-flexbugs-fixes": "3.0.0", "postcss-loader": "2.0.6", "promise": "7.1.1", "react-dev-utils": "^3.0.2", "react-error-overlay": "^1.0.9", + "sass-loader": "^6.0.6", "style-loader": "0.18.2", + "stylus": "^0.54.5", + "stylus-loader": "^3.0.1", "sw-precache-webpack-plugin": "0.11.3", "url-loader": "0.5.9", "webpack": "2.6.1", diff --git a/packages/react-scripts/template/.env b/packages/react-scripts/template/.env index c843f48f93d..c3638a3d523 100644 --- a/packages/react-scripts/template/.env +++ b/packages/react-scripts/template/.env @@ -1,4 +1,8 @@ REACT_APP_SASS=true REACT_APP_LESS=true REACT_APP_STYLUS=true + REACT_APP_CSS_MODULES=true +REACT_APP_SASS_MODULES=true +REACT_APP_STYLUS_MODULES=true +REACT_APP_LESS_MODULES=true \ No newline at end of file diff --git a/packages/react-scripts/template/src/App.css b/packages/react-scripts/template/src/App.css index 15adfdc710c..24e2c12596b 100755 --- a/packages/react-scripts/template/src/App.css +++ b/packages/react-scripts/template/src/App.css @@ -7,13 +7,6 @@ height: 80px; } -.App-header { - background-color: #222; - height: 150px; - padding: 20px; - color: white; -} - .App-intro { font-size: large; } diff --git a/packages/react-scripts/template/src/App.js b/packages/react-scripts/template/src/App.js index f10f59d1eb5..a42da8deaaf 100644 --- a/packages/react-scripts/template/src/App.js +++ b/packages/react-scripts/template/src/App.js @@ -1,31 +1,46 @@ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import logo from './logo.svg'; +//components +import Emoji from './Emoji'; + //styles -import './App.less'; import './App.scss'; +import './App.less'; import './App.styl'; -import styles from './Modules.css'; + +//modules +import cssStyles from './First.module.css'; +import sassStyles from './Second.module.scss'; +import lessStyles from './Third.module.less'; +import stylusStyles from './Fourth.module.styl'; class App extends Component { render() { return ( <div className="App"> - <div className="App-header"> - <img src={logo} className="App-logo" alt="logo"/> - <h2 className="App-title"> โ˜ข custom-react-scripts โ˜ข </h2> - <div className="App-subtitle"> allow custom config for create-react-app without ejecting</div> + <div className={cssStyles.header}> + <img src={logo} className="App-logo" alt="logo" /> + <h2 className="App-title"> + <Emoji label="danger" emoji="โ˜ข" /> + <span> custom-react-scripts </span> + <Emoji label="danger" emoji="โ˜ข" /> + </h2> + <div className="App-subtitle"> + allow custom config for create-react-app without ejecting + </div> </div> - <div className={styles.description}> - - <div className={styles.command}> - <code>create-react-app my-app --scripts-version custom-react-scripts</code> + <div className={stylusStyles.description}> + <div className={sassStyles.command}> + <code> + create-react-app my-app --scripts-version custom-react-scripts + </code> </div> - <p> If you want to enable/disable certain features just modify the <b>.env</b> file in the root directory of - the - project. + <p> + If you want to enable/disable certain features just modify the + <b> .env</b> file in the root directory of the project. </p> <b> Styling </b> @@ -46,16 +61,21 @@ class App extends Component { <code>REACT_APP_CSS_MODULES=true</code> <span>- Enable CSS modules </span> </li> + <li> + <code>REACT_APP_SASS_MODULES=true</code> + <span>- Enable Sass modules </span> + </li> + <li> + <code>REACT_APP_SASS_MODULES=true</code> + <span>- Enable Stylus modules </span> + </li> + <li> + <code>REACT_APP_SASS_MODULES=true</code> + <span>- Enable Less modules </span> + </li> </ul> - <b> โš ๏ธ Babel </b> - - <div className={styles.warning}> - (Please note that these features are highly experimental (especially stage-0) and still not a part of the ES - specification. <br/> - Use them at - your own risk of breaking backwards compatibility if they don't make the final version of the spec.) - </div> + <b>Babel</b> <ul className="configs babel-configs"> <li> @@ -74,20 +94,21 @@ class App extends Component { <code>PORT=3015</code> <span>- change default port (supported in CRA by default)</span> </li> - <li> - <code>OPEN_BROWSER=false</code> - <span>- don't open browser after running webpack server</span> - </li> </ul> - <br/> - <br/> - <a target="_blank" className={styles.readmeLink} href="https://github.com/kitze/create-react-app/tree/master/packages/react-scripts"> + <br /> + <br /> + <a + target="_blank" + rel="noopener noreferrer" + className={lessStyles.readmeLink} + href="https://github.com/kitze/create-react-app/tree/master/packages/react-scripts" + > Link to full README.md </a> </div> </div> - ) + ); } } diff --git a/packages/react-scripts/template/src/App.scss b/packages/react-scripts/template/src/App.scss index 49111cc943d..1348208d060 100644 --- a/packages/react-scripts/template/src/App.scss +++ b/packages/react-scripts/template/src/App.scss @@ -1,17 +1,3 @@ -.App { - &-header { - background-color: #222; - height: 180px; - padding: 20px; - color: white; - text-align: center; - } - - &-intro { - font-size: large; - } -} - .configs { li { margin: 15px 0px; diff --git a/packages/react-scripts/template/src/Emoji.js b/packages/react-scripts/template/src/Emoji.js new file mode 100644 index 00000000000..44139953562 --- /dev/null +++ b/packages/react-scripts/template/src/Emoji.js @@ -0,0 +1,6 @@ +import React from 'react'; + +export default ({ emoji, label }) => + <span aria-label={label} role="img"> + {emoji} + </span>; diff --git a/packages/react-scripts/template/src/First.module.css b/packages/react-scripts/template/src/First.module.css new file mode 100644 index 00000000000..5ed303f6846 --- /dev/null +++ b/packages/react-scripts/template/src/First.module.css @@ -0,0 +1,7 @@ +.header { + background-color: #222; + height: 180px; + padding: 20px; + color: white; + text-align: center; +} \ No newline at end of file diff --git a/packages/react-scripts/template/src/Fourth.module.styl b/packages/react-scripts/template/src/Fourth.module.styl new file mode 100644 index 00000000000..cdbf8250c29 --- /dev/null +++ b/packages/react-scripts/template/src/Fourth.module.styl @@ -0,0 +1,2 @@ +.description + padding 20px \ No newline at end of file diff --git a/packages/react-scripts/template/src/Modules.css b/packages/react-scripts/template/src/Modules.css deleted file mode 100644 index 298148c356d..00000000000 --- a/packages/react-scripts/template/src/Modules.css +++ /dev/null @@ -1,34 +0,0 @@ -.appIntro { - font-size: large; -} - -.code { - color: red; - font-weight: bold; - justify-content: center; -} - -.description { - padding: 20px; -} - -.warning { - margin: 10px 0; - font-size: 14px; - line-height: 20px; - font-weight: 100; - color: #e68484; -} - -.command { - margin: 40px 0px 50px 0; -} - -.readmeLink { - font-size: 18px; -} - -.experimental { - font-size: 12px; - font-weight: 100; -} \ No newline at end of file diff --git a/packages/react-scripts/template/src/Second.module.scss b/packages/react-scripts/template/src/Second.module.scss new file mode 100644 index 00000000000..7c7e2ecfa39 --- /dev/null +++ b/packages/react-scripts/template/src/Second.module.scss @@ -0,0 +1,3 @@ +.command { + margin: 40px 0px 50px 0; +} \ No newline at end of file diff --git a/packages/react-scripts/template/src/Third.module.less b/packages/react-scripts/template/src/Third.module.less new file mode 100644 index 00000000000..e45874e7d88 --- /dev/null +++ b/packages/react-scripts/template/src/Third.module.less @@ -0,0 +1,3 @@ +.readmeLink { + font-size: 18px; +} \ No newline at end of file From a9484c5d78e541598c785b1ef0623602dc63d397 Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Thu, 10 Aug 2017 10:26:47 +0200 Subject: [PATCH 097/140] fix readme --- README.md | 285 +++--------------- README_BACKUP.md | 230 -------------- packages/react-scripts/README.md | 72 ++++- packages/react-scripts/README_BACKUP.md | 65 ---- .../webpack-config/style-loader.js | 25 +- .../config/webpack.config.dev.js | 5 +- .../config/webpack.config.prod.js | 5 +- packages/react-scripts/template/.env | 17 +- packages/react-scripts/template/src/App.js | 8 - 9 files changed, 143 insertions(+), 569 deletions(-) delete mode 100644 README_BACKUP.md delete mode 100644 packages/react-scripts/README_BACKUP.md diff --git a/README.md b/README.md index 8f38e73c7d1..67ab983bd45 100644 --- a/README.md +++ b/README.md @@ -1,258 +1,69 @@ -# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) +# โ˜ข custom-react-scripts โ˜ข +Latest version of original react-scripts: **1.0.11** -Create React apps with no build configuration. +### โš ๏ธ Disclaimer: +> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. -* [Getting Started](#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. +The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). -Create React App works on macOS, Windows, and Linux.<br> -If something doesnโ€™t work please [file an issue](https://github.com/facebookincubator/create-react-app/issues/new). +### ๐Ÿ’กFeatures: +* Decorators +* babel-preset-stage-0 +* Less +* Sass +* CSS modules +* Sass modules +* Less modules +* Stylus modules -## Quick Overview +**the features are optional and can be turned on/off individually* -```sh -npm install -g create-react-app +### โ”How to use it +```create-react-app my-app --scripts-version custom-react-scripts``` -create-react-app my-app -cd my-app/ -npm start -``` +Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. -Then open [http://localhost:3000/](http://localhost:3000/) to see your app.<br> -When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. +The generated project comes with every option turned on by default, but you can remove them at any time by removing the options from the ```.env``` file. -<img src='https://camo.githubusercontent.com/506a5a0a33aebed2bf0d24d3999af7f582b31808/687474703a2f2f692e696d6775722e636f6d2f616d794e66434e2e706e67' width='600' alt='npm start'> +### ๐Ÿ“ Configuration options -### Get Started Immediately +#### Styling +- ```REACT_APP_SASS=true``` - enable SASS support +- ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_STYLUS=true``` - enable Stylus support +- ```REACT_APP_CSS_MODULES``` - enable CSS modules +- ```REACT_APP_SASS_MODULES``` - enable Sass modules +- ```REACT_APP_LESS_MODULES``` - enable Less modules +- ```REACT_APP_STYLUS_MODULES``` - enable Stylus modules -You **donโ€™t** need to install or configure tools like Webpack or Babel.<br> -They are preconfigured and hidden so that you can focus on the code. +Note: to use modules the file must be named in the following format: ```$name.module.$preprocessorName```. -Just create a project, and youโ€™re good to go. +For example ```styles.module.css``` or ```header.module.sass``` or ```footer.module.less```, etc. Files that are not prefixed with module will be parsed normally. -## Getting Started +#### Babel +- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset +- ```REACT_APP_DECORATORS=true``` - enable decorators support -### Installation +In order to use css,sass,less, or stylus modules, the file name must ends with .modules.css +### ๐Ÿค” Why? +The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: -Install it once globally: +* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. +* It's hard to maintain code for all of these custom configurations that people want to use. -```sh -npm install -g create-react-app -``` +But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. -**Youโ€™ll need to have Node >= 6 on your machine**. You can use [nvm](https://github.com/creationix/nvm#installation) to easily switch Node versions between different projects. +So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. -**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for Create React App itself. +### How does it work? +The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. -### Creating an App +From the original readme: +> To define permanent environment vairables, create a file called .env in the root of your project: +> ```REACT_APP_SECRET_CODE=abcdef``` -To create a new app, run: +I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. -```sh -create-react-app my-app -cd my-app -``` +### Future plans -It will create a directory called `my-app` inside the current folder.<br> -Inside that directory, it will generate the initial project structure and install the transitive dependencies: - -``` -my-app -โ”œโ”€โ”€ README.md -โ”œโ”€โ”€ node_modules -โ”œโ”€โ”€ package.json -โ”œโ”€โ”€ .gitignore -โ”œโ”€โ”€ public -โ”‚ โ””โ”€โ”€ favicon.ico -โ”‚ โ””โ”€โ”€ index.html -โ”‚ โ””โ”€โ”€ manifest.json -โ””โ”€โ”€ src - โ””โ”€โ”€ App.css - โ””โ”€โ”€ App.js - โ””โ”€โ”€ App.test.js - โ””โ”€โ”€ index.css - โ””โ”€โ”€ index.js - โ””โ”€โ”€ logo.svg - โ””โ”€โ”€ registerServiceWorker.js -``` - -No configuration or complicated folder structures, just the files you need to build your app.<br> -Once the installation is done, you can run some commands inside the project folder: - -### `npm start` or `yarn start` - -Runs the app in development mode.<br> -Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.<br> -You will see the build errors and lint warnings in the console. - -<img src='https://camo.githubusercontent.com/41678b3254cf583d3186c365528553c7ada53c6e/687474703a2f2f692e696d6775722e636f6d2f466e4c566677362e706e67' width='600' alt='Build errors'> - -### `npm test` or `yarn test` - -Runs the test watcher in an interactive mode.<br> -By default, runs tests related to files changed since the last commit. - -[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) - -### `npm run build` or `yarn build` - -Builds the app for production to the `build` folder.<br> -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.<br> -By default, it also [includes a service worker](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) so that your app loads from local cache on future visits. - -Your app is ready to be deployed. - -## User Guide - -The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: - -- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) -- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) -- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) -- [Supported Language Features and Polyfills](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#supported-language-features-and-polyfills) -- [Syntax Highlighting in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#syntax-highlighting-in-the-editor) -- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) -- [Formatting Code Automatically](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#formatting-code-automatically) -- [Debugging in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#debugging-in-the-editor) -- [Changing the Page `<title>`](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#changing-the-page-title) -- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) -- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) -- [Code Splitting](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) -- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) -- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) -- [Adding a CSS Preprocessor (Sass, Less etc.)](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc) -- [Adding Images, Fonts, and Files](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-fonts-and-files) -- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) -- [Using Global Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-global-variables) -- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) -- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) -- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) -- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) -- [Integrating with an API Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-an-api-backend) -- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) -- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) -- [Generating Dynamic `<meta>` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) -- [Pre-Rendering into Static HTML Files](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#pre-rendering-into-static-html-files) -- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) -- [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation) -- [Making a Progressive Web App](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) -- [Analyzing the Bundle Size](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#analyzing-the-bundle-size) -- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) -- [Advanced Configuration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration) -- [Troubleshooting](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#troubleshooting) - -A copy of the user guide will be created as `README.md` in your project folder. - -## How to Update to New Versions? - -Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) for this and other information. - -## Philosophy - -* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. - -* **No Configuration Required:** You don't need to configure anything. Reasonably good configuration of both development and production builds is handled for you so you can focus on writing code. - -* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. - -## Why Use This? - -**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: - -* React, JSX, ES6, and Flow syntax support. -* Language extras beyond ES6 like the object spread operator. -* A dev server that lints for common errors. -* Import CSS and image files directly from JavaScript. -* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. -* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. -* An offline-first [service worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) and a [web app manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/), meeting all the [Progressive Web App](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) criteria. - -**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. - -**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. - -### Converting to a Custom Setup - -**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. - -Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. - -**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** - -You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. - -## Limitations - -Some features are currently **not supported**: - -* Server rendering. -* Some experimental syntax extensions (e.g. decorators). -* CSS Modules. -* Importing LESS or Sass directly ([but you still can use them](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc)). -* Hot reloading of components. - -Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. - -## Whatโ€™s Inside? - -The tools used by Create React App are subject to change. -Currently it is a thin layer on top of many amazing community projects, such as: - -* [webpack](https://webpack.js.org/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) -* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) -* [Autoprefixer](https://github.com/postcss/autoprefixer) -* [ESLint](http://eslint.org/) -* [Jest](http://facebook.github.io/jest) -* and others. - -All of them are transitive dependencies of the provided npm package. - -## Contributing - -We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. - -## React Native - -Looking for something similar, but for React Native?<br> -Check out [Create React Native App](https://github.com/react-community/create-react-native-app/). - -## Acknowledgements - -We are grateful to the authors of existing related projects for their ideas and collaboration: - -* [@eanplatter](https://github.com/eanplatter) -* [@insin](https://github.com/insin) -* [@mxstbr](https://github.com/mxstbr) - -## Alternatives - -If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs.<br> -Some of the more popular and actively maintained ones are: - -* [insin/nwb](https://github.com/insin/nwb) -* [mozilla-neutrino/neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) -* [jaredpalmer/razzle](https://github.com/jaredpalmer/razzle) -* [NYTimes/kyt](https://github.com/NYTimes/kyt) -* [zeit/next.js](https://github.com/zeit/next.js) -* [gatsbyjs/gatsby](https://github.com/gatsbyjs/gatsby) -* [electrode-io/electrode](https://github.com/electrode-io/electrode) - -Notable alternatives also include: - -* [enclave](https://github.com/eanplatter/enclave) -* [motion](https://github.com/steelbrain/pundle/tree/master/packages/motion) -* [quik](https://github.com/satya164/quik) -* [sagui](https://github.com/saguijs/sagui) -* [roc](https://github.com/rocjs/roc) -* [aik](https://github.com/d4rkr00t/aik) -* [react-app](https://github.com/kriasoft/react-app) -* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) -* [sku](https://github.com/seek-oss/sku) -* [gluestick](https://github.com/TrueCar/gluestick) - -You can also use module bundlers like [webpack](http://webpack.js.org) and [Browserify](http://browserify.org/) directly.<br> -React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. \ No newline at end of file diff --git a/README_BACKUP.md b/README_BACKUP.md deleted file mode 100644 index 85a23174d2b..00000000000 --- a/README_BACKUP.md +++ /dev/null @@ -1,230 +0,0 @@ -# Create React App [![Build Status](https://travis-ci.org/facebookincubator/create-react-app.svg?branch=master)](https://travis-ci.org/facebookincubator/create-react-app) - -Create React apps with no build configuration. - -* [Getting Started](#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. - -## tl;dr - -```sh -npm install -g create-react-app - -create-react-app my-app -cd my-app/ -npm start - -``` - -Then open [http://localhost:3000/](http://localhost:3000/) to see your app.<br> -When youโ€™re ready to deploy to production, create a minified bundle with `npm run build`. - -<img src='https://camo.githubusercontent.com/506a5a0a33aebed2bf0d24d3999af7f582b31808/687474703a2f2f692e696d6775722e636f6d2f616d794e66434e2e706e67' width='600' alt='npm start'> - -## Getting Started - -### Installation - -Install it once globally: - -```sh -npm install -g create-react-app -``` - -**Youโ€™ll need to have Node >= 4 on your machine**. - -**We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. - -**This tool doesnโ€™t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. - -### Creating an App - -To create a new app, run: - -```sh -create-react-app my-app -cd my-app -``` - -It will create a directory called `my-app` inside the current folder.<br> -Inside that directory, it will generate the initial project structure and install the transitive dependencies: - -``` -my-app/ - README.md - node_modules/ - package.json - .gitignore - public/ - favicon.ico - index.html - src/ - App.css - App.js - App.test.js - index.css - index.js - logo.svg -``` - -No configuration or complicated folder structures, just the files you need to build your app.<br> -Once the installation is done, you can run some commands inside the project folder: - -### `npm start` - -Runs the app in development mode.<br> -Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.<br> -You will see the build errors and lint warnings in the console. - -<img src='https://camo.githubusercontent.com/41678b3254cf583d3186c365528553c7ada53c6e/687474703a2f2f692e696d6775722e636f6d2f466e4c566677362e706e67' width='600' alt='Build errors'> - -### `npm test` - -Runs the test watcher in an interactive mode.<br> -By default, runs tests related to files changes since the last commit. - -[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) - -### `npm run build` - -Builds the app for production to the `build` folder.<br> -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.<br> -Your app is ready to be deployed! - -## User Guide - -The [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) includes information on different topics, such as: - -- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) -- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) -- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) -- [Syntax Highlighting in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#syntax-highlighting-in-the-editor) -- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) -- [Changing the Page `<title>`](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#changing-the-page-title) -- [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) -- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) -- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet) -- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css) -- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts) -- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder) -- [Using Global Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-global-variables) -- [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) -- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) -- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) -- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) -- [Integrating with an API Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-an-api-backend) -- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) -- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) -- [Generating Dynamic `<meta>` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) -- [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) -- [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation) -- [Making a Progressive Web App](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) -- [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) -- [Troubleshooting](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#troubleshooting) - -A copy of the user guide will be created as `README.md` in your project folder. - -## How to Update to New Versions? - -Please refer to the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) for this and other information. - -## Philosophy - -* **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. - -* **Convention over Configuration:** You don't need to configure anything by default. Reasonably good configuration of both development and production builds is handled for you so you can focus on writing code. - -* **No Lock-In:** You can โ€œejectโ€ to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. - -## Why Use This? - -**If youโ€™re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: - -* React, JSX, ES6, and Flow syntax support. -* Language extras beyond ES6 like the object spread operator. -* A dev server that lints for common errors. -* Import CSS and image files directly from JavaScript. -* Autoprefixed CSS, so you donโ€™t need `-webkit` or other prefixes. -* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. - -**The feature set is intentionally limited**. It doesnโ€™t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. - -**You donโ€™t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. Weโ€™ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. - -### Converting to a Custom Setup - -**If youโ€™re a power user** and you arenโ€™t happy with the default configuration, you can โ€œejectโ€ from the tool and use it as a boilerplate generator. - -Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, youโ€™re on your own. - -**Note: this is a one-way operation. Once you `eject`, you canโ€™t go back!** - -You donโ€™t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnโ€™t feel obligated to use this feature. However we understand that this tool wouldnโ€™t be useful if you couldnโ€™t customize it when you are ready for it. - -## Limitations - -Some features are currently **not supported**: - -* Server rendering. -* Some experimental syntax extensions (e.g. decorators). -* CSS Modules. -* LESS or Sass. -* Hot reloading of components. - -Some of them might get added in the future if they are stable, are useful to majority of React apps, donโ€™t conflict with existing tools, and donโ€™t introduce additional configuration. - -## Whatโ€™s Inside? - -The tools used by Create React App are subject to change. -Currently it is a thin layer on top of many amazing community projects, such as: - -* [webpack](https://webpack.github.io/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) -* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) -* [Autoprefixer](https://github.com/postcss/autoprefixer) -* [ESLint](http://eslint.org/) -* [Jest](http://facebook.github.io/jest) -* and others. - -All of them are transitive dependencies of the provided npm package. - -## Contributing - -We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. - -## Acknowledgements - -We are grateful to the authors of existing related projects for their ideas and collaboration: - -* [@eanplatter](https://github.com/eanplatter) -* [@insin](https://github.com/insin) -* [@mxstbr](https://github.com/mxstbr) - -## Alternatives - -If you donโ€™t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs.<br> -Some of the more popular and actively maintained ones are: - -* [insin/nwb](https://github.com/insin/nwb) -* [mozilla/neo](https://github.com/mozilla/neo) -* [NYTimes/kyt](https://github.com/NYTimes/kyt) -* [zeit/next.js](https://github.com/zeit/next.js) -* [gatsbyjs/gatsby](https://github.com/gatsbyjs/gatsby) - -Notable alternatives also include: - -* [enclave](https://github.com/eanplatter/enclave) -* [motion](https://github.com/motion/motion) -* [quik](https://github.com/satya164/quik) -* [sagui](https://github.com/saguijs/sagui) -* [roc](https://github.com/rocjs/roc) -* [aik](https://github.com/d4rkr00t/aik) -* [react-app](https://github.com/kriasoft/react-app) -* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) -* [tarec](https://github.com/geowarin/tarec) - -You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.<br> -React documentation includes [a walkthrough](https://facebook.github.io/react/docs/package-management.html) on this topic. diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index 8004b887004..67ab983bd45 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -1,7 +1,69 @@ -# react-scripts +# โ˜ข custom-react-scripts โ˜ข +Latest version of original react-scripts: **1.0.11** -This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app).<br> -Please refer to its documentation: +### โš ๏ธ Disclaimer: +> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. -* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) โ€“ How to create a new app. -* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) โ€“ How to develop apps bootstrapped with Create React App. +The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). + +### ๐Ÿ’กFeatures: +* Decorators +* babel-preset-stage-0 +* Less +* Sass +* CSS modules +* Sass modules +* Less modules +* Stylus modules + +**the features are optional and can be turned on/off individually* + +### โ”How to use it +```create-react-app my-app --scripts-version custom-react-scripts``` + +Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. + +The generated project comes with every option turned on by default, but you can remove them at any time by removing the options from the ```.env``` file. + +### ๐Ÿ“ Configuration options + +#### Styling +- ```REACT_APP_SASS=true``` - enable SASS support +- ```REACT_APP_LESS=true``` - enable LESS support +- ```REACT_APP_STYLUS=true``` - enable Stylus support +- ```REACT_APP_CSS_MODULES``` - enable CSS modules +- ```REACT_APP_SASS_MODULES``` - enable Sass modules +- ```REACT_APP_LESS_MODULES``` - enable Less modules +- ```REACT_APP_STYLUS_MODULES``` - enable Stylus modules + +Note: to use modules the file must be named in the following format: ```$name.module.$preprocessorName```. + +For example ```styles.module.css``` or ```header.module.sass``` or ```footer.module.less```, etc. Files that are not prefixed with module will be parsed normally. + +#### Babel +- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset +- ```REACT_APP_DECORATORS=true``` - enable decorators support + +In order to use css,sass,less, or stylus modules, the file name must ends with .modules.css +### ๐Ÿค” Why? +The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: + +* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. +* It's hard to maintain code for all of these custom configurations that people want to use. + +But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. + +So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. + +### How does it work? +The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. + +From the original readme: +> To define permanent environment vairables, create a file called .env in the root of your project: +> ```REACT_APP_SECRET_CODE=abcdef``` + +I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. + +### Future plans + +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. \ No newline at end of file diff --git a/packages/react-scripts/README_BACKUP.md b/packages/react-scripts/README_BACKUP.md deleted file mode 100644 index 1776dce86cf..00000000000 --- a/packages/react-scripts/README_BACKUP.md +++ /dev/null @@ -1,65 +0,0 @@ -# โ˜ข custom-react-scripts โ˜ข -Latest version of original react-scripts: **0.8.4** - -### โš ๏ธ Disclaimer: -> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features. - -The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). - -### ๐Ÿ’กFeatures: -* Decorators -* babel-preset-stage-0 -* LESS -* SASS -* CSS modules - -**the features are optional and can be turned on/off individually* - -### โ”How to use it -```create-react-app my-app --scripts-version custom-react-scripts``` - -Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. - -The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. - -### ๐Ÿ“ Configuration options - -#### Styling -- ```REACT_APP_SASS=true``` - enable SASS support -- ```REACT_APP_LESS=true``` - enable LESS support -- ```REACT_APP_STYLUS=true``` - enable Stylus support -- ```REACT_APP_CSS_MODULES``` - enable CSS modules - -#### Babel -- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset -- ```REACT_APP_DECORATORS=true``` - enable decorators support - -> โš ๏ธ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. -> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. - -#### Others -- ```PORT=3015``` - change default port (supported in CRA by default) -- ```OPEN_BROWSER=false``` - don't open browser after running webpack server - -### ๐Ÿค” Why? -The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: - -* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. -* It's hard to maintain code for all of these custom configurations that people want to use. - -But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. - -So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. - -### How does it work? -The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. - -From the original readme: -> To define permanent environment vairables, create a file called .env in the root of your project: -> REACT_APP_SECRET_CODE=abcdef - -I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. - -### Future plans - -I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. diff --git a/packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js b/packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js index 27870e7cc39..7530da206ec 100644 --- a/packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js +++ b/packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js @@ -1,22 +1,13 @@ -const postCssOptions = require('../postcss-options'); +const postCssOptions = require('../options/postcss-options'); +const extractTextPluginOptions = require('../options/extract-text-plugin-options'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); - -const paths = require('../../paths'); -const publicPath = paths.servedPath; -const shouldUseRelativeAssetPaths = publicPath === './'; -const cssFilename = 'static/css/[name].[contenthash:8].css'; - -const extractTextPluginOptions = shouldUseRelativeAssetPaths - ? // Making sure that the publicPath goes back to to build folder. - { publicPath: Array(cssFilename.split('/').length).join('../') } - : {}; +const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; module.exports = (loader, test, exclude, modules) => isDev => { let loaders = isDev ? [ { loader: require.resolve('style-loader'), - options: { sourceMap: true }, }, ] : []; @@ -25,7 +16,7 @@ module.exports = (loader, test, exclude, modules) => isDev => { { loader: require.resolve('css-loader'), options: Object.assign( - {}, + { minimize: !isDev, sourceMap: shouldUseSourceMap }, { importLoaders: 1 }, modules === true ? { @@ -37,7 +28,11 @@ module.exports = (loader, test, exclude, modules) => isDev => { }, { loader: require.resolve('postcss-loader'), - options: Object.assign({}, { sourceMap: isDev }, postCssOptions), + options: Object.assign( + {}, + { sourceMap: shouldUseSourceMap }, + postCssOptions + ), }, ]); @@ -45,7 +40,7 @@ module.exports = (loader, test, exclude, modules) => isDev => { loaders.push({ loader, options: { - sourceMap: isDev, + sourceMap: shouldUseSourceMap, }, }); } diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index e9dc34ab8c4..dd1e1a5a1de 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -176,7 +176,10 @@ module.exports = { options: { // @remove-on-eject-begin babelrc: false, - presets: [require.resolve('babel-preset-react-app')], + presets: [require.resolve('babel-preset-react-app')].concat( + customConfig.babelPresets + ), + plugins: customConfig.babelPlugins, // @remove-on-eject-end // This is a feature of `babel-loader` for webpack (not Babel itself). // It enables caching results in ./node_modules/.cache/babel-loader/ diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 5187bf55613..c49162b2969 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -167,7 +167,10 @@ module.exports = { options: { // @remove-on-eject-begin babelrc: false, - presets: [require.resolve('babel-preset-react-app')], + presets: [require.resolve('babel-preset-react-app')].concat( + customConfig.babelPresets + ), + plugins: customConfig.babelPlugins, // @remove-on-eject-end compact: true, }, diff --git a/packages/react-scripts/template/.env b/packages/react-scripts/template/.env index c3638a3d523..0615dc05420 100644 --- a/packages/react-scripts/template/.env +++ b/packages/react-scripts/template/.env @@ -1,8 +1,11 @@ -REACT_APP_SASS=true -REACT_APP_LESS=true -REACT_APP_STYLUS=true +REACT_APP_DECORATORS = true; +REACT_APP_BABEL_STAGE_0 = true; -REACT_APP_CSS_MODULES=true -REACT_APP_SASS_MODULES=true -REACT_APP_STYLUS_MODULES=true -REACT_APP_LESS_MODULES=true \ No newline at end of file +REACT_APP_SASS = true; +REACT_APP_LESS = true; +REACT_APP_STYLUS = true; + +REACT_APP_CSS_MODULES = true; +REACT_APP_SASS_MODULES = true; +REACT_APP_STYLUS_MODULES = true; +REACT_APP_LESS_MODULES = true; diff --git a/packages/react-scripts/template/src/App.js b/packages/react-scripts/template/src/App.js index a42da8deaaf..c718187bdb4 100644 --- a/packages/react-scripts/template/src/App.js +++ b/packages/react-scripts/template/src/App.js @@ -88,14 +88,6 @@ class App extends Component { </li> </ul> - <b> Others </b> - <ul className="configs style-configs"> - <li> - <code>PORT=3015</code> - <span>- change default port (supported in CRA by default)</span> - </li> - </ul> - <br /> <br /> <a From 8b2115ea6b01109ba1d1a5969efa614efef0e481 Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Thu, 10 Aug 2017 10:43:20 +0200 Subject: [PATCH 098/140] formatting From 6f7b16ab7e3ed4fa0f75830917f9b2c3f68a13d0 Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Thu, 10 Aug 2017 10:44:34 +0200 Subject: [PATCH 099/140] fix readmes --- README.md | 1 - packages/react-scripts/README.md | 1 - 2 files changed, 2 deletions(-) diff --git a/README.md b/README.md index 67ab983bd45..f0dd7740e07 100644 --- a/README.md +++ b/README.md @@ -44,7 +44,6 @@ For example ```styles.module.css``` or ```header.module.sass``` or ```footer.mod - ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset - ```REACT_APP_DECORATORS=true``` - enable decorators support -In order to use css,sass,less, or stylus modules, the file name must ends with .modules.css ### ๐Ÿค” Why? The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index 67ab983bd45..f0dd7740e07 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -44,7 +44,6 @@ For example ```styles.module.css``` or ```header.module.sass``` or ```footer.mod - ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset - ```REACT_APP_DECORATORS=true``` - enable decorators support -In order to use css,sass,less, or stylus modules, the file name must ends with .modules.css ### ๐Ÿค” Why? The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: From 9943105a56aa7069d83d41148df28b2a58aaea41 Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Thu, 10 Aug 2017 10:57:39 +0200 Subject: [PATCH 100/140] Publish - react-scripts@1.0.0 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 2bb17139426..7c265a86f22 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "react-scripts", - "version": "1.0.11", + "version": "1.0.0", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", From 28b1c10a557ac2cc28242567dcc891f3f02510ea Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Thu, 10 Aug 2017 10:58:09 +0200 Subject: [PATCH 101/140] Publish - react-scripts@1.0.1 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 7c265a86f22..fd2ccb5bccb 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "react-scripts", - "version": "1.0.0", + "version": "1.0.1", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", From 1961149345aab4eeefcee5c4e0f35574ff1ad19a Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Thu, 10 Aug 2017 11:03:12 +0200 Subject: [PATCH 102/140] fix name and version --- packages/react-scripts/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index fd2ccb5bccb..13f3488ea98 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { - "name": "react-scripts", - "version": "1.0.1", + "name": "custom-react-scripts", + "version": "0.0.23", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", @@ -8,7 +8,7 @@ "node": ">=6" }, "bugs": { - "url": "https://github.com/facebookincubator/create-react-app/issues" + "url": "https://github.com/kitze/custom-react-scripts/issues" }, "files": [ "bin", From cc3ec95181095da51f43a4771ede76a23a8cfe10 Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Thu, 10 Aug 2017 11:03:34 +0200 Subject: [PATCH 103/140] Publish - custom-react-scripts@0.1.0 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 13f3488ea98..5df1d3eec9e 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.0.23", + "version": "0.1.0", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", From 6f4e3bf37da2ba5b608d95e34aa164082742603b Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Thu, 10 Aug 2017 11:04:30 +0200 Subject: [PATCH 104/140] fix repo and description --- packages/react-scripts/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 5df1d3eec9e..05e4f747f37 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,8 +1,8 @@ { "name": "custom-react-scripts", "version": "0.1.0", - "description": "Configuration and scripts for Create React App.", - "repository": "facebookincubator/create-react-app", + "description": "Configuration and scripts for create-react-app", + "repository": "kitze/custom-react-scripts", "license": "BSD-3-Clause", "engines": { "node": ">=6" From d0ff00dbcb1bb24136ce71d9c47e681c29a636f3 Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Thu, 10 Aug 2017 11:09:31 +0200 Subject: [PATCH 105/140] add babel plugins/presets to package.json --- packages/react-scripts/package.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 05e4f747f37..79f7f9f9cd9 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -26,7 +26,9 @@ "babel-eslint": "7.2.3", "babel-jest": "20.0.3", "babel-loader": "7.1.1", + "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-preset-react-app": "^3.0.2", + "babel-preset-stage-0": "^6.24.1", "babel-runtime": "6.23.0", "case-sensitive-paths-webpack-plugin": "2.1.1", "chalk": "1.1.3", From 93c73921d0104ec5135b0335dc86f6f851685342 Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Thu, 10 Aug 2017 11:09:54 +0200 Subject: [PATCH 106/140] Publish - custom-react-scripts@0.1.1 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 79f7f9f9cd9..847065af719 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.1.0", + "version": "0.1.1", "description": "Configuration and scripts for create-react-app", "repository": "kitze/custom-react-scripts", "license": "BSD-3-Clause", From f43eea97663c19208cd618787c36295f46149955 Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Thu, 10 Aug 2017 11:24:37 +0200 Subject: [PATCH 107/140] fix ejecting --- packages/react-scripts/config/webpack.config.dev.js | 2 -- packages/react-scripts/config/webpack.config.prod.js | 2 -- packages/react-scripts/scripts/eject.js | 7 ++++++- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index dd1e1a5a1de..52066ec50c8 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -174,13 +174,11 @@ module.exports = { include: paths.appSrc, loader: require.resolve('babel-loader'), options: { - // @remove-on-eject-begin babelrc: false, presets: [require.resolve('babel-preset-react-app')].concat( customConfig.babelPresets ), plugins: customConfig.babelPlugins, - // @remove-on-eject-end // This is a feature of `babel-loader` for webpack (not Babel itself). // It enables caching results in ./node_modules/.cache/babel-loader/ // directory for faster rebuilds. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index c49162b2969..ee14891fa0e 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -165,13 +165,11 @@ module.exports = { include: paths.appSrc, loader: require.resolve('babel-loader'), options: { - // @remove-on-eject-begin babelrc: false, presets: [require.resolve('babel-preset-react-app')].concat( customConfig.babelPresets ), plugins: customConfig.babelPlugins, - // @remove-on-eject-end compact: true, }, }, diff --git a/packages/react-scripts/scripts/eject.js b/packages/react-scripts/scripts/eject.js index 3d8d258cc67..3a903cda99c 100644 --- a/packages/react-scripts/scripts/eject.js +++ b/packages/react-scripts/scripts/eject.js @@ -82,7 +82,12 @@ inquirer } } - const folders = ['config', 'config/jest', 'scripts']; + const folders = [ + 'config', + 'config/jest', + 'config/custom-react-scripts', + 'scripts', + ]; // Make shallow array of files paths const files = folders.reduce((files, folder) => { From 516f572c1c0ed0ac24f8e67bfb17af416087fa94 Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Thu, 10 Aug 2017 11:24:37 +0200 Subject: [PATCH 108/140] fix ejecting --- packages/react-scripts/config/webpack.config.dev.js | 2 -- packages/react-scripts/config/webpack.config.prod.js | 2 -- packages/react-scripts/scripts/eject.js | 7 ++++++- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index dd1e1a5a1de..52066ec50c8 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -174,13 +174,11 @@ module.exports = { include: paths.appSrc, loader: require.resolve('babel-loader'), options: { - // @remove-on-eject-begin babelrc: false, presets: [require.resolve('babel-preset-react-app')].concat( customConfig.babelPresets ), plugins: customConfig.babelPlugins, - // @remove-on-eject-end // This is a feature of `babel-loader` for webpack (not Babel itself). // It enables caching results in ./node_modules/.cache/babel-loader/ // directory for faster rebuilds. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index c49162b2969..ee14891fa0e 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -165,13 +165,11 @@ module.exports = { include: paths.appSrc, loader: require.resolve('babel-loader'), options: { - // @remove-on-eject-begin babelrc: false, presets: [require.resolve('babel-preset-react-app')].concat( customConfig.babelPresets ), plugins: customConfig.babelPlugins, - // @remove-on-eject-end compact: true, }, }, diff --git a/packages/react-scripts/scripts/eject.js b/packages/react-scripts/scripts/eject.js index 3d8d258cc67..3a903cda99c 100644 --- a/packages/react-scripts/scripts/eject.js +++ b/packages/react-scripts/scripts/eject.js @@ -82,7 +82,12 @@ inquirer } } - const folders = ['config', 'config/jest', 'scripts']; + const folders = [ + 'config', + 'config/jest', + 'config/custom-react-scripts', + 'scripts', + ]; // Make shallow array of files paths const files = folders.reduce((files, folder) => { From 4af958a8e24a198b0d14f8d2401311acd7c7dd81 Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Thu, 10 Aug 2017 11:25:14 +0200 Subject: [PATCH 109/140] Publish - custom-react-scripts@0.1.2 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 847065af719..ab826752ad9 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.1.1", + "version": "0.1.2", "description": "Configuration and scripts for create-react-app", "repository": "kitze/custom-react-scripts", "license": "BSD-3-Clause", From c9b74583f5a6c2f81d5c1663942568d4a1d0fd55 Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Thu, 10 Aug 2017 11:35:54 +0200 Subject: [PATCH 110/140] Publish - custom-react-scripts@0.1.3 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index ab826752ad9..cac99b021f7 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.1.2", + "version": "0.1.3", "description": "Configuration and scripts for create-react-app", "repository": "kitze/custom-react-scripts", "license": "BSD-3-Clause", From 6892399f2c20d9301a3556f668a21ca8c7af281a Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Thu, 10 Aug 2017 11:39:42 +0200 Subject: [PATCH 111/140] copy all folders when ejecting --- packages/react-scripts/scripts/eject.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react-scripts/scripts/eject.js b/packages/react-scripts/scripts/eject.js index 3a903cda99c..db1f92a88c7 100644 --- a/packages/react-scripts/scripts/eject.js +++ b/packages/react-scripts/scripts/eject.js @@ -86,6 +86,10 @@ inquirer 'config', 'config/jest', 'config/custom-react-scripts', + 'config/custom-react-scripts/customizers', + 'config/custom-react-scripts/options', + 'config/custom-react-scripts/utils', + 'config/custom-react-scripts/webpack-config', 'scripts', ]; From 6bfd70c7a35867a55b24d55cab3bb3fd6160bd8a Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Thu, 10 Aug 2017 11:40:01 +0200 Subject: [PATCH 112/140] Publish - custom-react-scripts@0.1.4 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index cac99b021f7..de380f65c8c 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.1.3", + "version": "0.1.4", "description": "Configuration and scripts for create-react-app", "repository": "kitze/custom-react-scripts", "license": "BSD-3-Clause", From c402e1a2518dd039645ecedd8d5ed5c2093a845f Mon Sep 17 00:00:00 2001 From: davidf <dforsten@gmail.com> Date: Thu, 17 Aug 2017 09:57:27 +0200 Subject: [PATCH 113/140] Support custom config on running tests as well (e.g. for decorators) --- packages/react-scripts/config/jest/babelTransform.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/config/jest/babelTransform.js b/packages/react-scripts/config/jest/babelTransform.js index bee55b1b156..48856f07174 100644 --- a/packages/react-scripts/config/jest/babelTransform.js +++ b/packages/react-scripts/config/jest/babelTransform.js @@ -9,8 +9,15 @@ 'use strict'; const babelJest = require('babel-jest'); +const getCustomConfig = require('../custom-react-scripts/config'); + +//Get custom configuration for injecting plugins, presets and loaders +const customConfig = getCustomConfig(true); module.exports = babelJest.createTransformer({ - presets: [require.resolve('babel-preset-react-app')], + presets: [require.resolve('babel-preset-react-app')].concat( + customConfig.babelPresets + ), babelrc: false, + plugins: customConfig.babelPlugins, }); From fbb9dd4dcadcce6b3b1554456e24a17d29374ae7 Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Thu, 17 Aug 2017 14:35:25 +0200 Subject: [PATCH 114/140] adds support for webpack-dashboard electron app --- README.md | 3 +++ packages/react-scripts/README.md | 3 +++ .../customizers/webpack-plugins.js | 8 +++++++- .../config/webpack.config.dev.js | 1 + packages/react-scripts/package.json | 3 ++- packages/react-scripts/template/.env | 2 ++ packages/react-scripts/template/src/App.js | 19 +++++++++++++++++++ 7 files changed, 37 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f0dd7740e07..506833660aa 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,9 @@ For example ```styles.module.css``` or ```header.module.sass``` or ```footer.mod - ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset - ```REACT_APP_DECORATORS=true``` - enable decorators support +#### Other +- ```REACT_APP_WEBPACK_DASHBOARD=true``` - Enables connection to the[webpack-dashboard](https://github.com/FormidableLabs/electron-webpack-dashboard) Electron app (the app must be installed on local machine) + ### ๐Ÿค” Why? The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index f0dd7740e07..506833660aa 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -44,6 +44,9 @@ For example ```styles.module.css``` or ```header.module.sass``` or ```footer.mod - ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset - ```REACT_APP_DECORATORS=true``` - enable decorators support +#### Other +- ```REACT_APP_WEBPACK_DASHBOARD=true``` - Enables connection to the[webpack-dashboard](https://github.com/FormidableLabs/electron-webpack-dashboard) Electron app (the app must be installed on local machine) + ### ๐Ÿค” Why? The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: diff --git a/packages/react-scripts/config/custom-react-scripts/customizers/webpack-plugins.js b/packages/react-scripts/config/custom-react-scripts/customizers/webpack-plugins.js index f053ebf7976..58f9f6e90e6 100644 --- a/packages/react-scripts/config/custom-react-scripts/customizers/webpack-plugins.js +++ b/packages/react-scripts/config/custom-react-scripts/customizers/webpack-plugins.js @@ -1 +1,7 @@ -module.exports = {}; +const DashboardPlugin = require('webpack-dashboard/plugin'); + +module.exports = { + WEBPACK_DASHBOARD: { + get: () => new DashboardPlugin(), + }, +}; diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 52066ec50c8..3117a1dc4d8 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -241,6 +241,7 @@ module.exports = { // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack // You can remove this if you don't use Moment.js: new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), + ...customConfig.webpackPlugins, ], // Some libraries import Node modules but don't use them in the browser. // Tell Webpack to provide empty mocks for them so importing them works. diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index de380f65c8c..373f518b140 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -64,7 +64,8 @@ "webpack": "3.5.1", "webpack-dev-server": "2.7.1", "webpack-manifest-plugin": "1.2.1", - "whatwg-fetch": "2.0.3" + "whatwg-fetch": "2.0.3", + "webpack-dashboard": "^1.0.0-2" }, "devDependencies": { "react": "^15.5.4", diff --git a/packages/react-scripts/template/.env b/packages/react-scripts/template/.env index 0615dc05420..a118463d2fd 100644 --- a/packages/react-scripts/template/.env +++ b/packages/react-scripts/template/.env @@ -9,3 +9,5 @@ REACT_APP_CSS_MODULES = true; REACT_APP_SASS_MODULES = true; REACT_APP_STYLUS_MODULES = true; REACT_APP_LESS_MODULES = true; + +REACT_APP_WEBPACK_DASHBOARD = true; diff --git a/packages/react-scripts/template/src/App.js b/packages/react-scripts/template/src/App.js index c718187bdb4..85a25128853 100644 --- a/packages/react-scripts/template/src/App.js +++ b/packages/react-scripts/template/src/App.js @@ -88,6 +88,25 @@ class App extends Component { </li> </ul> + <b>Other</b> + + <ul className="configs babel-configs"> + <li> + <code>REACT_APP_WEBPACK_DASHBOARD=true</code> + <span> + - Enables connection to {' '} + <a + target="_blank" + ref="noopener noreferrer" + href="https://github.com/FormidableLabs/electron-webpack-dashboard" + > + webpack-dashboard + </a>{' '} + (must be installed) + </span> + </li> + </ul> + <br /> <br /> <a From 9e9e441bfa19815463754393cdfbc2acb2facf30 Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Thu, 17 Aug 2017 14:35:25 +0200 Subject: [PATCH 115/140] adds support for webpack-dashboard electron app --- README.md | 3 +++ packages/react-scripts/README.md | 3 +++ .../customizers/webpack-plugins.js | 8 +++++++- .../config/webpack.config.dev.js | 1 + packages/react-scripts/package.json | 3 ++- packages/react-scripts/template/.env | 2 ++ packages/react-scripts/template/src/App.js | 19 +++++++++++++++++++ 7 files changed, 37 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f0dd7740e07..506833660aa 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,9 @@ For example ```styles.module.css``` or ```header.module.sass``` or ```footer.mod - ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset - ```REACT_APP_DECORATORS=true``` - enable decorators support +#### Other +- ```REACT_APP_WEBPACK_DASHBOARD=true``` - Enables connection to the[webpack-dashboard](https://github.com/FormidableLabs/electron-webpack-dashboard) Electron app (the app must be installed on local machine) + ### ๐Ÿค” Why? The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index f0dd7740e07..506833660aa 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -44,6 +44,9 @@ For example ```styles.module.css``` or ```header.module.sass``` or ```footer.mod - ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset - ```REACT_APP_DECORATORS=true``` - enable decorators support +#### Other +- ```REACT_APP_WEBPACK_DASHBOARD=true``` - Enables connection to the[webpack-dashboard](https://github.com/FormidableLabs/electron-webpack-dashboard) Electron app (the app must be installed on local machine) + ### ๐Ÿค” Why? The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: diff --git a/packages/react-scripts/config/custom-react-scripts/customizers/webpack-plugins.js b/packages/react-scripts/config/custom-react-scripts/customizers/webpack-plugins.js index f053ebf7976..58f9f6e90e6 100644 --- a/packages/react-scripts/config/custom-react-scripts/customizers/webpack-plugins.js +++ b/packages/react-scripts/config/custom-react-scripts/customizers/webpack-plugins.js @@ -1 +1,7 @@ -module.exports = {}; +const DashboardPlugin = require('webpack-dashboard/plugin'); + +module.exports = { + WEBPACK_DASHBOARD: { + get: () => new DashboardPlugin(), + }, +}; diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 52066ec50c8..3117a1dc4d8 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -241,6 +241,7 @@ module.exports = { // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack // You can remove this if you don't use Moment.js: new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), + ...customConfig.webpackPlugins, ], // Some libraries import Node modules but don't use them in the browser. // Tell Webpack to provide empty mocks for them so importing them works. diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index de380f65c8c..373f518b140 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -64,7 +64,8 @@ "webpack": "3.5.1", "webpack-dev-server": "2.7.1", "webpack-manifest-plugin": "1.2.1", - "whatwg-fetch": "2.0.3" + "whatwg-fetch": "2.0.3", + "webpack-dashboard": "^1.0.0-2" }, "devDependencies": { "react": "^15.5.4", diff --git a/packages/react-scripts/template/.env b/packages/react-scripts/template/.env index 0615dc05420..a118463d2fd 100644 --- a/packages/react-scripts/template/.env +++ b/packages/react-scripts/template/.env @@ -9,3 +9,5 @@ REACT_APP_CSS_MODULES = true; REACT_APP_SASS_MODULES = true; REACT_APP_STYLUS_MODULES = true; REACT_APP_LESS_MODULES = true; + +REACT_APP_WEBPACK_DASHBOARD = true; diff --git a/packages/react-scripts/template/src/App.js b/packages/react-scripts/template/src/App.js index c718187bdb4..85a25128853 100644 --- a/packages/react-scripts/template/src/App.js +++ b/packages/react-scripts/template/src/App.js @@ -88,6 +88,25 @@ class App extends Component { </li> </ul> + <b>Other</b> + + <ul className="configs babel-configs"> + <li> + <code>REACT_APP_WEBPACK_DASHBOARD=true</code> + <span> + - Enables connection to {' '} + <a + target="_blank" + ref="noopener noreferrer" + href="https://github.com/FormidableLabs/electron-webpack-dashboard" + > + webpack-dashboard + </a>{' '} + (must be installed) + </span> + </li> + </ul> + <br /> <br /> <a From 5250275aeeea9d26cadd3bc9d5a54b35ed9b3380 Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Thu, 17 Aug 2017 14:37:06 +0200 Subject: [PATCH 116/140] Publish - custom-react-scripts@0.2.0 --- packages/react-scripts/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 373f518b140..3f9fa796bbd 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.1.4", + "version": "0.2.0", "description": "Configuration and scripts for create-react-app", "repository": "kitze/custom-react-scripts", "license": "BSD-3-Clause", @@ -62,10 +62,10 @@ "sw-precache-webpack-plugin": "0.11.4", "url-loader": "0.5.9", "webpack": "3.5.1", + "webpack-dashboard": "^1.0.0-2", "webpack-dev-server": "2.7.1", "webpack-manifest-plugin": "1.2.1", - "whatwg-fetch": "2.0.3", - "webpack-dashboard": "^1.0.0-2" + "whatwg-fetch": "2.0.3" }, "devDependencies": { "react": "^15.5.4", From 468cebb3d97a9a309bcf33865db881efbfaf92ba Mon Sep 17 00:00:00 2001 From: Kitze <kristijan.mkd@gmail.com> Date: Thu, 17 Aug 2017 15:08:39 +0200 Subject: [PATCH 117/140] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 506833660aa..efcbc092855 100644 --- a/README.md +++ b/README.md @@ -45,7 +45,7 @@ For example ```styles.module.css``` or ```header.module.sass``` or ```footer.mod - ```REACT_APP_DECORATORS=true``` - enable decorators support #### Other -- ```REACT_APP_WEBPACK_DASHBOARD=true``` - Enables connection to the[webpack-dashboard](https://github.com/FormidableLabs/electron-webpack-dashboard) Electron app (the app must be installed on local machine) +- ```REACT_APP_WEBPACK_DASHBOARD=true``` - Enables connection to the [webpack-dashboard](https://github.com/FormidableLabs/electron-webpack-dashboard) Electron app (the app must be installed on local machine) ### ๐Ÿค” Why? The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: @@ -68,4 +68,4 @@ I just added support for extra environment variables that actually turn on certa ### Future plans -I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. \ No newline at end of file +I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. From 3a116e201de4d82161bd75872b5d362b99af8bbe Mon Sep 17 00:00:00 2001 From: Charles Crawford <charliec364@gmail.com> Date: Sat, 19 Aug 2017 20:12:38 -0700 Subject: [PATCH 118/140] add various missing =true in README.md --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index efcbc092855..df15ecc506c 100644 --- a/README.md +++ b/README.md @@ -31,10 +31,10 @@ The generated project comes with every option turned on by default, but you can - ```REACT_APP_SASS=true``` - enable SASS support - ```REACT_APP_LESS=true``` - enable LESS support - ```REACT_APP_STYLUS=true``` - enable Stylus support -- ```REACT_APP_CSS_MODULES``` - enable CSS modules -- ```REACT_APP_SASS_MODULES``` - enable Sass modules -- ```REACT_APP_LESS_MODULES``` - enable Less modules -- ```REACT_APP_STYLUS_MODULES``` - enable Stylus modules +- ```REACT_APP_CSS_MODULES=true``` - enable CSS modules +- ```REACT_APP_SASS_MODULES=true``` - enable Sass modules +- ```REACT_APP_LESS_MODULES=true``` - enable Less modules +- ```REACT_APP_STYLUS_MODULES=true``` - enable Stylus modules Note: to use modules the file must be named in the following format: ```$name.module.$preprocessorName```. From f6e1e4fd8dad2b3484e948288cba72fbb1ff8a5e Mon Sep 17 00:00:00 2001 From: Nate Hobi <nate.hobi@gmail.com> Date: Thu, 14 Sep 2017 11:48:56 -0400 Subject: [PATCH 119/140] Addresses issue where build script doesn't terminate automatically as expected. --- packages/react-scripts/scripts/build.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index 7691bfd5282..919665da71d 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -102,6 +102,8 @@ measureFileSizesBeforeBuild(paths.appBuild) buildFolder, useYarn ); + + process.exit(); }, err => { console.log(chalk.red('Failed to compile.\n')); From e6cdbfcf912a04247ff24a93c139d6cac2e3365c Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Sun, 15 Oct 2017 11:02:16 +0200 Subject: [PATCH 120/140] Publish - custom-react-scripts@0.2.1 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 3f9fa796bbd..ba91c529869 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.2.0", + "version": "0.2.1", "description": "Configuration and scripts for create-react-app", "repository": "kitze/custom-react-scripts", "license": "BSD-3-Clause", From ebfc8c42b76ddd0887ce860111ac14701c7eb0af Mon Sep 17 00:00:00 2001 From: ortonomy <git@ortonomy.co> Date: Wed, 8 Nov 2017 13:39:12 +0800 Subject: [PATCH 121/140] closes #116 - add an example ``.env`` file --- examples/.env | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 examples/.env diff --git a/examples/.env b/examples/.env new file mode 100644 index 00000000000..0fba7f99c0d --- /dev/null +++ b/examples/.env @@ -0,0 +1,31 @@ +# delete the environment strings as appropriate + +# enable SASS support +REACT_APP_SASS=true + +# enable LESS support +REACT_APP_LESS=true + +# enable Stylus support +REACT_APP_STYLUS=true + +# enable CSS modules +REACT_APP_CSS_MODULES=true + +# enable Sass modules +REACT_APP_SASS_MODULES=true + +# enable Less modules +REACT_APP_LESS_MODULES=true + +# enable Stylus modules +REACT_APP_STYLUS_MODULES=true + +# enable stage-0 Babel preset +REACT_APP_BABEL_STAGE_0=true + +# enable decorators support +REACT_APP_DECORATORS=true + +# enable webpack dashboard access +REACT_APP_WEBPACK_DASHBOARD=true \ No newline at end of file From 0d0b5a23b4818d7ef3af701eb400160748c42939 Mon Sep 17 00:00:00 2001 From: Pedro Moreira <pedsmoreira@gmail.com> Date: Tue, 12 Dec 2017 00:13:09 -0200 Subject: [PATCH 122/140] Add instructions to add to existing projects Sometimes the project has already been created with `create-react-app`, so having the instructions to update the project would be nice. --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index df15ecc506c..296c2782e08 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,15 @@ Modify the ```.env``` file in the root of the generated project, and add any of The generated project comes with every option turned on by default, but you can remove them at any time by removing the options from the ```.env``` file. +#### Adding to an existing project + +``` +npm uninstall --save react-scripts; +npm install --save custom-react-scripts; +``` + +Add a `.env.` file with the desired features. + ### ๐Ÿ“ Configuration options #### Styling From e114c211003e3701f58130ecc526a6be34b721a5 Mon Sep 17 00:00:00 2001 From: Pedro Moreira <pedsmoreira@gmail.com> Date: Tue, 12 Dec 2017 00:15:04 -0200 Subject: [PATCH 123/140] Fix `.env` display --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 296c2782e08..6b51659442e 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ The reason for this fork's existence is explained better in [this Medium article ### โ”How to use it ```create-react-app my-app --scripts-version custom-react-scripts``` -Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. +Modify the `.env` file in the root of the generated project, and add any of the configuration options below ๐Ÿ‘‡ to enable that feature. The generated project comes with every option turned on by default, but you can remove them at any time by removing the options from the ```.env``` file. From 5861dc747b1afa596bf2c07812c3e85ec6fc786f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonne=20Ra=CC=88sa=CC=88nen?= <jonne.rasanen@sc5.io> Date: Tue, 20 Feb 2018 13:46:41 +0200 Subject: [PATCH 124/140] fix using CSS Modules in Jest snapshot tests --- packages/react-scripts/package.json | 1 + .../scripts/utils/createJestConfig.js | 29 ++++++++++--------- 2 files changed, 16 insertions(+), 14 deletions(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index ba91c529869..e9951b22e0e 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -45,6 +45,7 @@ "file-loader": "0.11.2", "fs-extra": "3.0.1", "html-webpack-plugin": "2.29.0", + "identity-obj-proxy": "^3.0.0", "jest": "20.0.4", "less": "^2.7.2", "less-loader": "^4.0.5", diff --git a/packages/react-scripts/scripts/utils/createJestConfig.js b/packages/react-scripts/scripts/utils/createJestConfig.js index bc4ebf82271..403fa375d6e 100644 --- a/packages/react-scripts/scripts/utils/createJestConfig.js +++ b/packages/react-scripts/scripts/utils/createJestConfig.js @@ -42,6 +42,7 @@ module.exports = (resolve, rootDir, isEjecting) => { transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$'], moduleNameMapper: { '^react-native$': 'react-native-web', + "\\.(s?css|styl|less)$": "identity-obj-proxy" }, moduleFileExtensions: ['web.js', 'js', 'json', 'web.jsx', 'jsx', 'node'], }; @@ -67,20 +68,20 @@ module.exports = (resolve, rootDir, isEjecting) => { console.error( chalk.red( 'Out of the box, Create React App only supports overriding ' + - 'these Jest options:\n\n' + - supportedKeys.map(key => chalk.bold(' \u2022 ' + key)).join('\n') + - '.\n\n' + - 'These options in your package.json Jest configuration ' + - 'are not currently supported by Create React App:\n\n' + - unsupportedKeys - .map(key => chalk.bold(' \u2022 ' + key)) - .join('\n') + - '\n\nIf you wish to override other Jest options, you need to ' + - 'eject from the default setup. You can do so by running ' + - chalk.bold('npm run eject') + - ' but remember that this is a one-way operation. ' + - 'You may also file an issue with Create React App to discuss ' + - 'supporting more options out of the box.\n' + 'these Jest options:\n\n' + + supportedKeys.map(key => chalk.bold(' \u2022 ' + key)).join('\n') + + '.\n\n' + + 'These options in your package.json Jest configuration ' + + 'are not currently supported by Create React App:\n\n' + + unsupportedKeys + .map(key => chalk.bold(' \u2022 ' + key)) + .join('\n') + + '\n\nIf you wish to override other Jest options, you need to ' + + 'eject from the default setup. You can do so by running ' + + chalk.bold('npm run eject') + + ' but remember that this is a one-way operation. ' + + 'You may also file an issue with Create React App to discuss ' + + 'supporting more options out of the box.\n' ) ); process.exit(1); From 137706998b7620e6e4179c2b074de0d56c20fb17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonne=20Ra=CC=88sa=CC=88nen?= <jonne.rasanen@sc5.io> Date: Tue, 20 Feb 2018 16:01:36 +0200 Subject: [PATCH 125/140] use env variable MODULE_IDENT_NAME for hash identName if available --- .../webpack-config/style-loader.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js b/packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js index 7530da206ec..eeebd2d422d 100644 --- a/packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js +++ b/packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js @@ -2,14 +2,16 @@ const postCssOptions = require('../options/postcss-options'); const extractTextPluginOptions = require('../options/extract-text-plugin-options'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; +const localIdentName = process.env.MODULE_IDENT_NAME || '[sha512:hash:base32]-[name]-[local]'; + module.exports = (loader, test, exclude, modules) => isDev => { let loaders = isDev ? [ - { - loader: require.resolve('style-loader'), - }, - ] + { + loader: require.resolve('style-loader'), + }, + ] : []; loaders = loaders.concat([ @@ -20,9 +22,9 @@ module.exports = (loader, test, exclude, modules) => isDev => { { importLoaders: 1 }, modules === true ? { - localIdentName: '[sha512:hash:base32]-[name]-[local]', - modules: true, - } + localIdentName: localIdentName, + modules: true, + } : {} ), }, From dc6fc430bf7c6d7a98ca39a49c13c645ddf34191 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonne=20Ra=CC=88sa=CC=88nen?= <jonne.rasanen@sc5.io> Date: Tue, 20 Feb 2018 16:08:10 +0200 Subject: [PATCH 126/140] add hash identName to .env --- packages/react-scripts/template/.env | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react-scripts/template/.env b/packages/react-scripts/template/.env index a118463d2fd..1377e92b795 100644 --- a/packages/react-scripts/template/.env +++ b/packages/react-scripts/template/.env @@ -11,3 +11,6 @@ REACT_APP_STYLUS_MODULES = true; REACT_APP_LESS_MODULES = true; REACT_APP_WEBPACK_DASHBOARD = true; + +# CSS Module hash +# MODULE_IDENT_NAME = 'module-[sha512:hash:base32]-[name]-[local]'; \ No newline at end of file From adf8f07efbcd47d46c4898ccad4daf287cf07dbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonne=20Ra=CC=88sa=CC=88nen?= <jonne.rasanen@sc5.io> Date: Tue, 20 Feb 2018 16:23:22 +0200 Subject: [PATCH 127/140] add line break --- packages/react-scripts/template/.env | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/.env b/packages/react-scripts/template/.env index 1377e92b795..3f62cc201be 100644 --- a/packages/react-scripts/template/.env +++ b/packages/react-scripts/template/.env @@ -13,4 +13,4 @@ REACT_APP_LESS_MODULES = true; REACT_APP_WEBPACK_DASHBOARD = true; # CSS Module hash -# MODULE_IDENT_NAME = 'module-[sha512:hash:base32]-[name]-[local]'; \ No newline at end of file +# MODULE_IDENT_NAME = 'module-[sha512:hash:base32]-[name]-[local]'; From 0bf6ee2d7c50813acda0de6f2c936f9a1809a2c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonne=20Ra=CC=88sa=CC=88nen?= <jonne.rasanen@sc5.io> Date: Thu, 22 Feb 2018 08:23:29 +0200 Subject: [PATCH 128/140] refactor ident name env var --- .../webpack-config/style-loader.js | 19 ++++++++++--------- packages/react-scripts/template/.env | 2 +- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js b/packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js index eeebd2d422d..5ccbdfe96a0 100644 --- a/packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js +++ b/packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js @@ -2,16 +2,17 @@ const postCssOptions = require('../options/postcss-options'); const extractTextPluginOptions = require('../options/extract-text-plugin-options'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; -const localIdentName = process.env.MODULE_IDENT_NAME || '[sha512:hash:base32]-[name]-[local]'; - +const localIdentName = + process.env.REACT_APP_CSS_MODULE_IDENT_NAME || + '[sha512:hash:base32]-[name]-[local]'; module.exports = (loader, test, exclude, modules) => isDev => { let loaders = isDev ? [ - { - loader: require.resolve('style-loader'), - }, - ] + { + loader: require.resolve('style-loader'), + }, + ] : []; loaders = loaders.concat([ @@ -22,9 +23,9 @@ module.exports = (loader, test, exclude, modules) => isDev => { { importLoaders: 1 }, modules === true ? { - localIdentName: localIdentName, - modules: true, - } + localIdentName: localIdentName, + modules: true, + } : {} ), }, diff --git a/packages/react-scripts/template/.env b/packages/react-scripts/template/.env index 3f62cc201be..67a2b2988cf 100644 --- a/packages/react-scripts/template/.env +++ b/packages/react-scripts/template/.env @@ -13,4 +13,4 @@ REACT_APP_LESS_MODULES = true; REACT_APP_WEBPACK_DASHBOARD = true; # CSS Module hash -# MODULE_IDENT_NAME = 'module-[sha512:hash:base32]-[name]-[local]'; +# REACT_APP_CSS_MODULE_IDENT_NAME = 'module-[sha512:hash:base32]-[name]-[local]'; From 3970f265b9f8fba4573460e193b3d5965a5f1eda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonne=20Ra=CC=88sa=CC=88nen?= <jonne.rasanen@sc5.io> Date: Thu, 22 Feb 2018 09:25:03 +0200 Subject: [PATCH 129/140] add CSS Module hash ident name .env sample --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 6b51659442e..d92fac1a1c5 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,7 @@ Add a `.env.` file with the desired features. - ```REACT_APP_SASS_MODULES=true``` - enable Sass modules - ```REACT_APP_LESS_MODULES=true``` - enable Less modules - ```REACT_APP_STYLUS_MODULES=true``` - enable Stylus modules +- ```REACT_APP_CSS_MODULE_IDENT_NAME='module-[sha512:hash:base32]-[name]-[local]'``` - add custom CSS Module hash ident name Note: to use modules the file must be named in the following format: ```$name.module.$preprocessorName```. From 0bf20a1cdfa9692fcc6954c52d3319da7728a7fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonne=20Ra=CC=88sa=CC=88nen?= <jonne.rasanen@sc5.io> Date: Thu, 22 Feb 2018 10:56:30 +0200 Subject: [PATCH 130/140] refactor the name of the configuration option for CSS Module class name template to be more understandable --- .../config/custom-react-scripts/webpack-config/style-loader.js | 2 +- packages/react-scripts/template/.env | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js b/packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js index 5ccbdfe96a0..2c6c33031c0 100644 --- a/packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js +++ b/packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js @@ -3,7 +3,7 @@ const extractTextPluginOptions = require('../options/extract-text-plugin-options const ExtractTextPlugin = require('extract-text-webpack-plugin'); const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; const localIdentName = - process.env.REACT_APP_CSS_MODULE_IDENT_NAME || + process.env.REACT_APP_CSS_MODULE_CLASSNAME_TEMPLATE || '[sha512:hash:base32]-[name]-[local]'; module.exports = (loader, test, exclude, modules) => isDev => { diff --git a/packages/react-scripts/template/.env b/packages/react-scripts/template/.env index 67a2b2988cf..ecc4ab94047 100644 --- a/packages/react-scripts/template/.env +++ b/packages/react-scripts/template/.env @@ -13,4 +13,4 @@ REACT_APP_LESS_MODULES = true; REACT_APP_WEBPACK_DASHBOARD = true; # CSS Module hash -# REACT_APP_CSS_MODULE_IDENT_NAME = 'module-[sha512:hash:base32]-[name]-[local]'; +# REACT_APP_CSS_MODULE_CLASSNAME_TEMPLATE = 'module-[sha512:hash:base32]-[name]-[local]'; From e08ee6b00f82593ab8d5068ee822cbf83bc919d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonne=20Ra=CC=88sa=CC=88nen?= <jonne.rasanen@sc5.io> Date: Thu, 22 Feb 2018 10:58:07 +0200 Subject: [PATCH 131/140] update readme to show sample usage for CSS Module class name template configuration option --- README.md | 2 +- packages/react-scripts/README.md | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d92fac1a1c5..80736f9f82a 100644 --- a/README.md +++ b/README.md @@ -44,7 +44,7 @@ Add a `.env.` file with the desired features. - ```REACT_APP_SASS_MODULES=true``` - enable Sass modules - ```REACT_APP_LESS_MODULES=true``` - enable Less modules - ```REACT_APP_STYLUS_MODULES=true``` - enable Stylus modules -- ```REACT_APP_CSS_MODULE_IDENT_NAME='module-[sha512:hash:base32]-[name]-[local]'``` - add custom CSS Module hash ident name +- ```REACT_APP_CSS_MODULE_CLASSNAME_TEMPLATE='module-[sha512:hash:base32]-[name]-[local]'``` - add custom CSS Module hash ident name Note: to use modules the file must be named in the following format: ```$name.module.$preprocessorName```. diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index 506833660aa..e0d145d631f 100644 --- a/packages/react-scripts/README.md +++ b/packages/react-scripts/README.md @@ -35,6 +35,7 @@ The generated project comes with every option turned on by default, but you can - ```REACT_APP_SASS_MODULES``` - enable Sass modules - ```REACT_APP_LESS_MODULES``` - enable Less modules - ```REACT_APP_STYLUS_MODULES``` - enable Stylus modules +- ```REACT_APP_CSS_MODULE_CLASSNAME_TEMPLATE='module-[sha512:hash:base32]-[name]-[local]'``` - add custom CSS Module hash ident name Note: to use modules the file must be named in the following format: ```$name.module.$preprocessorName```. From 3d80a58b2e62e776897942b11f17ba0df54e77e4 Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Tue, 6 Mar 2018 11:19:18 +0100 Subject: [PATCH 132/140] add yarn locks --- .gitignore | 1 - 1 file changed, 1 deletion(-) diff --git a/.gitignore b/.gitignore index 23756be55c9..7c83f79168c 100644 --- a/.gitignore +++ b/.gitignore @@ -11,5 +11,4 @@ npm-debug.log* yarn-debug.log* yarn-error.log* /.changelog - .idea \ No newline at end of file From 574b2afd3e20dbae9f01a260df6c9fb6f18f654b Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Tue, 6 Mar 2018 11:19:45 +0100 Subject: [PATCH 133/140] add yarn locks From 2677a2d5fe44cfd97403412488b32d8ef75b18d4 Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Tue, 6 Mar 2018 11:20:00 +0100 Subject: [PATCH 134/140] ignore yarn lock --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 7c83f79168c..da0b2163db7 100644 --- a/.gitignore +++ b/.gitignore @@ -11,4 +11,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* /.changelog +yarn.lock .idea \ No newline at end of file From f9a43942409e72ef55201ea31b5376d0db68598a Mon Sep 17 00:00:00 2001 From: kitze <kristijan.mkd@gmail.com> Date: Tue, 6 Mar 2018 11:20:20 +0100 Subject: [PATCH 135/140] Publish - custom-react-scripts@0.2.2 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index e9951b22e0e..e2a894198ee 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "custom-react-scripts", - "version": "0.2.1", + "version": "0.2.2", "description": "Configuration and scripts for create-react-app", "repository": "kitze/custom-react-scripts", "license": "BSD-3-Clause", From e302a48808fe8ce9339ec576947e170ebcb2c995 Mon Sep 17 00:00:00 2001 From: Valentin Hervieu <valentin.hervieu@ricardo.ch> Date: Tue, 5 Jun 2018 21:31:14 +0200 Subject: [PATCH 136/140] Support absolute imports for SASS --- .../customizers/webpack-loaders.js | 15 +++++++++++++-- .../webpack-config/style-loader.js | 10 ++++++---- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/packages/react-scripts/config/custom-react-scripts/customizers/webpack-loaders.js b/packages/react-scripts/config/custom-react-scripts/customizers/webpack-loaders.js index bbcfec1bfe1..51094229fcd 100644 --- a/packages/react-scripts/config/custom-react-scripts/customizers/webpack-loaders.js +++ b/packages/react-scripts/config/custom-react-scripts/customizers/webpack-loaders.js @@ -9,7 +9,13 @@ module.exports = { get: styleLoader(undefined, /\.css$/, /\.module\.css$/), }, SASS: { - get: styleLoader(sassLoader, /\.s[ac]ss$/, /\.module\.s[ac]ss$/), + get: styleLoader( + sassLoader, + /\.s[ac]ss$/, + /\.module\.s[ac]ss$/, + false, + { includePaths: ['./node_modules', './src'] } + ), }, LESS: { get: styleLoader(lessLoader, /\.less$/, /\.module\.less$/), @@ -24,7 +30,12 @@ module.exports = { get: styleLoader(lessLoader, /\.module\.less$/, undefined, true), }, SASS_MODULES: { - get: styleLoader(sassLoader, /\.module\.s[ac]ss$/, undefined, true), + get: styleLoader( + sassLoader, + /\.module\.s[ac]ss$/, + undefined, + true, + { includePaths: ['./node_modules', './src'], }), }, CSS_MODULES: { get: styleLoader(undefined, /\.module\.css$/, undefined, true), diff --git a/packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js b/packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js index 2c6c33031c0..498aa00a031 100644 --- a/packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js +++ b/packages/react-scripts/config/custom-react-scripts/webpack-config/style-loader.js @@ -6,7 +6,7 @@ const localIdentName = process.env.REACT_APP_CSS_MODULE_CLASSNAME_TEMPLATE || '[sha512:hash:base32]-[name]-[local]'; -module.exports = (loader, test, exclude, modules) => isDev => { +module.exports = (loader, test, exclude, modules, options) => isDev => { let loaders = isDev ? [ { @@ -42,9 +42,11 @@ module.exports = (loader, test, exclude, modules) => isDev => { if (loader) { loaders.push({ loader, - options: { - sourceMap: shouldUseSourceMap, - }, + options: Object.assign( + {}, + { sourceMap: shouldUseSourceMap }, + options + ), }); } From f44cd174cef22897810d5a1578f0b07d91d4bd87 Mon Sep 17 00:00:00 2001 From: Maxi Ferreira <charca@gmail.com> Date: Wed, 27 Jun 2018 10:06:51 -0300 Subject: [PATCH 137/140] Fixed typo causing eslint warning --- packages/react-scripts/template/src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/src/App.js b/packages/react-scripts/template/src/App.js index 9b62565af9f..40959b6a132 100644 --- a/packages/react-scripts/template/src/App.js +++ b/packages/react-scripts/template/src/App.js @@ -97,7 +97,7 @@ class App extends Component { - Enables connection to {' '} <a target="_blank" - ref="noopener noreferrer" + rel="noopener noreferrer" href="https://github.com/FormidableLabs/electron-webpack-dashboard" > webpack-dashboard From 841a8e2b53ef956d027d30e7843383fb86c60fb0 Mon Sep 17 00:00:00 2001 From: Kitze <kristijan.mkd@gmail.com> Date: Tue, 2 Oct 2018 13:18:39 +0200 Subject: [PATCH 138/140] Update README.md --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index 76098823928..54e686b551c 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,8 @@ +โš ๏ธ This repo is **deprecated**. + +Please use [react-app-rewired](https://github.com/timarney/react-app-rewired) if you want to customize CRA 1. +Please use [customize-cra](https://github.com/arackaf/customize-cra) if you want to customize CRA 2. + # โ˜ข custom-react-scripts โ˜ข Latest version of original react-scripts: **1.1.14** From b2c20d41f7b02776635162ea6f401d8acb052f9e Mon Sep 17 00:00:00 2001 From: Kitze <kristijan.mkd@gmail.com> Date: Tue, 15 Jan 2019 11:40:25 +0100 Subject: [PATCH 139/140] Update README.md --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index 54e686b551c..38f725cc7d7 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,13 @@ +### ๐Ÿ™‹โ€โ™‚๏ธ Made by [@thekitze](https://twitter.com/thekitze) + +### Other projects: +- ๐Ÿซ [React Academy](https://reactacademy.io) - Interactive React and GraphQL workshops +- ๐Ÿ’Œ [Twizzy](https://twizzy.app) - A standalone app for Twitter DM +- ๐Ÿ’ป [Sizzy](https://sizzy.co) - A tool for testing responsive design on multiple devices at once +- ๐Ÿค– [JSUI](https://github.com/kitze/JSUI) - A powerful UI toolkit for managing JavaScript apps + +--- + โš ๏ธ This repo is **deprecated**. Please use [react-app-rewired](https://github.com/timarney/react-app-rewired) if you want to customize CRA 1. From 9297311d6d39a7b8b1029cddd350e347b5ce5897 Mon Sep 17 00:00:00 2001 From: Kitze <kristijan.mkd@gmail.com> Date: Thu, 25 May 2023 17:07:50 +0200 Subject: [PATCH 140/140] Update README.md --- README.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 38f725cc7d7..1fa8ebccd04 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,14 @@ ### ๐Ÿ™‹โ€โ™‚๏ธ Made by [@thekitze](https://twitter.com/thekitze) ### Other projects: +- ๐Ÿ’ป [Sizzy](https://sizzy.co) - A browser for designers and developers, focused on responsive design - ๐Ÿซ [React Academy](https://reactacademy.io) - Interactive React and GraphQL workshops -- ๐Ÿ’Œ [Twizzy](https://twizzy.app) - A standalone app for Twitter DM -- ๐Ÿ’ป [Sizzy](https://sizzy.co) - A tool for testing responsive design on multiple devices at once +- ๐Ÿ”ฎ [Glink](https://glink.so) - Changelogs, Roadmap, User Requests +- ๐Ÿถ [Benji](https://benji.so) - Ultimate wellness and productivity platform - ๐Ÿค– [JSUI](https://github.com/kitze/JSUI) - A powerful UI toolkit for managing JavaScript apps +- ๐Ÿ“น [YouTube Vlog](https://youtube.com/kitze) - Follow my journey + +<a href="https://zerotoshipped.com"><img style="width:450px" src="https://i.ibb.co/WKQPDv5/twitter-image.jpg" alt="Zero To Shipped"></a> ---