Debugging an electron/react app

[supple geode]

Hi everyone.

First of all, while I'm a dev, I have no knowledge about electron, js, nor react.

I'm trying to make a modification to an existing app. This is a electron/react app. I'm using vscode.

How did I set it up :

• nvm install some_node_version
• nvm on
• npm install

How do I run it:
npm start

The app is running fine, but I can't find how to put breackpoint in the backend. When I modify the backend, npm seems to recompile the exe, but I cannot find the output exe for the life of me. I undertand that a should hand the resulting exe to a cpp debugger, which I know how to do.

Could someone hold my hand with this please ?

[sacred spear]

huu do you understand what do the commands you used ?

[supple geode]

my understanding is very very basic

to me the project is already configured to be started, with that package.json. My understanding is that npm start is some kind of magical wand that will starts your project depending on what packages are installed.

[sacred spear]

it's not magical, it will start a dev server to run your app in a dev environment

[supple geode]

and it's working great so far

it even recompiled the exe backend automaticaly when I do a modification

[sacred spear]

what do you mean by "backend"

there is no exe

unless you package the app

[supple geode]

the electron documentation seems to imply an executable was generated

maybe I read it wrong

[sacred spear]

only if you package, with is a production build

[supple geode]

then, when npm recompile stuff, what does it recompile and where ?

I do have a build dir, but it's full of js scripts

[sacred spear]

I don't know, your command could be called "toto" and I could guess as much what it does

show the scripts

[supple geode]

which ones

[sacred spear]

in package json

the scripts object

[supple geode]

I can give you the github if that can help

[sacred spear]

i suppose, but I'm not gonna inspect the whole thing

[supple geode]

I understand

  "scripts": {
    "react-start": "react-scripts start",
    "react-build": "react-scripts build",
    "react-test": "react-scripts test --env=jsdom",
    "react-eject": "react-scripts eject",
    "electron-build": "electron-builder",
    "release": "npm run react-build && tsc -p electron && electron-builder --publish=never",
    "start": "concurrently \"cross-env BROWSER=none npm run react-start\" \"wait-on http://localhost:3000 && tsc -p electron -w\" \"wait-on http://localhost:3000 && tsc -p electron && electron .\"",
    "build": "npm run react-build && tsc -p electron && electron-build",
    "smoke-build-linux": "npm run react-build && tsc -p electron && electron-builder -l --publish=never",
    "smoke-build-mac": "npm run react-build && tsc -p electron && electron-builder -m --publish=never",
    "smoke-build-win": "npm run react-build && tsc -p electron && electron-builder -w --publish=never",
    "eslint": "eslint \"./**/*.{js,jsx,ts,tsx}\"",
    "prettier": "prettier \"./**/*.{js,jsx,ts,tsx}\""
  },

this ?

damn I would never have though that packagess.json was storing much more than just the packages to install as deps

[sacred spear]

yas, this is the list of commands you can use

the start will start the dev server (react, via Create React App "react-scripts"), and then start electron

the build script will first build the react app for prod, and then package it so you get the .exe (via electron-builder)

I still don't understand what you call the "backend"

[supple geode]

from the very little understanding I have

this is close to a "normal" nodejs app, with some js or ts running on the backend and some other js running client-side

[sacred spear]

but I don't see any script running a backend here

the nodeJS part is electron

[supple geode]

...oh

I see

[sacred spear]

if you want to debug you can just use console.log and check the console

[supple geode]

is it possible to use debugging tools ?

a watcher, breakpoints, etc

[sacred spear]

if this is the renderer process (react), logs will be on the dev console, if this is the main process (electron) they will appear on the console you use to start the app

[supple geode]

it's the very basics to be able to work in good condition

[sacred spear]

you can use react dev tools and usual browser debugging tools

for the react part

[supple geode]

ok so the debugging is happening in the react part

[sacred spear]

if you want to debug the renderer process yes

[supple geode]

I guess I'll find all the info I need if I look online how to debug a react app with vscode

[sacred spear]

yeah

[supple geode]

but wait

[sacred spear]

I almost never debug from the IDE personally

[supple geode]

if everything is clientside and npm start is actually running some kind of weird chrome env with the app inside

I can just find the js there and put some breakpoints right

sorry this is really not what I do usually

[sacred spear]

why do you need to edit this app if you have no knowledge of React and Electron at all ?

[supple geode]

I like to learn stuffs

[sacred spear]

do you know JS at least? Front end dev?

then you should read the docs

[supple geode]

js the language ? yes

ts ? tsx ? react ? no

I'm a C++/Qt dev, I'm making desktop apps

[sacred spear]

You probably want to learn that before trying to edit a project you don't understand :/

[supple geode]

tbh honnest I'm not sure to understand the motivation behind such a heavy stack just -in that project- making a table with some columns and values and showing them

anyway, thanks for your help

!close

jc every servers have their own closing command

[sacred spear]

use the interface x)