Create-react-app: Disabling opening of the browser in server start

[sheerun]

While "cool":

1. I already see what to open in terminal, I don't need script to open it for me
2. I restart the server often, and end up with multiple tabs in browser opened
3. Every time I start server I loose my terminal context.. and my flow becomes:
   
   
   
   • npm start
   
   
   • tab away from the browser
   
   
   • open file to edit in terminal
   
   
   • switch to browser again
   
   

Could we disable auto-opening of browser window? Or at least in non-interactive mode?

[sheerun]

For reason it's an option in custom-react-sctipts: https://github.com/kitze/create-react-app/tree/master/packages/react-scripts#others

[tbillington]

It seemed like at an earlier version of create-react-app, running npm start would reconnect to the existing tab/process that it had been interacting with. With the current version, opening a new tab every time, having to close the new and refresh the old is a bit of an anti-pattern.

[glennreyes]

@tbillington A commit before https://github.com/facebookincubator/create-react-app/pull/831 introduced this bug with the tabs, so this is fixed with the next release.

[andreypopp]

I'd really like to see this configurable — in my case it opens Safari (the default on the system) but not Chrome (which I use for dev).

How about we make it configurable via BROWSER env var (similar to EDITOR, right)? BROWSER=none will make it not open any browser but BROWSER=<path>|<name> will make it open correct browser.

[gaearon]

@andreypopp 👍

[kachkaev]

Any known workaround? I'm developing inside VBox Ubuntu on one monitor and have the app opened in Windows Chrome on another monitor. After a few hours of Ctrl+C, UP, Enter iterations the whole browser on VBox is flooded with new tabs :-)

[gaearon]

No, there is currently no workaround except submitting a PR that @andreypopp suggested above.

[sheerun]

I've submitted a fix that disables opening browser in non-interactive terminal #1032

[glennreyes]

@gaearon There's a fork by @kitze that does very similar things like suggested from @andreypopp. Would you accept a PR for that?

[kitze]

@glennreyes yup, but in my fork you can just set OPEN_BROWSER=false in .env, you cannot specify the browser.

[GAumala]

+1 for choosing which browser to open. My default is firefox, but development is smoother on chrome.

[gaearon]

Is this fixed by #1032?
How can people opt into this mode? @sheerun

[vvo]

Will #1032 always prevent the browser from opening? In which cases will the browser still auto open? I am failing at understanding exactly interactive and non-interactive real world examples.

[sheerun]

Basically if won't show up if you do react-scripts start | cat because output is non-interactive. This is only heurestic for disabling auto-opening, and full solution would probably include a flag in package.json or environment variable.

[vvo]

As for my usecase (and maybe many others?) what I would need is indeed a flag as in the linked fork in this topic.

Much like what browsersync provides https://www.browsersync.io/docs/command-line#start (--no-open) flag

[fson]

I think the BROWSER environment variable suggested by @andreypopp above would still be the best solution for this because in addition to disabling this behavior, it also allows opening in a different browser than the system default. Does anyone want to submit a PR?

[GAumala]

I have prepared a PR with the suggested approach, the BROWSER environment variable. You can specify which browser to use, or just type any sort of nonsense like 'none' to disable the browser. And of course, if you don't use the environment variable it just opens your default browser as usual.

[shrynx]

@GAumala
I have implemented the same feature in my fork react-super-scripts. In my experience it would be better if you handle the os specific browser names.
Google Chrome is "google chrome" on mac, "google-chrome" on linux and "chrome" on windows. Internet explorer is "iexplorer.exe" (simply "iexplorer" doesn't work, honestly who could have guessed that 😒 )
Free feel to check out my repo, would be nice if this would be part of CRA.
@sheerun
PS: give react-super-scripts a try.

[GAumala]

@shrynx I'm afraid it is not that simple. In my Arch Linux laptop google chrome is google-chrome-stable.

[shrynx]

@GAumala Ahh , really ? that's kind of the thing i am pointing at. OS specific names are different, so it would be much easier for the user if they had to just specify chrome, ie or firefox and rest be handled by CRA.
I'll try if it works with arch and try to fix it.
Also if CRA could cover most common use cases (windows, mac and ubuntu) it should be good enough, with documentation for special cases like arch et al.

[jakebasile]

Using an environment variable to override a default executable is common, and I'd be more confused if it tried to do something fancy.

An apt example is EDITOR. All it does is specify what command to execute to open an editor. It lets the system handle path resolution. EDITOR=vim can execute /usr/bin/vim or /usr/local/bin/vim or ~/bin/vim or whatever - CRA has no business trying to figure that out.

edit: clarification

On Dec 4, 2016, at 7:47 PM, Shriyans [e-mail] wrote:

@GAumala Ahh , really ? that's kind of the thing i am pointing at. OS specific names are different, so it would be much easier for the user if they had to just specify chrome, ie or firefox and rest be handled by CRA.
I'll try if it works with arch and try to fix it.
Also if CRA could cover most common use cases (windows, mac and ubuntu) it should be good enough, with documentation for special cases like arch et al.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[gaearon]

This was fixed by https://github.com/facebookincubator/create-react-app/pull/1148 with an BROWSER environment variable that you can set to a platform-specific name or to none to completely opt out of opening the browser. You can also set it from the .env file, like any environment variable.

It will take a few weeks until 0.9.0 is out with this, but I’ll close the issue since it’s not actionable now. Thanks to everyone for the discussion and suggestions.

[fson]

To clarify, the name of the new env variable is BROWSER :)

[gaearon]

Oh right. :-)

[GAumala]

Should the new environment variable be documented in the user guide?

[gaearon]

Ideally I’d like a new section documenting all env variables we read.
NODE_PATH, PORT, HOST, HTTPS, and now BROWSER.

[GAumala]

Yeah I was thinking about that too. I only knew about PORT and HTTPS. I can try writing something later this week.

[gaearon]

FYI support for BROWSER=none npm start (or BROWSER=Firefox npm start or whatever) landed in 0.9.0.

[Tectract]

This should be displayed when you 'npm start' so people don't have to search for the option. imho opening the browser was a gimmick feature and should be disabled by default.

[jclc]

This doesn't quite cut it for me since I need to run Chromium with options. Seems like opn requires parameters to be defined in an array. Maybe use process.env.BROWSER.split(' ') instead?

EDIT: Or, if that causes problems for Chrome on Mac (why is there a space in the name in the first place??), another env var such as BROWSER_PARAMS could be introduced.

[GAumala]

@jclc if you want to run Chromium with options you can pass a JS script with BROWSER. For example:

// openChromium.js

const opn = require('opn');

opn('http://localhost:3000', {app: ['chromium', '--option1', '--option2']});

Then you start the dev server like this:

BROWSER=openChromium.js npm start

[jclc]

I see, thank you

[chiemekailo]

For those who want to build the "www" folder without auto-opening a browser, the simple answer is just
npm run build:www
I wonder why all the convoluted routes... (scripts et-all) :weary:

[1st]

Thank you for the fix. It will be better to disable this option by default, because it's frustrating.

Instruction for those who will read this thread from the end:

• create file .env in the same directory where your package.json lives
• insert this line BROWSER=none to the file and save it
• run nom start and web browser will not be opening anymore

[ChuckkNorris]

Would really prefer for this feature to be disabled by default... but beggars can't be choosers.
In 99% of the situations, I already have the website running in an incognito window and opening a browser steals focus which is a bit obnoxious.

[Aias]

I'm on a Windows 10 machine and using the following command:

set BROWSER=NONE && npm start

The scripts work fine and everything compiles without a browser opening, but I get a windows error message saying "Windows cannot find 'NONE '. Make sure you typed the name correctly, and then try again."

This also happens when settings the environment variable through a .env file, and happens with both yarn and npm. Is this happening to anyone else?

EDIT: Apparently only when using the Command Prompt in a standalone window.

[Timer]

set BROWSER=none&&npm start should work fine.

Note, the lack of whitespace around && is intentional.

[reed665]

You can make use of cross-env as an option

cross-env BROWSER=none npm start

[mzedeler]

I'm just waiting for someone to publish a browser named none :-D

[borrascador]

@Timer I'm curious about why the whitespace matters in this case? I'm also wondering if your solution will work cross-platform or if it's Windows-specific. Basically, I'm not sure if that's a good fix or if cross-env is the better choice.