3.4.0 Changes

Author: devloco

packages/react-dev-utils/InterpolateHtmlPlugin.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-// This Webpack plugin lets us interpolate custom variables into `index.html`.
+// This webpack plugin lets us interpolate custom variables into `index.html`.
 // Usage: `new InterpolateHtmlPlugin(HtmlWebpackPlugin, { 'MY_VARIABLE': 42 })`
 // Then, you can use %MY_VARIABLE% in your `index.html`.
 

packages/react-dev-utils/README.md

@@ -20,15 +20,15 @@ There is no single entry point. You can only import individual top-level modules
 
 #### `new InterpolateHtmlPlugin(htmlWebpackPlugin: HtmlWebpackPlugin, replacements: {[key:string]: string})`
 
-This Webpack plugin lets us interpolate custom variables into `index.html`.<br>
+This webpack plugin lets us interpolate custom variables into `index.html`.<br>
 It works in tandem with [HtmlWebpackPlugin](https://github.com/ampedandwired/html-webpack-plugin) 2.x via its [events](https://github.com/ampedandwired/html-webpack-plugin#events).
 
 ```js
 var path = require('path');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 
-// Webpack config
+// webpack config
 var publicUrl = '/my-custom-url';
 
 module.exports = {
@@ -58,15 +58,15 @@ module.exports = {
 
 #### `new InlineChunkHtmlPlugin(htmlWebpackPlugin: HtmlWebpackPlugin, tests: Regex[])`
 
-This Webpack plugin inlines script chunks into `index.html`.<br>
+This webpack plugin inlines script chunks into `index.html`.<br>
 It works in tandem with [HtmlWebpackPlugin](https://github.com/ampedandwired/html-webpack-plugin) 4.x.
 
 ```js
 var path = require('path');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 
-// Webpack config
+// webpack config
 var publicUrl = '/my-custom-url';
 
 module.exports = {
@@ -91,7 +91,7 @@ module.exports = {
 
 #### `new ModuleScopePlugin(appSrc: string | string[], allowedFiles?: string[])`
 
-This Webpack plugin ensures that relative imports from app's source directories don't reach outside of it.
+This webpack plugin ensures that relative imports from app's source directories don't reach outside of it.
 
 ```js
 var path = require('path');
@@ -113,21 +113,21 @@ module.exports = {
 
 #### `new WatchMissingNodeModulesPlugin(nodeModulesPath: string)`
 
-This Webpack plugin ensures `npm install <library>` forces a project rebuild.<br>
-We’re not sure why this isn't Webpack's default behavior.<br>
+This webpack plugin ensures `npm install <library>` forces a project rebuild.<br>
+We’re not sure why this isn't webpack's default behavior.<br>
 See [#186](https://github.com/facebook/create-react-app/issues/186) for details.
 
 ```js
 var path = require('path');
 var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 
-// Webpack config
+// webpack config
 module.exports = {
   // ...
   plugins: [
     // ...
     // If you require a missing module and then `npm install` it, you still have
-    // to restart the development server for Webpack to discover it. This plugin
+    // to restart the development server for webpack to discover it. This plugin
     // makes the discovery automatic so you don't have to restart.
     // See https://github.com/facebook/create-react-app/issues/186
     new WatchMissingNodeModulesPlugin(path.resolve('node_modules')),
@@ -287,9 +287,14 @@ getProcessForPort(3000);
 
 On macOS, tries to find a known running editor process and opens the file in it. It can also be explicitly configured by `REACT_EDITOR`, `VISUAL`, or `EDITOR` environment variables. For example, you can put `REACT_EDITOR=atom` in your `.env.local` file, and Create React App will respect that.
 
-#### `noopServiceWorkerMiddleware(): ExpressMiddleware`
+#### `noopServiceWorkerMiddleware(servedPath: string): ExpressMiddleware`
 
-Returns Express middleware that serves a `/service-worker.js` that resets any previously set service worker configuration. Useful for development.
+Returns Express middleware that serves a `${servedPath}/service-worker.js` that resets any previously set service worker configuration. Useful for development.
+
+#### `redirectServedPathMiddleware(servedPath: string): ExpressMiddleware`
+
+Returns Express middleware that redirects to `${servedPath}/${req.path}`, if `req.url`
+does not start with `servedPath`. Useful for development.
 
 #### `openBrowser(url: string): boolean`
 
@@ -310,11 +315,11 @@ if (openBrowser('http://localhost:3000')) {
 
 Prints hosting instructions after the project is built.
 
-Pass your parsed `package.json` object as `appPackage`, your the URL where you plan to host the app as `publicUrl`, `output.publicPath` from your Webpack configuration as `publicPath`, the `buildFolder` name, and whether to `useYarn` in instructions.
+Pass your parsed `package.json` object as `appPackage`, your the URL where you plan to host the app as `publicUrl`, `output.publicPath` from your webpack configuration as `publicPath`, the `buildFolder` name, and whether to `useYarn` in instructions.
 
 ```js
 const appPackage = require(paths.appPackageJson);
-const publicUrl = paths.publicUrl;
+const publicUrl = paths.publicUrlOrPath;
 const publicPath = config.output.publicPath;
 printHostingInstructions(appPackage, publicUrl, publicPath, 'build', true);
 ```
@@ -327,7 +332,7 @@ Returns a Promise resolving to either `defaultPort` or next available port if th
 
 ##### `createCompiler(args: Object): WebpackCompiler`
 
-Creates a Webpack compiler instance for WebpackDevServer with built-in helpful messages.
+Creates a webpack compiler instance for WebpackDevServer with built-in helpful messages.
 
 The `args` object accepts a number of properties:
 
@@ -340,22 +345,22 @@ The `args` object accepts a number of properties:
 - **tscCompileOnError** `boolean`: If `true`, errors in TypeScript type checking will not prevent start script from running app, and will not cause build script to exit unsuccessfully. Also downgrades all TypeScript type checking error messages to warning messages.
 - **webpack** `function`: A reference to the webpack constructor.
 
-##### `prepareProxy(proxySetting: string, appPublicFolder: string): Object`
+##### `prepareProxy(proxySetting: string, appPublicFolder: string, servedPathname: string): Object`
 
 Creates a WebpackDevServer `proxy` configuration object from the `proxy` setting in `package.json`.
 
-##### `prepareUrls(protocol: string, host: string, port: number): Object`
+##### `prepareUrls(protocol: string, host: string, port: number, pathname: string = '/'): Object`
 
 Returns an object with local and remote URLs for the development server. Pass this object to `createCompiler()` described above.
 
 #### `webpackHotDevClient`
 
 This is an alternative client for [WebpackDevServer](https://github.com/webpack/webpack-dev-server) that shows a syntax error overlay.
 
-It currently supports only Webpack 3.x.
+It currently supports only webpack 3.x.
 
 ```js
-// Webpack development config
+// webpack development config
 module.exports = {
   // ...
   entry: [

packages/react-dev-utils/WatchMissingNodeModulesPlugin.js

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-// This Webpack plugin ensures `npm install <library>` forces a project rebuild.
-// We’re not sure why this isn't Webpack's default behavior.
+// This webpack plugin ensures `npm install <library>` forces a project rebuild.
+// We’re not sure why this isn't webpack's default behavior.
 // See https://github.com/facebook/create-react-app/issues/186.
 
 'use strict';

packages/react-dev-utils/WebpackDevServerUtils.js

@@ -22,20 +22,20 @@ const forkTsCheckerWebpackPlugin = require('./ForkTsCheckerWebpackPlugin');
 
 const isInteractive = process.stdout.isTTY;
 
-function prepareUrls(protocol, host, port) {
+function prepareUrls(protocol, host, port, pathname = '/') {
   const formatUrl = hostname =>
     url.format({
       protocol,
       hostname,
       port,
-      pathname: '/',
+      pathname,
     });
   const prettyPrintUrl = hostname =>
     url.format({
       protocol,
       hostname,
       port: chalk.bold(port),
-      pathname: '/',
+      pathname,
     });
 
   const isUnspecifiedHost = host === '0.0.0.0' || host === '::';
@@ -111,7 +111,7 @@ function createCompiler({
   tscCompileOnError,
   webpack,
 }) {
-  // "Compiler" is a low-level interface to Webpack.
+  // "Compiler" is a low-level interface to webpack.
   // It lets us listen to some events and provide our own custom messages.
   let compiler;
   try {
@@ -124,7 +124,7 @@ function createCompiler({
     process.exit(1);
   }
 
-  // "invalid" event fires when you have changed a file, and Webpack is
+  // "invalid" event fires when you have changed a file, and webpack is
   // 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.
@@ -162,14 +162,14 @@ function createCompiler({
       });
   }
 
-  // "done" event fires when Webpack has finished recompiling the bundle.
+  // "done" event fires when webpack has finished recompiling the bundle.
   // Whether or not you have warnings or errors, you will get this event.
   compiler.hooks.done.tap('done', async stats => {
     if (isInteractive) {
       clearConsole();
     }
 
-    // We have switched off the default Webpack output in WebpackDevServer
+    // We have switched off the default webpack output in WebpackDevServer
     // options so we are going to "massage" the warnings and errors and present
     // them in a readable focused way.
     // We only construct the warnings and errors for speed:
@@ -356,7 +356,7 @@ function onProxyError(proxy) {
   };
 }
 
-function prepareProxy(proxy, appPublicFolder) {
+function prepareProxy(proxy, appPublicFolder, servedPathname) {
   // `proxy` lets you specify alternate servers for specific requests.
   if (!proxy) {
     return undefined;
@@ -377,10 +377,17 @@ function prepareProxy(proxy, appPublicFolder) {
   // If proxy is specified, let it handle any request except for
   // files in the public folder and requests to the WebpackDevServer socket endpoint.
   // https://github.com/facebook/create-react-app/issues/6720
+  const sockPath = process.env.WDS_SOCKET_PATH || '/sockjs-node';
+  const isDefaultSockHost = !process.env.WDS_SOCKET_HOST;
   function mayProxy(pathname) {
-    const maybePublicPath = path.resolve(appPublicFolder, pathname.slice(1));
+    const maybePublicPath = path.resolve(
+      appPublicFolder,
+      pathname.replace(new RegExp('^' + servedPathname), '')
+    );
     const isPublicFileRequest = fs.existsSync(maybePublicPath);
-    const isWdsEndpointRequest = pathname.startsWith('/sockjs-node'); // used by webpackHotDevClient
+    // used by webpackHotDevClient
+    const isWdsEndpointRequest =
+      isDefaultSockHost && pathname.startsWith(sockPath);
     return !(isPublicFileRequest || isWdsEndpointRequest);
   }
 

packages/react-dev-utils/__tests__/getPublicUrlOrPath.test.js

@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const getPublicUrlOrPath = require('../getPublicUrlOrPath');
+
+const tests = [
+  // DEVELOPMENT with homepage
+  { dev: true, homepage: '/', expect: '/' },
+  { dev: true, homepage: '/test', expect: '/test/' },
+  { dev: true, homepage: '/test/', expect: '/test/' },
+  { dev: true, homepage: './', expect: '/' },
+  { dev: true, homepage: '../', expect: '/' },
+  { dev: true, homepage: '../test', expect: '/' },
+  { dev: true, homepage: './test/path', expect: '/' },
+  { dev: true, homepage: 'https://create-react-app.dev/', expect: '/' },
+  {
+    dev: true,
+    homepage: 'https://create-react-app.dev/test',
+    expect: '/test/',
+  },
+  // DEVELOPMENT with publicURL
+  { dev: true, publicUrl: '/', expect: '/' },
+  { dev: true, publicUrl: '/test', expect: '/test/' },
+  { dev: true, publicUrl: '/test/', expect: '/test/' },
+  { dev: true, publicUrl: './', expect: '/' },
+  { dev: true, publicUrl: '../', expect: '/' },
+  { dev: true, publicUrl: '../test', expect: '/' },
+  { dev: true, publicUrl: './test/path', expect: '/' },
+  { dev: true, publicUrl: 'https://create-react-app.dev/', expect: '/' },
+  {
+    dev: true,
+    publicUrl: 'https://create-react-app.dev/test',
+    expect: '/test/',
+  },
+  // DEVELOPMENT with publicURL and homepage
+  { dev: true, publicUrl: '/', homepage: '/test', expect: '/' },
+  { dev: true, publicUrl: '/test', homepage: '/path', expect: '/test/' },
+  { dev: true, publicUrl: '/test/', homepage: '/test/path', expect: '/test/' },
+  { dev: true, publicUrl: './', homepage: '/test', expect: '/' },
+  { dev: true, publicUrl: '../', homepage: '/test', expect: '/' },
+  { dev: true, publicUrl: '../test', homepage: '/test', expect: '/' },
+  { dev: true, publicUrl: './test/path', homepage: '/test', expect: '/' },
+  {
+    dev: true,
+    publicUrl: 'https://create-react-app.dev/',
+    homepage: '/test',
+    expect: '/',
+  },
+  {
+    dev: true,
+    publicUrl: 'https://create-react-app.dev/test',
+    homepage: '/path',
+    expect: '/test/',
+  },
+
+  // PRODUCTION with homepage
+  { dev: false, homepage: '/', expect: '/' },
+  { dev: false, homepage: '/test', expect: '/test/' },
+  { dev: false, homepage: '/test/', expect: '/test/' },
+  { dev: false, homepage: './', expect: './' },
+  { dev: false, homepage: '../', expect: '../' },
+  { dev: false, homepage: '../test', expect: '../test/' },
+  { dev: false, homepage: './test/path', expect: './test/path/' },
+  { dev: false, homepage: 'https://create-react-app.dev/', expect: '/' },
+  {
+    dev: false,
+    homepage: 'https://create-react-app.dev/test',
+    expect: '/test/',
+  },
+  // PRODUCTION with publicUrl
+  { dev: false, publicUrl: '/', expect: '/' },
+  { dev: false, publicUrl: '/test', expect: '/test/' },
+  { dev: false, publicUrl: '/test/', expect: '/test/' },
+  { dev: false, publicUrl: './', expect: './' },
+  { dev: false, publicUrl: '../', expect: '../' },
+  { dev: false, publicUrl: '../test', expect: '../test/' },
+  { dev: false, publicUrl: './test/path', expect: './test/path/' },
+  {
+    dev: false,
+    publicUrl: 'https://create-react-app.dev/',
+    expect: 'https://create-react-app.dev/',
+  },
+  {
+    dev: false,
+    publicUrl: 'https://create-react-app.dev/test',
+    expect: 'https://create-react-app.dev/test/',
+  },
+  // PRODUCTION with publicUrl and homepage
+  { dev: false, publicUrl: '/', homepage: '/test', expect: '/' },
+  { dev: false, publicUrl: '/test', homepage: '/path', expect: '/test/' },
+  { dev: false, publicUrl: '/test/', homepage: '/test/path', expect: '/test/' },
+  { dev: false, publicUrl: './', homepage: '/test', expect: './' },
+  { dev: false, publicUrl: '../', homepage: '/test', expect: '../' },
+  { dev: false, publicUrl: '../test', homepage: '/test', expect: '../test/' },
+  {
+    dev: false,
+    publicUrl: './test/path',
+    homepage: '/test',
+    expect: './test/path/',
+  },
+  {
+    dev: false,
+    publicUrl: 'https://create-react-app.dev/',
+    homepage: '/test',
+    expect: 'https://create-react-app.dev/',
+  },
+  {
+    dev: false,
+    publicUrl: 'https://create-react-app.dev/test',
+    homepage: '/path',
+    expect: 'https://create-react-app.dev/test/',
+  },
+];
+
+describe('getPublicUrlOrPath', () => {
+  tests.forEach(t =>
+    it(JSON.stringify(t), () => {
+      const actual = getPublicUrlOrPath(t.dev, t.homepage, t.publicUrl);
+      expect(actual).toBe(t.expect);
+    })
+  );
+});

packages/react-dev-utils/formatWebpackMessages.js

@@ -18,7 +18,7 @@ function isLikelyASyntaxError(message) {
 function formatMessage(message) {
   let lines = message.split('\n');
 
-  // Strip Webpack-added headers off errors/warnings
+  // Strip webpack-added headers off errors/warnings
   // https://github.com/webpack/webpack/blob/master/lib/ModuleError.js
   lines = lines.filter(line => !/Module [A-z ]+\(from/.test(line));
 
@@ -85,7 +85,7 @@ function formatMessage(message) {
   message = lines.join('\n');
   // Internal stacks are generally useless so we strip them... with the
   // exception of stacks containing `webpack:` because they're normally
-  // from user code generated by Webpack. For more information see
+  // from user code generated by webpack. For more information see
   // https://github.com/facebook/create-react-app/pull/1050
   message = message.replace(
     /^\s*at\s((?!webpack:).)*:\d+:\d+[\s)]*(\n|$)/gm,