CODEWITHSUNDEEP
javascriptnode.jstypescriptelectron
SRobertJames
SRobertJames

Reputation: 9279

How to run an Electron application from source (not bundle)

I'm new to Electron, and trying to help maintain an application whose developer has left. The resources/app folder consists of (at least) three things:

The source TypeScript is relatively clear and I can follow most of it. But to really understand it I need to set breakpoints on it and run it in a debugger (e.g. VS Code). However, when running the app, Electron doesn't run it from the TypeScript (in src), or even the individual Javascript (in lib), but rather from bundle.js. Bundle.js is a giant file that, besides being minified, is too big to even load properly in my editor.

My question

How can I tell Electron to run the app not from the bundle.js, but from the individual src/...ts TypeScript, or, failing that, from the individual src/...js JavaScript?

If that's not possible, what is the proper way to use a debugger, given the source, when the Electron application is bundled? I have full source but, when I invoke Electron, it runs out of the bundle: how I can change this?

I'm new to Electron and Node, so if I'm making an elementary mistake, please clarify.

Update with progress so far

I've made a lot of progress in getting down to source, but not all the way there.

The Electron app starts with electron-main.js, which loads things like server.js and other files. These all run from source.

Eventually, it creates a minimal window with the following code:

<head>
...
  <script type="text/javascript" src="./bundle.js" charset="utf-8"></script>
</head>

bundle.js is then loaded in the window. The files is far too big and unscrutable (minified) to be of much use. But, as I said, the source is all available too.

However, bundle.map.js contains is complete: it contains sources, names, mappings, sourcesContent, which is enough, in principle, to reconstruct everything. Moreover, for almost all of the sources, the corresponding source file is available and obvious.

I believe I need to replace the <script type="text/javascript" src="./bundle.js" charset="utf-8"></script> with a includer.js which:

/Progress to date...

Upvotes: 2

Views: 2750

Answers (2)

Gary Archer
Gary Archer

Reputation: 29346

To add to the above answer, I have a Typescript React app that uses Webpack, which you can compare against. You can step through its code for both the main and renderer processes:

You also need to build with sourcemaps enabled. Once done you can step through Typescript code line by line.

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 371233

Since the project is set up to run things from a bundle at the moment, it's likely that the project can only run things from the bundle, unless you change the config (which can only be done if you have some idea of what the overall structure is in the first place, which you're trying to get a grasp on to begin with). In other words, the most likely approach to look at how things are interlocking and to analyze and change the logic in the application will be to generate a new bundle.

Very often, the process of generating a new bundle will be contained in the project's root folder's package.json. If you have:

the-big-app/node_modules

then you can probably look at

the-big-app/package.json

and look at the scripts contained within it. There will probably be something along the (very general) lines of:

{
    "name": "the-big-app",
    "scripts": {
        "lint": "eslint .",
        "build": "webpack && tsc --build tsconfig.node.json",
        "watch": "nodemon --exec npm run start -e ts,tsx,scss,html",
        "run": "npx electron build/node/main.js",
        "start": "npm run build && npm run run"
    },

Each of these properties refers to a runnable NPM script. You're likely to have a build script - if you have such a script and type npm run build, it should then generate a new bundle, which can then be executed. If there is no build script, look around to see which other scripts look like they might do something useful, and execute them. (Back up the existing bundle and other files in the directory first, just in case.)

Look at the values for each NPM script property so you can do further research into what they do and how they might relate to turning the source code into something that runs. Just for example, above, doing

"build": "webpack && tsc --build tsconfig.node.json",

in my app, will

(1) Run Webpack to construct a bundle for the renderer process

(2) Run tsc to compile the TypeScript code inside the-big-app/src/main-process/ into JavaScript that can then be executed by Electron

Look for something similar in your package.json to see what's happening, which will inform you on how it can be tweaked and debugged.

As Electron's docs say, the browser code can be debugged via the devtools. Debugging the main process is harder - you may need to call Electron with the inspect flag, among others.

As for the question of if/how things can be run directly from source TypeScript and not from a bundle - it's possible to do this for the main process with ts-node (2). I don't think it's possible for a renderer process, because the "page" needs to see a plain .js file, like any webpage - and, similarly, can't run TypeScript directly, also like normal browsers and webpages can't run TypeScript directly.

Upvotes: 3

Related Questions