diff --git a/packages/react-scripts/scripts/utils/InterpolateHtmlPlugin.js b/packages/react-dev-utils/InterpolateHtmlPlugin.js similarity index 96% rename from packages/react-scripts/scripts/utils/InterpolateHtmlPlugin.js rename to packages/react-dev-utils/InterpolateHtmlPlugin.js index bcb3a78a775..6ac587b3dc9 100644 --- a/packages/react-scripts/scripts/utils/InterpolateHtmlPlugin.js +++ b/packages/react-dev-utils/InterpolateHtmlPlugin.js @@ -1,4 +1,3 @@ -// @remove-on-eject-begin /** * Copyright (c) 2015-present, Facebook, Inc. * All rights reserved. @@ -7,7 +6,6 @@ * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. */ -// @remove-on-eject-end // This Webpack plugin lets us interpolate custom variables into `index.html`. // Usage: `new InterpolateHtmlPlugin({ 'MY_VARIABLE': 42 })` diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md new file mode 100644 index 00000000000..8c94e372c13 --- /dev/null +++ b/packages/react-dev-utils/README.md @@ -0,0 +1,180 @@ +# react-dev-utils + +This package includes some utilities 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. + +## Usage in Create React App Projects + +These utilities come by default with [Create React App](https://github.com/facebookincubator/create-react-app), which includes it by default. **You don’t need to install it separately in Create React App projects.** + +## Usage Outside of Create React App + +If you don’t use Create React App, or if you [ejected](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject), you may keep using these utilities. Their development will be aligned with Create React App, so major versions of these utilities may come out relatively often. Feel free to fork or copy and paste them into your projects if you’d like to have more control over them, or feel free to use the old versions. Not all of them are React-specific, but we might make some of them more React-specific in the future. + +### Entry Points + +There is no single entry point. You can only import individual top-level modules. + +#### `new InterpolateHtmlPlugin(replacements: {[key:string]: string})` + +This Webpack plugin lets us interpolate custom variables into `index.html`. +It works in tandem with [HtmlWebpackPlugin](https://github.com/ampedandwired/html-dev-plugin) 2.x via its [events](https://github.com/ampedandwired/html-dev-plugin#events). + +```js +var path = require('path'); +var HtmlWebpackPlugin = require('html-dev-plugin'); +var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); + +// Webpack config +var publicUrl = '/my-custom-url'; + +module.exports = { + output: { + // ... + publicPath: publicUrl + '/' + }, + // ... + plugins: [ + // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.: + // + new InterpolateHtmlPlugin({ + PUBLIC_URL: publicUrl + // You can pass any key-value pairs, this was just an example. + // WHATEVER: 42 will replace %WHATEVER% with 42 in index.html. + }), + // Generates an `index.html` file with the