First steps building an app using Electron with Typescript
Tags: electron, typescript, javascript, howto
Published: 2021-02-26 11:24:19

Hi there! I'll show here how to create a desktop application with Electron and Typescript so take a sit and enjoy!

First things first, you need to install [Node.js](https://nodejs.org/en/download/) and [npm](https://www.npmjs.com/get-npm). The versions am using are `Node.js v12.14.1` and `npm 7.5.6`. 

Now you can create a folder where your project is gonna stay in this case I'm going to call my folder as `devto-electron`. 

Open the Terminal and into `devto-electron` folder run that command line: 

`npm init` 

Then you'll see a new file called `package.json` in that file you add your project informations, scripts and dependencies you'll use. Take a look at my `package.json`:

```json
{
  "name": "devto-electron",
  "version": "1.0.0",
  "displayName": "DevTo-Electron",
  "description": "DevTo-Electron",
  "main": "dist/src/main.js",
  "scripts": {
    "copyhtml": "copyfiles -u 1 -e \"./src/**/*.ts\" -a \"./src/renders/**\" \"./dist/src/\"",
    "postinstall": "electron-builder install-app-deps",
    "build": "tsc",
    "start": "rm -rf ./dist && npm run build && npm run copyhtml && electron ./dist/main.js",
    "deploy": "rm -rf ./dist && rm -rf ./build && npm run build && npm run copyhtml && electron-builder -m"
  },
  "author": "Dênis Mendes",
  "license": "ISC",
  "devDependencies": {
    "7zip-bin": "^5.0.3",
    "copyfiles": "^2.3.0",
    "electron": "^11.0.4",
    "electron-builder": "^22.9.1",
    "ts-node": "^9.1.1",
    "typescript": "^4.1.0"
  },
  "dependencies": {
    "ps-list": "^7.2.0",
    "tasklist": "^4.0.1"
  },
  "build": {
    "generateUpdatesFilesForAllChannels": true,
    "files": [
      "dist/**/*",
      "package.json"
    ],
    "directories": {
      "output": "build"
    },
    "win": {
      "icon": "assets/images/icon.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64",
            "ia32"
          ]
        },
        "zip"
      ]
    },
    "mac": {
      "icon": "assets/images/icon.icns",
      "target": [
        "zip",
        "dmg"
      ],
      "hardenedRuntime": true,
      "gatekeeperAssess": false
    },
    "linux": {
      "target": [
        "deb",
        "zip"
      ],
      "category": "Utility",
      "icon": "assets/images/linux-icon.png"
    }
  }
}

```

Now you need to run:

`npm install`

So `npm` will download every dependencies and install them. 

Create a `tsconfig.json` like that in the root folder:

```json
  {
    "compilerOptions": {
      "module": "commonjs",
      "moduleResolution": "node",
      "strict": true,
      "noImplicitAny": true,
      "sourceMap": false,
      "outDir": "dist",
      "resolveJsonModule": true,
      "baseUrl": ".",
      "suppressImplicitAnyIndexErrors": true,
      "paths": {
        "*": [
          "node_modules/*"
        ]
      },
    },
    "include": [
      "src/**/*"
    ]
  }
```

After these configurations file we can start our source code, we need a new folder called `src` where we will create our source code files.

Into `src` we create `main.ts` where we're going to put the main process code which will start up the application.

```typescript
const { app, BrowserWindow } = require('electron')
import * as path from "path"

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      nativeWindowOpen: true,
    }
  })

  win.loadFile(path.join(__dirname, "../src/renders/main/main.html"))
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})
``` 

In this line:

```typescript
win.loadFile(path.join(__dirname, "../src/renders/main/main.html"))
```

We are telling which html file needs to be loaded after run the application that we will be creating soon. 

The current folder structure is that:

```
- devto-electron
  + node_modules
  - src
      main.ts
    package.json
    tsconfig.json
```

Now we're going to be working on `main.html` which will be our frontend page. 

Our application is going to list which processes are running at the moment on operation system, so we need to add in package.json a new dependence:

`npm install ps-list@7.2.0 --save`

Now you're able to see in package.json the new package at dependencies and it's installed as well.

We can create the folder we will create the html pages and its business logic.

Lets to call that folder as `renders` and into `renders` create another called `main` so the main page and its business logic stay there.

After that we have this folder structure:

```
- devto-electron
  + node_modules
  - src
    - renders
      + monitor
      main.ts
  package.json
  tsconfig.json
``` 

Into `renders/main` we create two files:

```
monitor.ts
monitor.html
```

Then now we have that:

```
- devto-electron
  + node_modules
  - src
    - renders
      - monitor
        monitor.ts
        monitor.html
    main.ts
  package.json
  tsconfig.json
```

Open the `monitor.ts` and we will add the coding to list which processes are running now at OS.

```typescript
const psList = require('ps-list')

class Monitor{
    constructor(){
        (async () => {
            const list = await psList()

            console.log(list);
        })();
    }
}

module.exports = Monitor
```

We need to call that class into our rendering process so we open `monitor.html` and add that code that shows in console which processes are running.

```html
<script>
new (require("./monitor.js"));
</script>
```