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.

View on GitHub

Sources

Credits goes to this comment:

https://github.com/facebook/create-react-app/issues/11873#issuecomment-1030708183

Blog

Launch React from Visual Studio Code

Nils Diekmann