How to run/execute/debug react/redux app from Intellij

Question

I have a simple react/redux app that I can run from the command line via npm start, and debug from the browser, but I would like to continue its development using Intellij. Unfortunately, the snippets of advice in don't provide enough overall context, given my level of web-development experience, to help very much. And I haven't been able to find a simple example application to use as a pattern to figure out the process.

Principal question: I can open the application directory structure in Intellij, see all the file of my little application, and build it without errors, so I need to create a run configuration. Which configuration template should I use, and to what do I set the associated parameters so I can run and debug it from Intellij?

Thanks!

Answer 1

The docs give enough information to start from... You need building and starting your application using npm start (can be done in IDEA by opening your app package.json in the editor and clicking the Run icon in the gutter to the left of your start script). Then you have to create a new JavaScript debug configuration: choose Run | Edit Configurations, click Add icon, and choose JavaScript Debug from the list. In the URL field, enter URL you normally use to open your app in browser (http://localhost:3000/ or whatever it looks like). Click Debug

with your sample app:

• select npm start run configuration, press Run
• select Debug Application configuration, press Debug:

See https://www.jetbrains.com/webstorm/guide/tutorials/react_typescript_tdd/chrome_debugging/

Answer 2

I found the simplest way the achieve all the above without hustle. Open Terminal on Webstorm and start your app normally using npm start as shown below.

npm start

Click on the link while pressing cmd + shift on Mac, on Windows or Linux use Ctrl + Shift and a click. This will open debug sessions and all your break points will be observed

Answer 3

I found two ways to run React-app in Intellij Idea but it has two different drawbacks:

• in 1st scenario Idea doesnt work as debugger
• 2nd we need to run 'npm start' manually. If we need to rerun 'npm start' we need to stop it. The port will be still in use and we shall to specify the new port in the configs and in npm start another port from the start to successfully use it as debugger;

Let's configure react-app from the scratch:

1. add new configuration: JavaScript Debug
name: react-app
URL: http://192.168.1.106:3000/
Browser: Chrome

Script before launch: Run npm script [reactapp-directory/package.json]
|- package.json: ..../reactapp-directory/package.json
|- Command: start
|- Node interpreter: Project node(/usr/bin/node) 10.19.0
|- Package manager: Project node(/usr/bin/npm 6.14.4

Save changes 2. Open your script and add debug breakpoint 3. and click 'debug' button.

What we expect but dont achieve:

(I've already placed the issue-ticket in the jetbrains support Idea):

1. Idea successfully runs the app with set npm start
2. opens browser new tab with specified url http://192.168.1.106:3000/
3. stops on the breakpoint

What happens exactly, there are two different scenarios:

1st: It performs first two steps (

• 1. successfully runs the app with set npm start
• 2. opens browser new tab with specified url http://192.168.1.106:3000/

) but doesnt work as debugger so we need to use browser DevTool to debug

2nd: To make it work the build-in debugger you should to change the run steps:

• 1. run 'npm start' from the shell by yourself

• 2. click 'debug' with the set configuration
• 3. remove from the config the Script before launch

or

run see the running script clashes with previous npm start one and you need to refuse it by pushing button 'n';

• 4. Idea opens new tab with specified url and successfully stops on the chosen debugging point