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>
Top comments (1)
That's it?
Some comments have been hidden by the post's author - find out more