How to launch a React application from Visual Studio Code including Firefox and Chrome using React Script 5.0.1 and Windows
Motivation
I want to launch my React application from Visual Studio Code with a single click. I hate typing a lot in the terminal to launch an application. I prefer to use scripts. There has been a change to react-scripts, so other solutions on the web will no longer work. So here is my current working solution!
Solution
Create different scripts in your package.json to start react-script with different options depending on your current needs. First, set the browser to none to prevent react-scripts from launching the browser itself. Then launch the browser of your choice, followed by starting the application. In your launch.json from Visual Studio Code call the appropriate npm scripts.
Start in Firefox
"scripts": {
...
"startfirefox": "set \"BROWSER=none\" && start firefox http://localhost:3000 && react-scripts start",
...
},
Start in Firefox's private Window
"scripts": {
...
"startfirefoxprivate": "set \"BROWSER=none\" && start firefox -private-window http://localhost:3000 && react-scripts start",
...
},
Start in Chrome
"scripts": {
...
"startchrome": "set \"BROWSER=none\" && start chrome http://localhost:3000 && react-scripts start",
...
},
Start in Chrome incognito
"scripts": {
...
"startchromeincognito": "set \"BROWSER=none\" && start chrome http://localhost:3000 /incognito && react-scripts start",
...
},
Launch from Visual Studio Code
Let Visual Studio Code create a launch.json for you. Replace the generated configurations with the following JSON:
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Start using Default browser",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "start"],
},
{
"type": "node",
"request": "launch",
"name": "Start using Chrome",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "startchrome"],
},
{
"type": "node",
"request": "launch",
"name": "Start using Firefox",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "startfirefox"],
},
{
"type": "node",
"request": "launch",
"name": "Start using Chrome Incognito",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "startchromeincognito"],
},
{
"type": "node",
"request": "launch",
"name": "Start using Firefox private",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "startfirefoxprivate"],
},
]
Conclusion
This solution works for Windows and the current version of react-script. Since it only uses OS-specific commands, you can easily adapt it to your OS.
Version used
The tutorial was created based on
- react-scripts: 5.0.1
Samples
I created a sample application on GitHub:
KinNeko-De
/
sample-react-vscode
Sample application how to start a React app from Visual Studio Code in different browsers
Motiviation
Sample application how to start a React app from Visual Studio Code in different browsers.
See my article how to create this by yourself.
Sources
Credits goes to this comment:
https://github.com/facebook/create-react-app/issues/11873#issuecomment-1030708183
Top comments (0)