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 sample project to introduce you to Electron in combination with Typescript.
How to start
-
Install all packages
npm install
-
Run the electron application
npm start
More posts about Electron are coming soon, so stay tuned π
Top comments (3)
Thanks! Help me a lot. I've changed it a little the scripts configuration.
Thanks a lot, but the script should be: "start": "npm run compile && electron ."
Thanks! This helped me getting off the ground.