How to debug react app in VSCode about react-app-rewired

[fvrrrn]

@maxime-aubry

1. Go to the Run and Debug view (4-th icon with bug and play button)
2. Select the create a launch.json file link to create a launch.json debugger configuration file
3. Choose Web App (Chrome) from the Select debugger dropdown list

This will create a launch.json file in a new .vscode folder in your project which includes a configuration to launch the website.
Your launch.json should look like this:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

I see you are using env-cmd package which sets environmental variables such as PORT, the one is located in your launch.json file at "url" option — 8080. Your launch.json's url's port must be the same as the port your app is running at because a Chrome instance is attached to an already running app.

1. If .env.a-env contains PORT definition then copy its value and replace 8080 with it in launch.json file.
2. If .env.a-env does not contain PORT definition then replace 8080 with 3000 (which is the default port CRA apps running at) in launch.json file.

Now you only have to run your app. Follow these steps:

1. Execute npm run start or yarn start.
2. Wait for the app to compile. You will see this output in your terminal shell (hence the port number):

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000

3. Press F5 or go to the Run and Debug view and then press green play button that says "Launch Chrome against localhost".