React App in Visual Studio 2019.Net Core 3 Getting StartedVisual Studio allows you to easily create a Node.js project and experience IntelliSense and othe. Upon saving the above package.json file, Visual Studio will automatically download the dependencies into a local nodemodules directory, via npm: I expect that the react, react-dom, webpack, and babel-. dependencies are already familiar to you, as they’re commonly used with React. This videos outlines the process to prepare VS2019 for development of solutions based on REACTJS, ASP.NET core on Windows and other platforms.

In this post, we are going to create an Create React App application, then add configuration to debug it in Visual Studio Code.

Check out Learn Visual Studio Code to learn everything you need to know about about the hottest editor in Web Development for only $10!

TLDR - For an Create React App application, install the Debugger for Chrome extension, create a debug configuration in VS Code, and then run in debug mode.

Learn VS Code

If you're interested in learning more about VS Code, you definitely want to check out the upcoming Learn VS Code course.

Creating a Starter Project

To be able to test an Create React App application, you need an Create React App application :) I'll provide the basic steps, but for more reference on how to get started look at the Create React App page.

First, you'll need to install the Create React App.

npm install -g create-react-app

After that finishes, you'll need to actually generate your new application. This will take a bit as it needs to install LOTS of NPM packages.

create-react-app my-app

Visual Studio 2019 React

Open the project in VS Code and you should see the following.

Now, that you've got your new fancy React app, go ahead and run it to make sure everything looks right.

npm start

Should look like this.

Creating Debug Configuration

React Hello World Visual Studio Code

Assuming you've made it this far, we are ready to start debugging! Before we do, however, it's worth understanding how configuring debugging in VS Code works. Basically debug configurations are saved in a launch.json file which is stored inside of a .vscode folder. This .vscode folder is used to store different configurations for Code including our required debugging stuff.

Before you create your debug configuration, you need to install the Debugger for Chrome extension. Find and install this extension from the extension tab in VS Code. After installing, reload VS Code.

Now, to create a debug configuration, you can open the debug panel (the bug looking button on the left panel). At the top of the debug panel, you should see a dropdown that says 'No Configurations'.

To the right of that dropdown, there is a gear icon. Click this button to have VS Code automatically generate that .vscode folder and launch.json file mentioned above.

Visual Studio 2019 React Extension

Then choose Chrome.

You should get the following configuration created for you.

The only thing we need to do is update the port from 8080 to 3000.

Let's Debug

Now we're ready! Go ahead and click the play button at the top of the Debug panel which will launch an instance of Chrome in debug mode. Keep in mind your app should already be running from using ng serve earlier. In VS Code, you should see the Debug toolbar pop up.

Visual Studio 2019 React Project

With this up and running, you can set a breakpoint in your App.js. Open up your App.js and add a breakpoint inside of the render function by clicking in the gutter (to the left of the line numbers). Should look like this.

Now, refresh debugging by clicking the refresh button on the debugging toolbar. This should open your application again and trigger this breakpoin. You should be directed back to VS Code directly to the place where you set your breakpoint.

From here, you can set more breakpoints, inspect variables, etc. If you are interested in learning more about debugging JavaScript in general in either Chrome or VS Code you can check out Debugging JavaScript in Chrome and Visual Studio Code.

Again, if you're interested in learning more about VS Code, you'll definitely want to check out the upcoming Learn VS Code course.

If you have any follow up questions or comments, leave one below of find me on twitter @jamesqquick.

Vscode Debug React

For video content, check out my YouTube Channel

Like this article? Follow @jamesqquick on Twitter

Visual Studio 2019 React App