DEV Community

Cover image for Launch React from Visual Studio Code
Nils Diekmann
Nils Diekmann

Posted on • Originally published at Medium

Launch React from Visual Studio Code

How to launch a React application from Visual Studio Code including Firefox and Chrome using React Script 5.0.1 and Windows

Visual Studio Code meets React


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",
  ...
},
Enter fullscreen mode Exit fullscreen mode

Start in Firefox's private Window

"scripts": {
  ...
  "startfirefoxprivate": "set \"BROWSER=none\" && start firefox -private-window http://localhost:3000 && react-scripts start",
  ...
},
Enter fullscreen mode Exit fullscreen mode

Start in Chrome

"scripts": {
  ...
  "startchrome": "set \"BROWSER=none\" && start chrome http://localhost:3000 && react-scripts start",
  ...
},
Enter fullscreen mode Exit fullscreen mode

Start in Chrome incognito

"scripts": {
  ...
  "startchromeincognito": "set \"BROWSER=none\" && start chrome http://localhost:3000 /incognito && react-scripts start",
  ...
},
Enter fullscreen mode Exit fullscreen mode

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"],
    },
  ]
Enter fullscreen mode Exit fullscreen mode

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:

GitHub logo 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)