How do I make my React app to open in Chrome browser by default?
Solution 1
Create a .env.development
file in the project root directory, and include the following line:
BROWSER=chrome
Solution 2
In windows, set env variable:
set BROWSER=chrome
then just do npm start
like normal
Related videos on Youtube
Tanaka
Updated on June 04, 2022Comments
-
Tanaka almost 2 years
I am using create-react-app tool to develop React apps. The problem is that when I run the application using "npm start" command, it will open in Firefox browser and I want it to open in Chrome browser by default.
I found many answers providing same solution which is about modifying "start" in scripts section in package.json file but I tried it over and over with different codes and it did not work. I have no idea why all answers I read did not solve my issue. I am working in Windows 7.
This is my package.json code:{ "name": "jsx", "version": "0.1.0", "private": true, "dependencies": { "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts": "3.0.1" }, "scripts": { "start": "cross-env PORT=8080 BROWSER='Chrome' react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
If I update "start" in script section in package.json, like this:
"start": "BROWSER='Chrome' react-scripts start"
It will not work and I get this error:
'BROWSER' is not recognized as an internal or external command
and this is the log file:0 info it worked if it ends with ok 1 verbose cli [ 'C:\\Program Files (x86)\\nodejs\\node.exe', 1 verbose cli 'C:\\Program Files (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js', 1 verbose cli 'start' ] 2 info using [email protected] 3 info using [email protected] 4 verbose run-script [ 'prestart', 'start', 'poststart' ] 5 info lifecycle [email protected]~prestart: [email protected] 6 info lifecycle [email protected]~start: [email protected] 7 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true 8 verbose lifecycle [email protected]~start: PATH: C:\Program Files (x86)\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\KA\react\jsx\node_modules\.bin;C:\Python27\;C:\Python27\Scripts;C:\ProgramData\Oracle\Java\javapath;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Python36\Scripts\;C:\Python36\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;C:\Program Files (x86)\QuickTime\QTSystem\;C:\Windows\System32\Windows System Resource Manager\bin;C:\Windows\idmu\common;C:\Program Files (x86)\Microsoft SQL Server\100\Tools\Binn\;C:\Program Files\Microsoft SQL Server\100\Tools\Binn\;C:\Program Files\Microsoft SQL Server\100\DTS\Binn\;C:\Program Files (x86)\Windows Kits\8.1\Windows Performance Toolkit\;C:\Program Files\Microsoft SQL Server\110\Tools\Binn\;C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0\;C:\Program Files\Microsoft SQL Server\120\Tools\Binn\;C:\Program Files\Java\jdk1.8.0\bin;C:\ProgramData\Anaconda2;C:\ProgramData\Anaconda2\Scripts;C:\ProgramData\Anaconda2\Library\bin;C:\Program Files\dotnet\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files (x86)\Pandoc\;C:\Program Files\Git\cmd;C:\Program Files (x86)\Microsoft SQL Server\100\Tools\Binn\VSShell\Common7\IDE\;C:\Program Files (x86)\Microsoft SQL Server\100\DTS\Binn\;C:\Program Files (x86)\Microsoft Visual Studio 9.0\Common7\IDE\PrivateAssemblies\;C:\Users\KA\.dnx\bin;C:\Program Files\Microsoft DNX\Dnvm\;C:\Program Files (x86)\nodejs\;C:\ProgramData\chocolatey\bin;;C:\Program Files (x86)\LINQPad5;C:\Ruby22\bin;C:\Python27;C:\Python27\Scripts;C:\Users\KA\AppData\Local\atom\bin;C:\Program Files\heroku\bin;C:\Python27\Scripts\pip.exe;C:\Users\KA\AppData\Roaming\npm;C:\Users\KA\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\KA\AppData\Roaming\npm;C:\Users\KA\.dotnet\tools 9 verbose lifecycle [email protected]~start: CWD: C:\Users\KA\react\jsx 10 silly lifecycle [email protected]~start: Args: [ '/d /s /c', "BROWSER='Chrome' react-scripts start" ] 11 silly lifecycle [email protected]~start: Returned: code: 1 signal: null 12 info lifecycle [email protected]~start: Failed to exec start script 13 verbose stack Error: [email protected] start: `BROWSER='Chrome' react-scripts start` 13 verbose stack Exit status 1 13 verbose stack at EventEmitter.<anonymous> (C:\Program Files (x86)\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16) 13 verbose stack at EventEmitter.emit (events.js:197:13) 13 verbose stack at ChildProcess.<anonymous> (C:\Program Files (x86)\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14) 13 verbose stack at ChildProcess.emit (events.js:197:13) 13 verbose stack at maybeClose (internal/child_process.js:984:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:265:5) 14 verbose pkgid [email protected] 15 verbose cwd C:\Users\KA\react\jsx 16 verbose Windows_NT 6.1.7601 17 verbose argv "C:\\Program Files (x86)\\nodejs\\node.exe" "C:\\Program Files (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start" 18 verbose node v11.11.0 19 verbose npm v6.7.0 20 error code ELIFECYCLE 21 error errno 1 22 error [email protected] start: `BROWSER='Chrome' react-scripts start` 22 error Exit status 1 23 error Failed at the [email protected] start script. 23 error This is probably not a problem with npm. There is likely additional logging output above. 24 verbose exit [ 1, true ]
-
Sterling Archer almost 5 yearsLooks like you're close
"start": "BROWSER='Google Chrome' react-scripts start",
-
Tanaka almost 5 yearsI did this but it does not work and I updated the post so you can I understand the error I get in log file. @SterlingArcher
-
-
Tanaka almost 5 yearsI did this but it does not work and I updated the post so you can I understand the error I get in log file.
-
Claeusdev almost 5 years"Google Chrome" not just "Chrome"
-
Tanaka almost 5 yearsdo you mean it should be like this
"start": "BROWSER=chrome npm start"
in package.json, in scripts seciton ? -
Tanaka almost 5 yearsI modified but still I get this error: 'BROWSER' is not recognized as an internal or external command
-
Tanaka almost 5 yearsI tried but it says "Windows cannot find 'chrome'. Make sure you typed the name correctly". Then I tried "Google Chrome" , google chrome, "chrome", chrome.exe, and all these did not work.
-
SergeySD almost 5 yearswithout quotes? set BROWSER=chrome - this correct record of env. set BROWSER='chrome' - it's not work also for me.
-
Tanaka almost 5 yearsAh ok I tried again. It is working without quotes. I don't know what was the issue but before it worked, I found an option in Windows which gives you ability to set default programs.
-
Claeusdev almost 5 yearsChange your default browser to chrome, that's the easiest way out
-
Claeusdev almost 5 years@Tanaka I have edited the code. Add "cross-env" to your
package.json
and try again -
Tanaka almost 5 yearsI tried it but again this is the error: 'cross-env' is not recognized as an internal or external command - @Caleusdev
-
Claeusdev almost 5 yearscan you change the default browser to chrome?
-
Tanaka almost 5 years
1- set BROWSER=chrome 2- npm start
. These two commands work in cmd but not in script section. -
El Anonimo over 3 yearsWorked for me thank you. How do I swap
chrome
for the system default browser so the system picks it up on itself? -
Alielson Piffer over 3 yearsThis opened on Chrome Canary for me, which was... exactly what I wanted! I only don't know why.