From 2a1a04e62f719d144d73ad3a5b47a824a679551b Mon Sep 17 00:00:00 2001 From: Nikolay Stoynov Date: Mon, 24 Jun 2019 22:45:17 +0300 Subject: [PATCH 1/5] Handle browser arguments --- packages/react-dev-utils/openBrowser.js | 29 ++++++++++++++++++++----- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/packages/react-dev-utils/openBrowser.js b/packages/react-dev-utils/openBrowser.js index beb250f947c..acd8ae2eeca 100644 --- a/packages/react-dev-utils/openBrowser.js +++ b/packages/react-dev-utils/openBrowser.js @@ -25,8 +25,9 @@ function getBrowserEnv() { // Attempt to honor this environment variable. // It is specific to the operating system. // See https://github.com/sindresorhus/open#app for documentation. - const value = process.env.BROWSER; + let value = process.env.BROWSER; let action; + let args = []; if (!value) { // Default. action = Actions.BROWSER; @@ -35,9 +36,22 @@ function getBrowserEnv() { } else if (value.toLowerCase() === 'none') { action = Actions.NONE; } else { + // Try detecting browser arguments + // Because Chrome for OSX is "google chrome", splitting simply by whitespace is not possible + if (value.startsWith(OSX_CHROME)) { + value = OSX_CHROME; + args = value.substring(OSX_CHROME.length + 1).split(' '); + } else { + const argsIndex = value.indexOf(' '); + if (argsIndex > -1) { + args = value.substring(argsIndex + 1).split(' '); + value = value.substring(0, argsIndex); + } + } + if (args[0] === '') args.pop(); // No arguments action = Actions.BROWSER; } - return { action, value }; + return { action, value, args }; } function executeNodeScript(scriptPath, url) { @@ -61,7 +75,7 @@ function executeNodeScript(scriptPath, url) { return true; } -function startBrowserProcess(browser, url) { +function startBrowserProcess(browser, url, args) { // If we're on OS X, the user hasn't specifically // requested a different browser, we can try opening // Chrome with AppleScript. This lets us reuse an @@ -93,6 +107,11 @@ function startBrowserProcess(browser, url) { browser = undefined; } + // If there are arguments, they must be passed as array with the browser + if (typeof browser === 'string' && args.length > 0) { + browser = [browser].concat(args); + } + // Fallback to open // (It will always open new tab) try { @@ -109,7 +128,7 @@ function startBrowserProcess(browser, url) { * true if it opened a browser or ran a node.js script, otherwise false. */ function openBrowser(url) { - const { action, value } = getBrowserEnv(); + const { action, value, args } = getBrowserEnv(); switch (action) { case Actions.NONE: // Special case: BROWSER="none" will prevent opening completely. @@ -117,7 +136,7 @@ function openBrowser(url) { case Actions.SCRIPT: return executeNodeScript(value, url); case Actions.BROWSER: - return startBrowserProcess(value, url); + return startBrowserProcess(value, url, args); default: throw new Error('Not implemented.'); } From 1843f3b291988cacdf0b3b7f373f676d513b59bd Mon Sep 17 00:00:00 2001 From: Nikolay Stoynov Date: Mon, 24 Jun 2019 23:16:53 +0300 Subject: [PATCH 2/5] Make eslint happy --- packages/react-dev-utils/openBrowser.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/react-dev-utils/openBrowser.js b/packages/react-dev-utils/openBrowser.js index acd8ae2eeca..0cfff79b3b1 100644 --- a/packages/react-dev-utils/openBrowser.js +++ b/packages/react-dev-utils/openBrowser.js @@ -48,7 +48,12 @@ function getBrowserEnv() { value = value.substring(0, argsIndex); } } - if (args[0] === '') args.pop(); // No arguments + + if (args[0] === '') { + // No arguments, remove dangling value + args.pop(); + } + action = Actions.BROWSER; } return { action, value, args }; From 2742bf0ea8e70577c1e1d41b59e2ea75925eb1d4 Mon Sep 17 00:00:00 2001 From: Nikolay Stoynov Date: Tue, 25 Jun 2019 23:58:53 +0300 Subject: [PATCH 3/5] Load browser arguments from a separate variable --- packages/react-dev-utils/openBrowser.js | 24 ++++-------------------- 1 file changed, 4 insertions(+), 20 deletions(-) diff --git a/packages/react-dev-utils/openBrowser.js b/packages/react-dev-utils/openBrowser.js index 0cfff79b3b1..22d3c44d852 100644 --- a/packages/react-dev-utils/openBrowser.js +++ b/packages/react-dev-utils/openBrowser.js @@ -25,9 +25,11 @@ function getBrowserEnv() { // Attempt to honor this environment variable. // It is specific to the operating system. // See https://github.com/sindresorhus/open#app for documentation. - let value = process.env.BROWSER; + const value = process.env.BROWSER; + const args = process.env.BROWSER_ARGS + ? process.env.BROWSER_ARGS.split(' ') + : []; let action; - let args = []; if (!value) { // Default. action = Actions.BROWSER; @@ -36,24 +38,6 @@ function getBrowserEnv() { } else if (value.toLowerCase() === 'none') { action = Actions.NONE; } else { - // Try detecting browser arguments - // Because Chrome for OSX is "google chrome", splitting simply by whitespace is not possible - if (value.startsWith(OSX_CHROME)) { - value = OSX_CHROME; - args = value.substring(OSX_CHROME.length + 1).split(' '); - } else { - const argsIndex = value.indexOf(' '); - if (argsIndex > -1) { - args = value.substring(argsIndex + 1).split(' '); - value = value.substring(0, argsIndex); - } - } - - if (args[0] === '') { - // No arguments, remove dangling value - args.pop(); - } - action = Actions.BROWSER; } return { action, value, args }; From ca68ccbc355a9241bf62603cd33fbb1ce3aeb974 Mon Sep 17 00:00:00 2001 From: Nikolay Stoynov Date: Wed, 26 Jun 2019 00:25:12 +0300 Subject: [PATCH 4/5] Add docs about the new BROWSER_ARGS env variable --- docusaurus/docs/advanced-configuration.md | 31 ++++++++++++----------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md index 413bca5051b..a060edaae39 100644 --- a/docusaurus/docs/advanced-configuration.md +++ b/docusaurus/docs/advanced-configuration.md @@ -3,21 +3,22 @@ id: advanced-configuration title: Advanced Configuration --- -You can adjust various development and production settings by setting environment variables in your shell or with [.env](adding-custom-environment-variables.md#adding-development-environment-variables-in-env). +You can adjust various development and production settings by setting environment variables in your shell or with [.env](adding-custom-environment-variables.md#adding-development-environment-variables-in-env). > Note: You do not need to declare `REACT_APP_` before the below variables as you would with custom environment variables. -| Variable | Development | Production | Usage | -| :------------------- | :---------: | :--------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| BROWSER | βœ… Used | 🚫 Ignored | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a [browser](https://github.com/sindresorhus/opn#app) to override this behavior, or set it to `none` to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to `npm start` will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the `.js` extension. | -| HOST | βœ… Used | 🚫 Ignored | By default, the development web server binds to `localhost`. You may use this variable to specify a different host. | -| PORT | βœ… Used | 🚫 Ignored | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. | -| HTTPS | βœ… Used | 🚫 Ignored | When set to `true`, Create React App will run the development server in `https` mode. | -| PUBLIC_URL | 🚫 Ignored | βœ… Used | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](deployment#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. | -| CI | βœ… Used | βœ… Used | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. | -| REACT_EDITOR | βœ… Used | 🚫 Ignored | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can [send a pull request to detect your editor of choice](https://github.com/facebook/create-react-app/issues/2636). Setting this environment variable overrides the automatic detection. If you do it, make sure your systems [PATH]() environment variable points to your editor’s bin folder. You can also set it to `none` to disable it completely. | -| CHOKIDAR_USEPOLLING | βœ… Used | 🚫 Ignored | When set to `true`, the watcher runs in polling mode, as necessary inside a VM. Use this option if `npm start` isn't detecting changes. | -| GENERATE_SOURCEMAP | 🚫 Ignored | βœ… Used | When set to `false`, source maps are not generated for a production build. This solves out of memory (OOM) issues on some smaller machines. | -| NODE_PATH | βœ… Used | βœ… Used | Same as [`NODE_PATH` in Node.js](https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders), but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting `NODE_PATH=src`. | -| INLINE_RUNTIME_CHUNK | 🚫 Ignored | βœ… Used | By default, Create React App will embed the runtime script into `index.html` during the production build. When set to `false`, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP. | -| IMAGE_INLINE_SIZE_LIMIT | 🚫 Ignored | βœ… Used | By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to 0 will disable the inlining of images. | +| Variable | Development | Production | Usage | +| :---------------------- | :---------: | :--------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| BROWSER | βœ… Used | 🚫 Ignored | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a [browser](https://github.com/sindresorhus/opn#app) to override this behavior, or set it to `none` to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to `npm start` will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the `.js` extension. | +| BROWSER_ARGS | βœ… Used | 🚫 Ignored | Works in conjunction with BROWSER environment variable. When BROWSER is specified, any values set in BROWSER_ARGS will be passed to that browser instance. Example: `BROWSER_ARGS=--remote-debugging-port=9222`. Passing arguments directly to BROWSER won't work! | +| HOST | βœ… Used | 🚫 Ignored | By default, the development web server binds to `localhost`. You may use this variable to specify a different host. | +| PORT | βœ… Used | 🚫 Ignored | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. | +| HTTPS | βœ… Used | 🚫 Ignored | When set to `true`, Create React App will run the development server in `https` mode. | +| PUBLIC_URL | 🚫 Ignored | βœ… Used | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](deployment#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. | +| CI | βœ… Used | βœ… Used | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. | +| REACT_EDITOR | βœ… Used | 🚫 Ignored | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can [send a pull request to detect your editor of choice](https://github.com/facebook/create-react-app/issues/2636). Setting this environment variable overrides the automatic detection. If you do it, make sure your systems [PATH]() environment variable points to your editor’s bin folder. You can also set it to `none` to disable it completely. | +| CHOKIDAR_USEPOLLING | βœ… Used | 🚫 Ignored | When set to `true`, the watcher runs in polling mode, as necessary inside a VM. Use this option if `npm start` isn't detecting changes. | +| GENERATE_SOURCEMAP | 🚫 Ignored | βœ… Used | When set to `false`, source maps are not generated for a production build. This solves out of memory (OOM) issues on some smaller machines. | +| NODE_PATH | βœ… Used | βœ… Used | Same as [`NODE_PATH` in Node.js](https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders), but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting `NODE_PATH=src`. | +| INLINE_RUNTIME_CHUNK | 🚫 Ignored | βœ… Used | By default, Create React App will embed the runtime script into `index.html` during the production build. When set to `false`, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP. | +| IMAGE_INLINE_SIZE_LIMIT | 🚫 Ignored | βœ… Used | By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to 0 will disable the inlining of images. | From 565e2fe0230c3a4b035d1c8b831faa46cd4daf42 Mon Sep 17 00:00:00 2001 From: Nikolay Stoynov Date: Wed, 26 Jun 2019 10:09:20 +0300 Subject: [PATCH 5/5] Clarify BROWSER_ARGS usage and fix link --- docusaurus/docs/advanced-configuration.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md index a060edaae39..9799a1ad403 100644 --- a/docusaurus/docs/advanced-configuration.md +++ b/docusaurus/docs/advanced-configuration.md @@ -9,8 +9,8 @@ You can adjust various development and production settings by setting environmen | Variable | Development | Production | Usage | | :---------------------- | :---------: | :--------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| BROWSER | βœ… Used | 🚫 Ignored | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a [browser](https://github.com/sindresorhus/opn#app) to override this behavior, or set it to `none` to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to `npm start` will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the `.js` extension. | -| BROWSER_ARGS | βœ… Used | 🚫 Ignored | Works in conjunction with BROWSER environment variable. When BROWSER is specified, any values set in BROWSER_ARGS will be passed to that browser instance. Example: `BROWSER_ARGS=--remote-debugging-port=9222`. Passing arguments directly to BROWSER won't work! | +| BROWSER | βœ… Used | 🚫 Ignored | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a [browser](https://github.com/sindresorhus/open#app) to override this behavior, or set it to `none` to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to `npm start` will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the `.js` extension. | +| BROWSER_ARGS | βœ… Used | 🚫 Ignored | When the `BROWSER` environment variable is specified, any arguments that you set to this environment variable will be passed to the browser instance. Multiple arguments are supported as a space separated list. By default, no arguments are passed through to browsers. | | HOST | βœ… Used | 🚫 Ignored | By default, the development web server binds to `localhost`. You may use this variable to specify a different host. | | PORT | βœ… Used | 🚫 Ignored | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. | | HTTPS | βœ… Used | 🚫 Ignored | When set to `true`, Create React App will run the development server in `https` mode. |