Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Disabling opening of the browser in server start #873

Closed
sheerun opened this issue Oct 7, 2016 · 40 comments
Closed

Disabling opening of the browser in server start #873

sheerun opened this issue Oct 7, 2016 · 40 comments

Comments

@sheerun
Copy link
Contributor

sheerun commented Oct 7, 2016

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
Copy link
Contributor Author

sheerun commented Oct 8, 2016

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

@tbillington
Copy link

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
Copy link
Contributor

@tbillington A commit before #831 introduced this bug with the tabs, so this is fixed with the next release.

@andreypopp
Copy link
Contributor

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
Copy link
Contributor

gaearon commented Oct 18, 2016

@andreypopp 👍

@kachkaev
Copy link

kachkaev commented Nov 2, 2016

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
Copy link
Contributor

gaearon commented Nov 2, 2016

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

@sheerun
Copy link
Contributor Author

sheerun commented Nov 10, 2016

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

@glennreyes
Copy link
Contributor

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

@kitze
Copy link

kitze commented Nov 11, 2016

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

@GAumala
Copy link
Contributor

GAumala commented Nov 12, 2016

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

@gaearon
Copy link
Contributor

gaearon commented Nov 24, 2016

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

@gaearon gaearon added this to the 0.8.0 milestone Nov 24, 2016
@vvo
Copy link

vvo commented Nov 24, 2016

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
Copy link
Contributor Author

sheerun commented Nov 24, 2016

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
Copy link

vvo commented Nov 24, 2016

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
Copy link
Contributor

fson commented Dec 3, 2016

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?

@fson fson modified the milestones: 0.9.0, 0.8.0 Dec 3, 2016
GAumala added a commit to GAumala/create-react-app that referenced this issue Dec 4, 2016
Use a 'BROWSER' environment variable with npm start to specify which
browser to open. if the value of 'BROWSER' is not valid executable file,
don't open any browser.
@GAumala
Copy link
Contributor

GAumala commented Dec 4, 2016

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
Copy link
Contributor

shrynx commented Dec 5, 2016

@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
Copy link
Contributor

GAumala commented Dec 5, 2016

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

@shrynx
Copy link
Contributor

shrynx commented Dec 5, 2016

@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
Copy link

jakebasile commented Dec 5, 2016 via email

gaearon pushed a commit that referenced this issue Dec 11, 2016
Use a 'BROWSER' environment variable with npm start to specify which
browser to open. if the value of 'BROWSER' is not valid executable file,
don't open any browser.
@gaearon
Copy link
Contributor

gaearon commented Dec 11, 2016

This was fixed by #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.

@gaearon gaearon closed this as completed Dec 11, 2016
@fson
Copy link
Contributor

fson commented Dec 12, 2016

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

@gaearon
Copy link
Contributor

gaearon commented Dec 12, 2016

Oh right. :-)

@GAumala
Copy link
Contributor

GAumala commented Dec 12, 2016

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

@gaearon
Copy link
Contributor

gaearon commented Dec 12, 2016

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

@GAumala
Copy link
Contributor

GAumala commented Dec 12, 2016

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

alexdriaguine pushed a commit to alexdriaguine/create-react-app that referenced this issue Jan 23, 2017
…#1148)

Use a 'BROWSER' environment variable with npm start to specify which
browser to open. if the value of 'BROWSER' is not valid executable file,
don't open any browser.
@gaearon
Copy link
Contributor

gaearon commented Feb 11, 2017

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

@Tectract
Copy link

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.

randycoulman pushed a commit to CodingZeal/create-react-app that referenced this issue May 8, 2017
…#1148)

Use a 'BROWSER' environment variable with npm start to specify which
browser to open. if the value of 'BROWSER' is not valid executable file,
don't open any browser.
@jclc
Copy link

jclc commented Oct 5, 2017

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
Copy link
Contributor

GAumala commented Oct 5, 2017

@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
Copy link

jclc commented Oct 5, 2017

I see, thank you

@chiemekailo
Copy link

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) 😩

@1st
Copy link

1st commented Mar 14, 2018

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

MuscularMustache pushed a commit to MuscularMustache/hos-react that referenced this issue Mar 18, 2018
@ChuckkNorris
Copy link

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
Copy link

Aias commented Jun 12, 2018

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
Copy link
Contributor

Timer commented Jun 13, 2018

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

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

@reed665
Copy link

reed665 commented Jun 16, 2018

You can make use of cross-env as an option

cross-env BROWSER=none npm start

@mzedeler
Copy link

mzedeler commented Nov 8, 2018

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

@borrascador
Copy link

@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.

@lock lock bot locked and limited conversation to collaborators Jan 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests