Looking for a _working_ simple example of Electron v8 and TypeScript

Question

Forgive the simplicity of my plaintiff question, I'm close to my wits end.

I am looking for a working simple example of Electron v8 and TypeScript. It needn't include WebPack, Babel, React or anything else. Nothing I have found seems to work with Electron v8.

Update

My prior statement remind me of Macbeth's line it is a tale Told by an idiot, full of sound and fury, Signifying nothing, so let's state the problem in detail this time.

The stock Electron & Typescript example does not demonstrate the following:

Using import for Node modules within the renderer process
Using import for my own application modules within the renderer process.

Attempting to do so got no errors from tsc but provoked a runtime error

ReferenceError: exports is not defined[Learn More]
exports.__esModule = true

Using require instead of import, especially for classes like EventEmitter upset VS Code which warned

'EventEmitter' refers to a value, but is being used as a type here.ts(2749)

... so that's a backward step.

Setting target in tsconfig.json to ES2018 means I can use ES6 modules and the import syntax for my own modules, though it needs a .js suffix to work.

import {blah} from './MyModule.js'` // Shouldn't need that suffix!

VS Code gives the impression that I can import Node modules, but it still fails at runtime.

Uncaught TypeError: Failed to resolve module specifier "events". Relative references must start with either "/", "./", or "../".

Matt Champion · Accepted Answer · 2020-02-19 09:58:27Z

You'll require four things: package.json, tsconfig.json, index.ts and index.html.

I've based my example on a Electron tutorial and a blog post on working with Electron and TypeScript.

The package.json needs to bring in Electron and TypeScript dependencies, trigger the TypeScript build and start Electron.

{
  "name": "electron-ts",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "prestart": "tsc",
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "8.0.1",
    "typescript": "3.7.5"
  }
}

The prestart script compiles the TypeScript and start runs Electron using the project as the application directory. I don't know the minimum version of TypeScript needed but it's 3 something.

The tsconfig.json needs to set some compiler options and identify what to build when running tsc.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true 
  },
  "exclude": ["node_modules"] 
}

This will compile any TypeScript files it finds outside of node_modules and generate the JavaScript alongside them.

The index.ts needs to create a browser window and load the landing page.

import { app, BrowserWindow } from 'electron';

function createWindow () {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  win.loadFile('index.html');
}

app.allowRendererProcessReuse = true;
app.whenReady().then(createWindow);

This is some boilerplate code for starting Electron, all the types are infered.

Finaly the index.html needs to display something you can recognise.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

This will display the versions of node, Chrome and Electron.

With these files in the same directory, running npm start should compile the TypeScript and start the Electron application.

aabuhijleh · Accepted Answer · 2020-02-22 18:16:36Z

0

I couldn't find any simple electron typescript starter example either... so I created my own.

Here's my repository. It's based on the official quick start starter (but with typescript).

I also added electron-builder for easily building disturbable packages.

# install dependencies
$ npm install

# compile typescript files
$ npm run compile

# watch typescript files for changes
$ npm run watch

# run the app
$ npm start

# create distributable packages for specific platforms
$ npm run dist-linux
$ npm run dist-mac
$ npm run dist-windows

edited Feb 22, 2020 at 18:16

answered Feb 22, 2020 at 17:52

aabuhijleh

2,4921 gold badge11 silver badges28 bronze badges

1 Comment

aabuhijleh Over a year ago

Thanks @matt-champion for the prestart script tip

Martin Cowie · Accepted Answer · 2020-04-16 11:34:01Z

0

I found a solution, which I shall detail here, and you can find available in code here.

You can use import in the renderer process for both Node modules and your own modules making these changes:

When constructing your BrowserWindow in the main process, set nodeIntegration to true.
When loading your JavaScript code from within your HTML page use <script>require('./renderer.js')</script> instead of the more conventional <script src="./renderer.js"></script>.

Credit for most of this goes to @kuba-orlik in this post, which sent me in the right direction.

answered Apr 16, 2020 at 11:34

Martin Cowie

2,8618 gold badges39 silver badges78 bronze badges

Collectives™ on Stack Overflow

Looking for a _working_ simple example of Electron v8 and TypeScript

Update

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related