Setup for Electron with TypeScript and React

First things first, we have to initialize an empty project with npm. Of course you can do this by hand and insert the following package.json file in a previously created project directory:

{
  "name": "electron-react-ts",
  "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"
  }
}

The package.json does not differ much from the file, which can already be found in the official "electron-quick-start-typescript" project (https://github.com/electron/electron-quick-start-typescript): The "dist/main.js" file is the "start" file of the application and it is generated from the associated TypeScript file in the build process.

For electron we need of course:

npm install --save-dev electron

And for TypeScript:

npm install --save-dev typescript

TypeScript is installed with the --save-dev flag, so it is only available for this project.

In order for the build of the project to work as defined in package.json file, we have to configure TypeScript settings in tsconfig.json:

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

We have to enable JSX support with "jsx": "react" for all "tsx" or "jsx" files. Besides this, "src" directory for all TypeScript files and "dist" directory for transpiled JavaScript files are defined.

Last but not least we have to add React and ReactDOM to the project (and the corresponding "Typings"):

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

This completes the basic setup of the application:

Devlabs-Ninja-App/
├── dist/ (generated in the build process)
│   ├── index.js
│   ├── index.js.map
│   ├── main.js
│   └── main.js.map
├── node_modules/
├── src/
│   ├── index.tsx
│   └── main.ts
├── index.html
├── package.json
└── tsconfig.json

As already mentioned, the main.ts file contains the basic configuration for Electron and opens the main window of the application, in which the file "index.html" is loaded: mainWindow.loadFile(path.join(__dirname, "../index.html")). The code of main.ts does not differ much from the one in the official tutorial: https://electronjs.org/docs/tutorial/first-app ("main.js").

The "index.html" file loads the application code:

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

with contains an React component in "index.tsx":

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

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

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

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

The setup is now completed and the application can be started with:

npm run start

Resources: German version of this tutorial