DEV Community

Batajus
Batajus

Posted on

Electron TypeScript Electron - Quick start with 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 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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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"
    }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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');
});
Enter fullscreen mode Exit fullscreen mode

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
});
Enter fullscreen mode Exit fullscreen mode

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
});
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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 logo 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

  1. Install all packages

     npm install
    
  2. Run the electron application

     npm start
    



More posts about Electron are coming soon, so stay tuned πŸŽ‰

Top comments (3)

Collapse
 
equiman profile image
Camilo Martinez • Edited

Thanks! Help me a lot. I've changed it a little the scripts configuration.

{
  "main": "build/index.js",
  "scripts": {
    "prestart": "npm run compile",
    "start": "electron .",
    "compile": "tsc && cp -r src/pages build/ && cp -r src/assets build/"
  }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
hackjaku profile image
Thomas

Thanks a lot, but the script should be: "start": "npm run compile && electron ."

Collapse
 
rightdroid profile image
Toomas Jaska

Thanks! This helped me getting off the ground.