Batajus

Posted on Apr 13, 2020

Electron TypeScript Electron - Quick start with Typescript

#electron #typescript

Due to the rapidly growing internet, web applications are becoming more and more important for our modern society. So nowadays it isn't required anymore to write a Desktop application with a languages like C++, Java, Python, etc.
With the Electron framework we're able to create native Desktop applications with web technologies.

Electron provides a Chromium-Browser with a full Node.js integration, which loads our web app.

We can use Electron not only to create new Desktop applications. With it we can provide native apps for already existing web applications, too.

In this guide I will explain how to create a simple Electron app with the Electron framework and Typescript.

Let's start 🙂

Getting started

You need to create a new directory, called whatever you like, or e.g. electron-typescript-guide, and initialize it with npm init.

Afterwards we need to install Electron and Typescript:

npm i electron typescript --dev

One last thing before we can start to implement our small project. We need to add a tsconfig.json to out project. You can add it by yourself or by executing the tsc --init command (I recommend this =D).

Also we define an output directory to the tsconfig.json for the transpiled Typescript files:

"outDir": "./build"

Now your tsconfig.json should look like this (with a lot of additional comments):

{
    "compilerOptions": {
        "target": "es5",         
        "module": "commonjs",    
        "strict": true,          
        "esModuleInterop": true,    
        "outDir": "./build"
    }
}

Now we're ready to implement our first Electron app 🎉

Actual Coding of your Electron app 😊

Let's start with our implementation.

First of all we create a index.html, which we're loading in our app. You can add any content to it.

The index.html can, for example, look like this:

<!DOCTYPE html>
  <head>
    <title>Electron Project</title>
  </head>
  <body>
    <h1>Electron Typescript Beginner's Guide =)</h1>
  </body>
</html>

In the next step we create our index.ts.

At first we subscribe us to the ready event of our application, which is emitted as soon as the initialization has finished.

import { app } from 'electron';

app.on('ready', () => {
  console.log('App is ready');
});

After the initialization we will create our browser window. To do so, we create a BrowserWindow in our event callback.

const win = new BrowserWindow({
  width: 600,
  height: 400
});

The created window will have a width of 600px and height of 400px.
For more details about the BrowserWindow options you should take a look into the docs.

If we would start our application now only a white window will be shown. Now we will load our index.html into our browser window.

const indexHTML = path.join(__dirname + '/index.html');
win.loadFile(indexHTML).then(() => {
    // IMPLEMENT FANCY STUFF HERE
});

And now, we're almost finished with our Electron app 🥳

Starting of our Electron Application

So before we can start our application we need to transpile our Typescript code into JavaScript.

For this we extend the scripts object in our package.json, so it is easier for us 😉

We add a script to transpile our code and copy our index.html into the created build directory:

"compile": "tsc && copyfiles -f src/index.html build"

We transpile our code with tsc and the second part of the command creates a copy of our index.html in the build directory, which was created by the tsc command.

Note:
copyfiles is a npm package, which copies files from one directory to another and works on every OS. We can install it with npm i copyfiles --dev.
If you're using Linux or MacOS you can also use cp index.html build/ instead.

Next we add a start script:

"start": "npm run compile && electron"

Now every time we run npm start we transpile our Typescript code and start our Electron app.

One last thing before we can start our application we need to change the path to our index.js our package.json:

"main": "build/index.js"

Now we can run npm start and see our app starting 😊

Conclusion

So this was my first post ever 😊
I hope you enjoyed reading it and if you've any suggestions please leave a comment😊

You can find the complete source code at GitHub:

Batajus / electron-typescript-guide

A simple project to introduce into Electron with Typescript

electron-typescript-guide

A simple project to introduce you to Electron in combination with Typescript.

How to start

Install all packages
```
 npm install
```
Run the electron application
```
 npm start
```

View on GitHub

More posts about Electron are coming soon, so stay tuned 🎉

Top comments (3)

Camilo Martinez • Dec 19 '23 • Edited

Thanks! Help me a lot. I've changed it a little the scripts configuration.

{
  "main": "build/index.js",
  "scripts": {
    "prestart": "npm run compile",
    "start": "electron .",
    "compile": "tsc && cp -r src/pages build/ && cp -r src/assets build/"
  }
}