Grundsetup für Electron mit TypeScript und React

Für den Anfang müssen wir ein leeres Projekt mit npm initialisieren. Natürlich kann man das einfach auch "per Hand" machen und im ausgewählten Projektverzeichnis folgende package.json Datei einfügen:

{
  "name": "electron-react-ts",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "build": "tsc",
    "watch": "tsc -w",
    "lint": "tslint -c tslint.json -p tsconfig.json",
    "start": "npm run build && electron ./dist/main.js"
  }
}

Die package.json unterscheidet sich im Moment nicht von der Musterdatei, die schon in dem offiziellen "electron-quick-start-typescript" Projekt (https://github.com/electron/electron-quick-start-typescript) zu finden ist: Die "dist/main.js"-Datei ist die "Start"-Datei der Applikation und wird im Build-Prozess aus der zugehörigen TypeScript-Datei generiert.

Für electron benötigen wir natürlich:

npm install --save-dev electron

Und für TypeScript:

npm install --save-dev typescript

TypeScript wird mit dem Flag "--save-dev" installiert, damit ist es nur in diesem Projekt verfügbar.

Damit der Build des Projektes so wie in package.json Datei festgelegt funktioniert, muss TypeScript entsprechend konfiguriert werden (in tsconfig.json ):

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "jsx": "react",
    "paths": {
      "*": ["node_modules/*"]
    }
  },
  "include": [
    "src/**/*"
  ]
}

Hier wird neben des src und dist Verzeichnisses für TypeScript bzw. transpilierte JavaScript Dateien auch schon die Unterstützung für JSX definiert: "jsx": "react" - ohne diese Zeile können "tsx" bzw. "jsx" Dateien nicht verwendet werden.

Anschliessend müssen wir noch React und ReactDOM zum Projekt hinzufügen (und die entsprechenden "Typings"):

npm install react
npm install react-dom
npm install --save-dev @types/react
npm install --save-dev @types/react-dom

Damit ist auch schon das Grundsetup der Applikation abgeschlossen:

App/
├── dist/ (generiert im Build-Prozess)
│   ├── index.js
│   ├── index.js.map
│   ├── main.js
│   └── main.js.map
├── node_modules/
├── src/
│   ├── index.tsx
│   └── main.ts
├── index.html
├── package.json
└── tsconfig.json

Wie schon erwähnt beinhaltet die main.ts Datei die Grundkonfiguration für Electron und öffnet das Hauptfenster der Applikation, in das die Datei "index.html" (mit mainWindow.loadFile(path.join(__dirname, "../index.html")) ) geladen wird. Der Code von main.ts unterscheidet sich nicht wesentlich von dem im offiziellen Tutorial: https://electronjs.org/docs/tutorial/first-app ("main.js ").

Die "index.html" Datei lädt dann den Applikationscode:

<div id="app"></div>
<script>require('./dist/index.js')</script>

mit einer React-Komponente in "index.tsx":

import * as React from 'react';
import * as ReactDOM from 'react-dom';

class App extends React.Component<{}, {}> {

    render(): JSX.Element {
        return (
            <div>
                Test
            </div>
        );
    }
}

ReactDOM.render(
  <App />,
  document.getElementById('app') as HTMLElement
);

Das Setup der Applikation ist jetzt vollständig und sie kann mit:

npm run start

auch gestartet werden!