From 360fa27cf217aa8a86ae55484ebf850709b924da Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Wed, 11 Oct 2017 10:07:56 -0400 Subject: [PATCH 1/4] `react-error-overlay` has no dependencies now (#3263) * `react-error-overlay` has no dependencies now (it's bundled) * Use babel 6 for now --- packages/react-error-overlay/package.json | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json index 82ae43ec628..cb0a3193fec 100644 --- a/packages/react-error-overlay/package.json +++ b/packages/react-error-overlay/package.json @@ -30,22 +30,14 @@ "lib/", "middleware.js" ], - "dependencies": { + "devDependencies": { "anser": "1.4.1", "babel-code-frame": "6.22.0", - "babel-runtime": "6.26.0", - "html-entities": "1.2.1", - "object-assign": "4.1.1", - "promise": "8.0.1", - "react": "^15 || ^16", - "react-dom": "^15 || ^16", - "settle-promise": "1.0.0", - "source-map": "0.5.6" - }, - "devDependencies": { + "babel-core": "^6.26.0", "babel-eslint": "7.2.3", - "babel-preset-react-app": "^3.0.3", "babel-loader": "^7.1.2", + "babel-preset-react-app": "^3.0.3", + "babel-runtime": "6.26.0", "chalk": "^2.1.0", "chokidar": "^1.7.0", "cross-env": "5.0.5", @@ -56,10 +48,17 @@ "eslint-plugin-jsx-a11y": "5.1.1", "eslint-plugin-react": "7.1.0", "flow-bin": "^0.54.0", + "html-entities": "1.2.1", "jest": "20.0.4", "jest-fetch-mock": "1.2.1", + "object-assign": "4.1.1", + "promise": "8.0.1", "raw-loader": "^0.5.1", + "react": "^16.0.0", + "react-dom": "^16.0.0", "rimraf": "^2.6.1", + "settle-promise": "1.0.0", + "source-map": "0.5.6", "webpack": "^3.6.0" }, "jest": { From 86b4b6ab858f0e46709ef867dc246c7f79f2998b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Ericson?= Date: Wed, 11 Oct 2017 11:27:40 -0300 Subject: [PATCH 2/4] Add external links to deployment services (#3265) --- packages/react-scripts/template/README.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 9daa9992fd4..61f32665867 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1816,11 +1816,11 @@ If you are not using the HTML5 `pushState` history API or not using client-side This will make sure that all the asset paths are relative to `index.html`. You will then be able to move your app from `http://mywebsite.com` to `http://mywebsite.com/relativepath` or even `http://mywebsite.com/relative/path` without having to rebuild it. -### Azure +### [Azure](https://azure.microsoft.com/) -See [this](https://medium.com/@to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321) blog post on how to deploy your React app to [Microsoft Azure](https://azure.microsoft.com/). +See [this](https://medium.com/@to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321) blog post on how to deploy your React app to Microsoft Azure. -### Firebase +### [Firebase](https://firebase.google.com/) Install the Firebase CLI if you haven’t already by running `npm install -g firebase-tools`. Sign up for a [Firebase account](https://console.firebase.google.com/) and create a new project. Run `firebase login` and login with your previous created Firebase account. @@ -1881,7 +1881,7 @@ Now, after you create a production build with `npm run build`, you can deploy it For more information see [Add Firebase to your JavaScript Project](https://firebase.google.com/docs/web/setup). -### GitHub Pages +### [GitHub Pages](https://pages.github.com/) >Note: this feature is available with `react-scripts@0.2.0` and higher. @@ -1951,7 +1951,7 @@ GitHub Pages doesn’t support routers that use the HTML5 `pushState` history AP * You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://reacttraining.com/react-router/web/api/Router) about different history implementations in React Router. * Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a special redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages). -### Heroku +### [Heroku](https://www.heroku.com/) Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).
You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration). @@ -1989,7 +1989,7 @@ remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/ In this case, ensure that the file is there with the proper lettercase and that’s not ignored on your local `.gitignore` or `~/.gitignore_global`. -### Netlify +### [Netlify](https://www.netlify.com/) **To do a manual deploy to Netlify’s CDN:** @@ -2018,9 +2018,9 @@ To support `pushState`, make sure to create a `public/_redirects` file with the When you build the project, Create React App will place the `public` folder contents into the build output. -### Now +### [Now](https://zeit.co/now) -[now](https://zeit.co/now) offers a zero-configuration single-command deployment. You can use `now` to deploy your app for free. +Now offers a zero-configuration single-command deployment. You can use `now` to deploy your app for free. 1. Install the `now` command-line tool either via the recommended [desktop tool](https://zeit.co/download) or via node with `npm install -g now`. @@ -2038,11 +2038,11 @@ When you build the project, Create React App will place the `public` folder cont Details are available in [this article.](https://zeit.co/blog/unlimited-static) -### S3 and CloudFront +### [S3](https://aws.amazon.com/s3) and [CloudFront](https://aws.amazon.com/cloudfront/) -See this [blog post](https://medium.com/@omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af) on how to deploy your React app to Amazon Web Services [S3](https://aws.amazon.com/s3) and [CloudFront](https://aws.amazon.com/cloudfront/). +See this [blog post](https://medium.com/@omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af) on how to deploy your React app to Amazon Web Services S3 and CloudFront. -### Surge +### [Surge](https://surge.sh/) Install the Surge CLI if you haven’t already by running `npm install -g surge`. Run the `surge` command and log in you or create a new account. From 9ce144ed90c37f116b8457821d36dba2ceb0490a Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Wed, 11 Oct 2017 14:20:23 -0400 Subject: [PATCH 3/4] Add warning when using `react-error-overlay` in production (#3264) * Add a warning when running minified * Add more robust check * Update index.js --- packages/react-error-overlay/src/index.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/react-error-overlay/src/index.js b/packages/react-error-overlay/src/index.js index a800595cffb..8bc61ca250e 100644 --- a/packages/react-error-overlay/src/index.js +++ b/packages/react-error-overlay/src/index.js @@ -167,3 +167,10 @@ window.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__.iframeReady = function iframeReady() isLoadingIframe = false; updateIframeContent(); }; + +if (process.env.NODE_ENV === 'production') { + console.warn( + 'react-error-overlay is not meant for use in production. You should ' + + 'ensure it is not included in your build to reduce bundle size.' + ); +} From 991b092c893b916e6fd34e408e96a395d47b6008 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Wed, 11 Oct 2017 18:16:38 -0400 Subject: [PATCH 4/4] Use production React version for bundled overlay (#3267) * Use production React version * We cannot strip our own checks if production * Keep the sourcemap during minify * Prevent devtools pollution * Add some comments * sigh --- packages/react-error-overlay/package.json | 3 +-- .../webpack.config.iframe.js | 24 ++++++++++++++++++- .../react-error-overlay/webpack.config.js | 1 - 3 files changed, 24 insertions(+), 4 deletions(-) diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json index cb0a3193fec..9e36bf7e885 100644 --- a/packages/react-error-overlay/package.json +++ b/packages/react-error-overlay/package.json @@ -27,8 +27,7 @@ ], "author": "Joe Haddad ", "files": [ - "lib/", - "middleware.js" + "lib/index.js" ], "devDependencies": { "anser": "1.4.1", diff --git a/packages/react-error-overlay/webpack.config.iframe.js b/packages/react-error-overlay/webpack.config.iframe.js index 9fa742b720b..031762e5937 100644 --- a/packages/react-error-overlay/webpack.config.iframe.js +++ b/packages/react-error-overlay/webpack.config.iframe.js @@ -7,9 +7,9 @@ 'use strict'; const path = require('path'); +const webpack = require('webpack'); module.exports = { - devtool: 'cheap-module-source-map', entry: './src/iframeScript.js', output: { path: path.join(__dirname, './lib'), @@ -24,4 +24,26 @@ module.exports = { }, ], }, + plugins: [ + new webpack.DefinePlugin({ + // We set process.env.NODE_ENV to 'production' so that React is built + // in production mode. + 'process.env': { NODE_ENV: '"production"' }, + // This prevents our bundled React from accidentally hijacking devtools. + __REACT_DEVTOOLS_GLOBAL_HOOK__: + '__REACT_ERROR_OVERLAY_GLOBAL_HOOK_NOOP__', + }), + // This code is embedded as a string, so it would never be optimized + // elsewhere. + new webpack.optimize.UglifyJsPlugin({ + compress: { + warnings: false, + comparisons: false, + }, + output: { + comments: false, + ascii_only: false, + }, + }), + ], }; diff --git a/packages/react-error-overlay/webpack.config.js b/packages/react-error-overlay/webpack.config.js index 5d640e05ca3..bc8b363f765 100644 --- a/packages/react-error-overlay/webpack.config.js +++ b/packages/react-error-overlay/webpack.config.js @@ -9,7 +9,6 @@ const path = require('path'); module.exports = { - devtool: 'cheap-module-source-map', entry: './src/index.js', output: { path: path.join(__dirname, './lib'),