First steps building an app using Electron with Typescript

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 and 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:

{
  "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:

  {
    "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.

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:

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.

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.

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

Comments

[Seanmclem]

That's it?