Electron - Quick start with Typescript
Tags: electron, typescript
Published: 2020-04-13 12:48:01

---
title: Electron - Quick start with Typescript
published: true
description: 
tags: #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](https://www.electronjs.org/) 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](https://www.electronjs.org/docs/api/browser-window#class-browserwindow).

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:

{% github batajus/electron-typescript-guide %}


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