create-react-app
create-react-app copied to clipboard
facebook
fix: browser selection via env variable
Hi everyone,
this PR fixes the opening of a browser of choice, selected through the BROWSER environment variable, when starting a generated project.
After migrating to CRA v5.x the feature stopped working (see #11873, #11844, #11942, #11917, #12275).
Browsing the documentation for the [email protected] package (available here) I noticed that the syntax for opening an URL using a specified browser was updated.
This PR includes two small changes:
- The updated syntax for opening a browser is now used
- Since the
openpackage natively supports passing an array of arguments to the application, we no longer need to concatenate the arguments before the call
To test this feature I followed this test plan:
- Create a new
.envfile in the template project, containing for example the valueBROWSER=google-chrome-stable. The browser name could change based on OS or linux distro. - Start the template project with
npm run start. A new tab should open in the specified browser. - Stop the process and remove the newly created
.envfile. - Start again the project with
npm run start: it should open on the default browser.
Hi @FloydJohn!
Thank you for your pull request and welcome to our community.
Action Required
In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.
Process
In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.
Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.
If you have received this in error or have any questions, please contact us at [email protected]. Thanks!
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!
This Process still not working. in my .env.local I put BROWSER=firefox
HI @4nkit-5hukla, thanks for the feedback!
I tested this fix again, and I can confirm that BROWSER=firefox correctly launches the browser on my Linux and Windows installs.
I'll leave here the steps to test this fix:
- As this is not merged, you'll have to clone my fork on the correct branch:
git clone https://github.com/FloydJohn/create-react-app -b fix-browser-env - Create a
.envfile here:packages/cra-template/template/.env - Insert in this
.envfile the lineBROWSER=firefox. Test that on your terminal you can start Firefox by issuing thefirefoxcommand - Launch from the repo root
npm i && npm run start
Firefox should open as expected.
To make sure that you created the .env file in the correct path, you can always add a variable like REACT_APP_TEST=test and display the loaded env variables by adding a line like {JSON.stringify(process.env)} on the template.
Hope that this helped, let me know if it works as expected!
After having this problem myself, I did some debugging and came to the same conclusion. I was going to create a pull request myself, but @FloydJohn beat me to it. I can confirm that this fix solves the problem. (Another fix would be to revert to [email protected].)
TIP: For now, this works as a temporary fix in package.json:
"resolutions": {
"open": "7.4.2"
},
Hello. Is there an update on when would this be ready? Much appreciated. Thanks. @iansu @mrmckeb
TIP: For now, this works as a temporary fix in
package.json:"resolutions": { "open": "7.4.2" },
This workaround didn't work with npm for me. Instead I've used the following (requires npm-cli 8.3 or later):
"overrides": {
"open": "7.4.2"
}
I had to also remove node_modules and package-lock.json before running npm install for the override to work.
look at when the last version was released: https://www.npmjs.com/package/create-react-app (a year ago) seems like the project is not really alive, better switch to some modern boilerplate
look at when the last version was released: https://www.npmjs.com/package/create-react-app (a year ago) seems like the project is not really alive, better switch to some modern boilerplate
whats ur choice bro?
look at when the last version was released: https://www.npmjs.com/package/create-react-app (a year ago) seems like the project is not really alive, better switch to some modern boilerplate
whats ur choice bro?
for one existing project based on CRA i've switched to vite, so far better. but im not that experienced with these tools so can only recommend it based on how the project is active
