From a599b34e2f74d9bc48c96503de6029002107d4e4 Mon Sep 17 00:00:00 2001 From: Fernando Montoya Date: Tue, 27 Sep 2016 05:17:46 -0500 Subject: [PATCH 1/9] Moved Babel and ESLint config to package.json after ejecting (#773) --- scripts/eject.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/scripts/eject.js b/scripts/eject.js index 9eb6d4fd44c..d48fe6680ec 100644 --- a/scripts/eject.js +++ b/scripts/eject.js @@ -29,8 +29,6 @@ prompt( var ownPath = path.join(__dirname, '..'); var appPath = path.join(ownPath, '..', '..'); var files = [ - '.babelrc', - '.eslintrc', path.join('config', 'env.js'), path.join('config', 'paths.js'), path.join('config', 'polyfills.js'), @@ -76,6 +74,8 @@ prompt( var ownPackage = require(path.join(ownPath, 'package.json')); var appPackage = require(path.join(appPath, 'package.json')); + var babelConfig = JSON.parse(fs.readFileSync(path.join(ownPath, '.babelrc'), 'utf8')); + var eslintConfig = JSON.parse(fs.readFileSync(path.join(ownPath, '.eslintrc'), 'utf8')); var ownPackageName = ownPackage.name; console.log('Removing dependency: ' + ownPackageName); @@ -104,6 +104,12 @@ prompt( true ); + // Add Babel config + appPackage.babel = babelConfig; + + // Add ESlint config + appPackage.eslintConfig = eslintConfig; + console.log('Writing package.json'); fs.writeFileSync( path.join(appPath, 'package.json'), From 3c4777dc7d5cb7944a962bae4d19798d84ddce2c Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 27 Sep 2016 15:53:27 +0100 Subject: [PATCH 2/9] Publish - react-dev-utils@0.2.1 - react-scripts@0.6.1 --- package.json | 51 ++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 48 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 75ca1c3662a..4ce1b4d4196 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-scripts", - "version": "0.6.0", + "version": "0.6.1", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", @@ -57,7 +57,7 @@ "path-exists": "2.1.0", "postcss-loader": "0.13.0", "promise": "7.1.1", - "react-dev-utils": "^0.2.0", + "react-dev-utils": "^0.2.1", "recursive-readdir": "2.1.0", "rimraf": "2.5.4", "strip-ansi": "3.0.1", @@ -74,5 +74,50 @@ }, "optionalDependencies": { "fsevents": "1.0.14" - } + }, + "bundledDependencies": [ + "autoprefixer", + "babel-core", + "babel-eslint", + "babel-jest", + "babel-loader", + "babel-preset-react-app", + "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", + "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 8c7ad6269459022dd78faf6d70e38b96c32456b1 Mon Sep 17 00:00:00 2001 From: Mathias Biilmann Christensen Date: Sat, 6 Aug 2016 13:22:49 -0700 Subject: [PATCH 3/9] Add Netlify to deploy instructions --- template/README.md | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/template/README.md b/template/README.md index bafaaaf65b8..f44647ca3a8 100644 --- a/template/README.md +++ b/template/README.md @@ -46,6 +46,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [GitHub Pages](#github-pages) - [Heroku](#heroku) - [Modulus](#modulus) + - [Netlify](#netlify) - [Now](#now) - [Surge](#surge) - [Something Missing?](#something-missing) @@ -911,6 +912,35 @@ You can find instructions in [Deploying React with Zero Configuration](https://b See the [Modulus blog post](http://blog.modulus.io/deploying-react-apps-on-modulus) on how to deploy your react app to Modulus. +## Netlify + +**To do a manual deploy to Netlify's CDN:** + +```sh +npm install netlify-cli +netlify deploy +``` + +Choose `build` as the path to deploy. + +**To setup continuous delivery:** + +With this setup Netlify will build and deploy when you push to git or open a pull request: + +1. [Start a new netlify project](https://app.netlify.com/signup) +2. Pick your Git hosting service and select your repository +3. Click `Build your site` + +**Support for client site routing:** + +To support `pushState`, make sure to create a `public/_redirects` file with the following rewrite rules: + +``` +/* /index.html 200 +``` + +When you build the project, Create React App will place the `public` folder contents into the build output. + ### Now See [this example](https://github.com/xkawi/create-react-app-now) for a zero-configuration single-command deployment with [now](https://zeit.co/now). From 79d1e4e416b888a479250f3bd30ee2e96c1f42c4 Mon Sep 17 00:00:00 2001 From: Sebastian De Deyne Date: Fri, 30 Sep 2016 14:41:21 +0200 Subject: [PATCH 4/9] Typo fix in webpack.config.dev.js comments (#777) * Typo fix in webpack.config.dev.js comments * Typo fix in webpack.config.prod.js comments --- config/webpack.config.dev.js | 2 +- config/webpack.config.prod.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js index 67ba6f122a3..ec6befc71bc 100644 --- a/config/webpack.config.dev.js +++ b/config/webpack.config.dev.js @@ -27,7 +27,7 @@ var publicPath = '/'; // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. // Omit trailing shlash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz. var publicUrl = ''; -// Get enrivonment variables to inject into our app. +// Get environment variables to inject into our app. var env = getClientEnvironment(publicUrl); // This is the development configuration. diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js index 6549b4d8d1d..4c43cdf5193 100644 --- a/config/webpack.config.prod.js +++ b/config/webpack.config.prod.js @@ -44,7 +44,7 @@ var publicPath = ensureSlash(homepagePathname, true); // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. // Omit trailing shlash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz. var publicUrl = ensureSlash(homepagePathname, false); -// Get enrivonment variables to inject into our app. +// Get environment variables to inject into our app. var env = getClientEnvironment(publicUrl); // Assert this just to be safe. From 8c999fbe3191c0feee6a7d9be0db4bcf753ad738 Mon Sep 17 00:00:00 2001 From: Thien Do Date: Sat, 1 Oct 2016 00:06:26 +0700 Subject: [PATCH 5/9] Define process.env as object (#807) * Define process.env as object * Fix define process.env * fix NODE_ENV check * Fix style nitpick --- config/env.js | 9 +++++---- config/webpack.config.prod.js | 2 +- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/config/env.js b/config/env.js index 2bdc65afa15..66ba341b358 100644 --- a/config/env.js +++ b/config/env.js @@ -15,24 +15,25 @@ var REACT_APP = /^REACT_APP_/i; function getClientEnvironment(publicUrl) { - return Object + var processEnv = Object .keys(process.env) .filter(key => REACT_APP.test(key)) .reduce((env, key) => { - env['process.env.' + key] = JSON.stringify(process.env[key]); + env[key] = JSON.stringify(process.env[key]); return env; }, { // Useful for determining whether we’re running in production mode. // Most importantly, it switches React into the correct mode. - 'process.env.NODE_ENV': JSON.stringify( + 'NODE_ENV': JSON.stringify( process.env.NODE_ENV || 'development' ), // Useful for resolving the correct path to static assets in `public`. // For example, . // This should only be used as an escape hatch. Normally you would put // images into the `src` and `import` them in code to get their paths. - 'process.env.PUBLIC_URL': JSON.stringify(publicUrl) + 'PUBLIC_URL': JSON.stringify(publicUrl) }); + return {'process.env': processEnv}; } module.exports = getClientEnvironment; diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js index 4c43cdf5193..2fb3035719e 100644 --- a/config/webpack.config.prod.js +++ b/config/webpack.config.prod.js @@ -49,7 +49,7 @@ var env = getClientEnvironment(publicUrl); // Assert this just to be safe. // Development builds of React are slow and not intended for production. -if (env['process.env.NODE_ENV'] !== '"production"') { +if (env['process.env'].NODE_ENV !== '"production"') { throw new Error('Production builds must have NODE_ENV=production.'); } From 6189a7f757ec2f59fa26ac02532ff9d537bf6ae5 Mon Sep 17 00:00:00 2001 From: Andrew Zakordonets Date: Fri, 30 Sep 2016 19:39:24 +0200 Subject: [PATCH 6/9] Beaufity output of eject.js script (#769) * Beaufity output of eject.js script * change formatting of the eject.js output and move colors to cyan * change message about file copy * add missing three dots to some statements in eject.js script * change color of "copying files" line and do not repeat copy path anymore in log * fix merge conflict * Remove yellow color from "Removing dependency" line * changing color to "Adding dependency" line * Add line that outputs which react script is getting replaced by similar node script * remove not used anymore colors * add console line about updating Jest configs * fix typo * change formatting of replacing script output in eject.js * remove "Writing package.json" file console output * make quotes cyan in "Replacing script" console output * update console log output for Jest, Babel, ESLint update and group them under one statement * Style nits --- scripts/eject.js | 44 ++++++++++++++++++++++++++++++-------------- 1 file changed, 30 insertions(+), 14 deletions(-) diff --git a/scripts/eject.js b/scripts/eject.js index d48fe6680ec..c1355337b4c 100644 --- a/scripts/eject.js +++ b/scripts/eject.js @@ -13,18 +13,20 @@ var path = require('path'); var prompt = require('react-dev-utils/prompt'); var rimrafSync = require('rimraf').sync; var spawnSync = require('cross-spawn').sync; +var chalk = require('chalk'); +var green = chalk.green; +var cyan = chalk.cyan; prompt( 'Are you sure you want to eject? This action is permanent.', false ).then(shouldEject => { if (!shouldEject) { - console.log('Close one! Eject aborted.'); + console.log(cyan('Close one! Eject aborted.')); process.exit(1); } console.log('Ejecting...'); - console.log(); var ownPath = path.join(__dirname, '..'); var appPath = path.join(ownPath, '..', '..'); @@ -59,8 +61,10 @@ prompt( fs.mkdirSync(path.join(appPath, 'config', 'jest')); fs.mkdirSync(path.join(appPath, 'scripts')); + console.log(); + console.log('Copying files to ' + cyan(appPath)); files.forEach(function(file) { - console.log('Copying ' + file + ' to ' + appPath); + console.log(' Copying ' + cyan(file)); var content = fs .readFileSync(path.join(ownPath, file), 'utf8') // Remove dead code from .js files on eject @@ -77,8 +81,9 @@ prompt( var babelConfig = JSON.parse(fs.readFileSync(path.join(ownPath, '.babelrc'), 'utf8')); var eslintConfig = JSON.parse(fs.readFileSync(path.join(ownPath, '.eslintrc'), 'utf8')); + console.log(cyan('Updating dependencies...')); var ownPackageName = ownPackage.name; - console.log('Removing dependency: ' + ownPackageName); + console.log(' Removing dependency: ' + cyan(ownPackageName)); delete appPackage.devDependencies[ownPackageName]; Object.keys(ownPackage.dependencies).forEach(function (key) { @@ -86,18 +91,27 @@ prompt( if (ownPackage.optionalDependencies[key]) { return; } - console.log('Adding dependency: ' + key); + console.log(' Adding dependency: ' + cyan(key)); appPackage.devDependencies[key] = ownPackage.dependencies[key]; }); - - console.log('Updating scripts'); + console.log(); + console.log(cyan('Updating scripts...')); delete appPackage.scripts['eject']; Object.keys(appPackage.scripts).forEach(function (key) { appPackage.scripts[key] = appPackage.scripts[key] .replace(/react-scripts (\w+)/g, 'node scripts/$1.js'); + console.log( + ' Replacing ' + + cyan('\"react-scripts ' + key + '\"') + + ' with ' + + cyan('\"' + appPackage.scripts[key] + '\"') + ); }); + console.log(); + console.log(cyan('Adding configuration to ') + 'package.json' + cyan('...')); // Add Jest config + console.log(' Adding ' + cyan('Jest') + ' configuration'); appPackage.jest = createJestConfig( filePath => path.join('', filePath), null, @@ -105,25 +119,27 @@ prompt( ); // Add Babel config + + console.log(' Adding ' + cyan('Babel') + ' preset'); appPackage.babel = babelConfig; // Add ESlint config + console.log(' Adding ' + cyan('ESLint') +' configuration'); appPackage.eslintConfig = eslintConfig; - console.log('Writing package.json'); fs.writeFileSync( path.join(appPath, 'package.json'), JSON.stringify(appPackage, null, 2) ); console.log(); - console.log('Running npm install...'); + console.log(cyan('Running npm install...')); rimrafSync(ownPath); spawnSync('npm', ['install'], {stdio: 'inherit'}); - console.log('Ejected successfully!'); + console.log(green('Ejected successfully!')); console.log(); - console.log('Please consider sharing why you ejected in this survey:'); - console.log(' http://goo.gl/forms/Bi6CZjk1EqsdelXk1'); - console.log(); -}); + console.log(green('Please consider sharing why you ejected in this survey:')); + console.log(green(' http://goo.gl/forms/Bi6CZjk1EqsdelXk1')); + console.log() +}) From 28c2a9636bd747c3d4438286e49774c15e0c0e22 Mon Sep 17 00:00:00 2001 From: Brian Ng Date: Sat, 1 Oct 2016 04:13:42 -0500 Subject: [PATCH 7/9] Fix some typos (#809) --- config/webpack.config.dev.js | 2 +- scripts/build.js | 2 +- scripts/start.js | 2 +- scripts/test.js | 2 +- template/README.md | 56 ++++++++++++++++++------------------ 5 files changed, 32 insertions(+), 32 deletions(-) diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js index ec6befc71bc..8a8b59ed859 100644 --- a/config/webpack.config.dev.js +++ b/config/webpack.config.dev.js @@ -25,7 +25,7 @@ var paths = require('./paths'); var 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 shlash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz. +// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz. var publicUrl = ''; // Get environment variables to inject into our app. var env = getClientEnvironment(publicUrl); diff --git a/scripts/build.js b/scripts/build.js index 228658de79a..c35d6b8f274 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -12,7 +12,7 @@ // Do this as the first thing so that any code reading it knows the right env. process.env.NODE_ENV = 'production'; -// Load environment variables from .env file. Surpress warnings using silent +// Load environment variables from .env file. Suppress warnings using silent // if this file is missing. dotenv will never modify any environment variables // that have already been set. // https://github.com/motdotla/dotenv diff --git a/scripts/start.js b/scripts/start.js index 5ce896568eb..8723c281637 100644 --- a/scripts/start.js +++ b/scripts/start.js @@ -11,7 +11,7 @@ process.env.NODE_ENV = 'development'; -// Load environment variables from .env file. Surpress warnings using silent +// Load environment variables from .env file. Suppress warnings using silent // if this file is missing. dotenv will never modify any environment variables // that have already been set. // https://github.com/motdotla/dotenv diff --git a/scripts/test.js b/scripts/test.js index 0401c960600..90d1f835d54 100644 --- a/scripts/test.js +++ b/scripts/test.js @@ -12,7 +12,7 @@ process.env.NODE_ENV = 'test'; process.env.PUBLIC_URL = ''; -// Load environment variables from .env file. Surpress warnings using silent +// Load environment variables from .env file. Suppress warnings using silent // if this file is missing. dotenv will never modify any environment variables // that have already been set. // https://github.com/motdotla/dotenv diff --git a/template/README.md b/template/README.md index f44647ca3a8..a7e14dabeed 100644 --- a/template/README.md +++ b/template/README.md @@ -1,6 +1,6 @@ This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app). -Below you will find some information on how to perform common tasks. +Below you will find some information on how to perform common tasks. You can find the most recent version of this guide [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md). ## Table of Contents @@ -100,13 +100,13 @@ For the project to build, **these files must exist with exact filenames**: You can delete or rename the other files. -You may create subdirectories inside `src`. For faster rebuilds, only files inside `src` are processed by Webpack. +You may create subdirectories inside `src`. For faster rebuilds, only files inside `src` are processed by Webpack. You need to **put any JS and CSS files inside `src`**, or Webpack won’t see them. -Only files inside `public` can be used from `public/index.html`. +Only files inside `public` can be used from `public/index.html`. Read instructions below for using assets from JavaScript and HTML. -You can, however, create more top-level directories. +You can, however, create more top-level directories. They will not be included in the production build so you can use them for things like documentation. ## Available Scripts @@ -123,7 +123,7 @@ You will also see any lint errors in the console. ### `npm test` -Launches the test runner in the interactive watch mode. +Launches the test runner in the interactive watch mode. See the section about [running tests](#running-tests) for more information. ### `npm run build` @@ -189,7 +189,7 @@ npm install --save ## Importing a Component -This project setup supports ES6 modules thanks to Babel. +This project setup supports ES6 modules thanks to Babel. While you can still use `require()` and `module.exports`, we encourage you to use [`import` and `export`](http://exploringjs.com/es6/ch_modules.html) instead. For example: @@ -323,7 +323,7 @@ function Header() { export default function Header; ``` -This ensures that when the project is built, webpack will correctly move the images into the build folder, and provide us with correct paths. +This ensures that when the project is built, Webpack will correctly move the images into the build folder, and provide us with correct paths. This works in CSS too: @@ -337,7 +337,7 @@ Webpack finds all relative module references in CSS (they start with `./`) and r Please be advised that this is also a custom feature of Webpack. -**It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images). +**It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images). An alternative way of handling static assets is described in the next section. ## Using the `public` Folder @@ -362,7 +362,7 @@ Inside `index.html`, you can use it like this: Only files inside the `public` folder will be accessible by `%PUBLIC_URL%` prefix. If you need to use a file from `src` or `node_modules`, you’ll have to copy it there to explicitly specify your intention to make this file a part of the build. -When you run `npm run build`, Create React App will substitute `%PUBLIC_URL%` with a correct absolute path so your project works even if you use client-side routing or host it at a non-root URL. +When you run `npm run build`, Create React App will substitute `%PUBLIC_URL%` with a correct absolute path so your project works even if you use client-side routing or host it at a non-root URL. In JavaScript code, you can use `process.env.PUBLIC_URL` for similar purposes: @@ -511,13 +511,13 @@ REACT_APP_SECRET_CODE=abcdef npm start >Note: this feature is available with `react-scripts@0.5.0` and higher. -To define permanent environment vairables, create a file called `.env` in the root of your project: +To define permanent environment variables, create a file called `.env` in the root of your project: ``` REACT_APP_SECRET_CODE=abcdef ``` -These variables will act as the defaults if the machine does not explicitly set them. +These variables will act as the defaults if the machine does not explicitly set them. Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) for more details. >Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need @@ -525,14 +525,14 @@ these defined as well. Consult their documentation how to do this. For example, ## Can I Use Decorators? -Many popular libraries use [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) in their documentation. +Many popular libraries use [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) in their documentation. Create React App doesn’t support decorator syntax at the moment because: * It is an experimental proposal and is subject to change. * The current specification version is not officially supported by Babel. * If the specification changes, we won’t be able to write a codemod because we don’t use them internally at Facebook. -However in many cases you can rewrite decorator-based code without decorators just as fine. +However in many cases you can rewrite decorator-based code without decorators just as fine. Please refer to these two threads for reference: * [#214](https://github.com/facebookincubator/create-react-app/issues/214) @@ -548,7 +548,7 @@ Check out [this tutorial](https://www.fullstackreact.com/articles/using-create-r >Note: this feature is available with `react-scripts@0.2.3` and higher. -People often serve the front-end React app from the same host and port as their backend implementation. +People often serve the front-end React app from the same host and port as their backend implementation. For example, a production setup might look like this after the app is deployed: ``` @@ -575,7 +575,7 @@ Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow- Keep in mind that `proxy` only has effect in development (with `npm start`), and it is up to you to ensure that URLs like `/api/todos` point to the right thing in production. You don’t have to use the `/api` prefix. Any unrecognized request without a `text/html` accept header will be redirected to the specified `proxy`. -Currently the `proxy` option only handles HTTP requests, and it won’t proxy WebSocket connections. +Currently the `proxy` option only handles HTTP requests, and it won’t proxy WebSocket connections. If the `proxy` option is **not** flexible enough for you, alternatively you can: * Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)). @@ -623,7 +623,7 @@ If you use a Node server, you can even share the route matching logic between th ## Running Tests ->Note: this feature is available with `react-scripts@0.3.0` and higher. +>Note: this feature is available with `react-scripts@0.3.0` and higher. >[Read the migration guide to learn how to enable it in older projects!](https://github.com/facebookincubator/create-react-app/blob/master/CHANGELOG.md#migrating-from-023-to-030) Create React App uses [Jest](https://facebook.github.io/jest/) as its test runner. To prepare for this integration, we did a [major revamp](https://facebook.github.io/jest/blog/2016/09/01/jest-15.html) of Jest so if you heard bad things about it years ago, give it another try. @@ -677,7 +677,7 @@ it('sums numbers', () => { }); ``` -All `expect()` matchers supported by Jest are [extensively documented here](http://facebook.github.io/jest/docs/api.html#expect-value). +All `expect()` matchers supported by Jest are [extensively documented here](http://facebook.github.io/jest/docs/api.html#expect-value). You can also use [`jest.fn()` and `expect(fn).toBeCalled()`](http://facebook.github.io/jest/docs/api.html#tobecalled) to create “spies” or mock functions. ### Testing Components @@ -717,7 +717,7 @@ it('renders without crashing', () => { }); ``` -Unlike the previous smoke test using `ReactDOM.render()`, this test only renders `` and doesn’t go deeper. For example, even if `` itself renders a `