Using TypeScript in Electron renderer process

Question

I have recently had some struggles with using TypeScript efficiently in my Electron projects. I desire to be able to use TypeScript in both the main process and renderer process with the support for a types.ts file as well.

The only solution I have found as far is using Webpack's TypeScript support with a configuration similar to the following:

const path = require("path");

module.exports = {
  mode: "development",

  // All electron pages with a source file must be added here
  entry: {
    page1: "./src/app/pages/page1/index.ts",
    page2: "./src/app/pages/page2/index.ts",
    page3: "./src/app/pages/page3/index.ts",
  },
  
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, './src/app/build'),
  },
};

Using this however feels a bit hacky to me and significantly slows down my workflow due to me having to run Webpack every time I make changes to the project.

I would like to know, is there a better way of doing this? Thanks in advance.

snwflk · Accepted Answer · 2022-02-20 15:51:39Z

1

It looks like you could benefit from automatic compilation and reload to speed up your development process. You may have a look at electron-quick-start-typescript, which compiles TypeScript using tsc directly. If you don't need Webpack for reasons other than compiling TypeScript, this approach might work well for you.

Automatic compilation

Using npm run watch (which calls tsc -w) in a separate terminal, TypeScript files are automatically compiled when file changes are detected. You can configure the compilation in tsconfig.json.

Automatic reload of Electron app

The module electron-reload detects changed scripts and reloads the BrowserWindows. If the main process script is changed, it restarts the Electron app as a whole.

npm install electron-reload

Add this to your main process script:

const electronReload = require('electron-reload')(__dirname, {
  electron: path.join(__dirname, '..', 'node_modules', 'electron', 'dist', 'electron'),
  electronArgv: ['dist/main.js']
});

answered Feb 20, 2022 at 15:51

snwflk

3,5674 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

conaticus Over a year ago

Ah the problem with this is that I need to compile multiple typescript index.ts files, for each electron page. I cannot just compile one.

snwflk Over a year ago

The setup compiles all *.ts files.. what are your index.ts files? I assume they are used in the renderer process(es)?

conaticus Over a year ago

I see, got the compiling working now. Will I have to specify win.loadFile()'s path from the build directory or is there a way around that?

snwflk Over a year ago

You load the HTML file from wherever it is located, and the HTML file should reference the compiled renderer scripts.

conaticus Over a year ago

I am now getting an exports is undefined error when running the program, any ideas how to fix that?

|

Collectives™ on Stack Overflow

Using TypeScript in Electron renderer process

1 Answer 1

Automatic compilation

Automatic reload of Electron app

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Automatic compilation

Automatic reload of Electron app

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related