DEV Community

loading...
Cover image for Build a desktop app using HTML/CSS/JS & Electron

Build a desktop app using HTML/CSS/JS & Electron

Michael Burrows
Web Developer @ w3collective.com
Originally published at w3collective.com Updated on ・2 min read

If you know how to build a website you can build desktop app’s with the Electron framework.

As an introduction to the framework we’ll create a simple desktop clock application.

Alt Text

Before getting started it’s recommended to have a current version of node.js installed.

Ok, first let’s create the folder/file structure required for this project:

electron-test/
├─ package.json
├─ index.js
├─ index.html
├─ script.js
├─ style.css
Enter fullscreen mode Exit fullscreen mode

package.json

This file Indicates which command to run when we start the application:

{
  "name": "electron-test", 
  "main": "index.js",  
  "scripts": {
    "start": "electron ."
  }
}
Enter fullscreen mode Exit fullscreen mode

Note: Don’t use "name": "electron" or the Electron installation will fail.

Install Electron

Open up a new terminal window in the project folder and then run the install:

npm install --save-dev electron
Enter fullscreen mode Exit fullscreen mode

This downloads all the required node modules and adds the dev dependency to our package.json.

index.js

This file is used to create windows and handle system events.

For our clock app we’ll create a small (190×80) fixed size browser window:

const { app, BrowserWindow } = require("electron");

app.whenReady().then(createWindow);

function createWindow() {
  const win = new BrowserWindow({
    width: 190,
    height: 80,
    resizable: false,
  });
  win.loadFile("index.html");
}
Enter fullscreen mode Exit fullscreen mode

index.html

Very basic HTML file that loads the CSS and JS for the the clock functionality:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Clock App</title>     
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

script.js

Fetch’s the current time and updates it each second (1000 milliseconds) in the index.html.

function getTime() {
  time = new Date().toLocaleTimeString();
  document.body.innerHTML = time;
}
setInterval(getTime, 1000);
Enter fullscreen mode Exit fullscreen mode

style.css

Lastly the CSS to improve the appearance of our clock:

body {
  font-family: monospace;
  font-size: 32px;
  background-color: black;
  color: greenyellow;
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

The monospace font prevents the clocks position shifting when the numbers change.

Start the application

We can now start our application by running the following command:

npm start
Enter fullscreen mode Exit fullscreen mode

Discussion (5)

Collapse
ajayadav09 profile image
ajayadav09

How does make into an app after this ? I have followed all the steps what do we do next ?

Collapse
carljf profile image
Carl

Take a look at "Electron Fiddle", allows you to Compile & Package:
Fiddle can automatically turn your experiment into binaries you can share with your friends, coworkers, or grandparents. It does so thanks to electron-forge, allowing you to package your fiddle as an app for Windows, macOS, or Linux.
electronjs.org/fiddle

Collapse
sandeepmenon profile image
Sandeep Menon • Edited

You can use a tool called electron-builder
It requires minimal configuration and is super easy.

Collapse
ajayadav09 profile image
ajayadav09

@Sandeep Thank you. Will check it out.

Collapse
andrewbaisden profile image
Andrew Baisden

Cool guide easy to follow. So any front end developer could potentially add a new skill boosting job prospects.