Launch React from Visual Studio Code
Tags: react, vscode, tutorial, chrome
Published: 2024-07-07 19:33:50

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kzgysfnmw6jkoigltm5.png)

***

## 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**

```json
"scripts": {
  ...
  "startfirefox": "set \"BROWSER=none\" && start firefox http://localhost:3000 && react-scripts start",
  ...
},
```

**Start in Firefox's private Window**

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

**Start in Chrome**

```json
"scripts": {
  ...
  "startchrome": "set \"BROWSER=none\" && start chrome http://localhost:3000 && react-scripts start",
  ...
},
```

**Start in Chrome incognito**

```json
"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:

```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:

{% embed https://github.com/KinNeko-De/sample-react-vscode %}

**Sources**

Credits goes to this comment:

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