Learn to Code via Tutorials on Repl.it!

← Back to all posts
How to make a simple Electron app!
Wumi4 (540)

What's up devs

Today, I will show you how to make a simple desktop app but using web technologies with Electron framework! :)

What's Electron?

Electron (full name is Electron.js) is one of the famous web app framework. It was developed by GitHub. Electron using Nodejs runtime and Chromium browser to run your apps.

Now, let's dive into making our first web app!

1.Install Nodejs

Before we create project, we need to install Nodejs and it's package manager, npm to install and run Electron.

The how you install Nodejs and npm is different depends on your OS, for example, here's how you install nodejs and npm on Ubuntu and Debian:

sudo apt-get install node npm

If you are using a rolling-release Linux distro like Manjaro (which I am using) or Arch, you need to update your system first:

sudo pacman -Syu # Update the system
sudo pacman -S node npm # Install Nodejs and npm

You can check the Nodejs installation guide for more infomation.

After install Nodejs and npm, make sure to check if they has installed by check their version:

node -V # Check the Nodejs version
npm -V # Check the npm version

If you has installed Nodejs and npm, let's setup our project.

2.Setup Project

First, of course, you need to create a folder called My App contains your project, you can rename it with the name you like.

Open the project with the text editor that you like. I'm using Code - OSS, a text editor that is looks very similar to VS Code.

Here is how it's looks:

Now, open the terminal, go to the path of your project, and type the following:

npm init

This will setup our project, when you done, it will storage all information in a JSON file called package.json

You can type the following if you don't want spend time at edit the project infomation:

npm init -y

Now, when you open package.json, it will have content like this:

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Hoang Tuan",
  "license": "ISC"
}

Replace the test data in scripts with this:

"start": "electron ."

We will use npm start to run our app.

We are almost finish setup our project, the final thing we need to do is to install Electron.

Install it with this:

npm install --save-dev electron

This will install Electron as a development dependency, means that you can run multiple apps with different Electron version without having trouble.

Finally, we have setup our Electron project, let's make our app!

3.Make our app

Now, create a JavaScript file called index.js.

Type the following will create a simple window:

const { app, BrowserWindow } = require('electron')

// Create the window, don't rename the function!
function createWindow () {
  // Create the browser window.
  const win = new BrowserWindow({
    // Width and height of the window, feel free
    // to edit it.
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // Load the index.html file of the app (we will create
  // it later)
  win.loadFile('index.html')
}

// Run the app when it's ready
app.whenReady().then(createWindow)

Create the file index.html, which is the webpage we want to show and enter the following:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

Now, to run the app, type:

npm start

You should see something like this:

If you see that, congratulations! You have just make a Electron app.

The end of this tutorial

Check out the Electron docs if you want to know more.

Happy coding!

  • Hoang Tuan (@DangHoang2)
Comments
hotnewtop
RahulChoubey1 (183)

100% certified broken
(on replit at least)

Wumi4 (540)

@RahulChoubey1 It is broken because this thing is 10 months ago. If you mean by running it on Repl, then this tutorial is not designed for it.

programmeruser (615)

a text editor that is looks very similar to VS Code.

It's called VSCodium, VSCode without all of the propietary things

Squirrel777 (141)

It doesn't work! Probably because Im using Chrome OS. I will upgrade to Windows 10 soon tho

firefish (953)

PLEASE USE SEMI-COLONS WHAT IS WRONG WITH YOU

Wumi4 (540)

@firefish

Big oof, I forgot that. I just paste the code from the offical doc so I dont see that, that was bruh.

But semicolon is not required, but recommended. Am I right?
firefish (953)

@DangHoang2

Yes, but the semicolons are good practice to use, you know

Because if you come across a language that does require them (C#, Java, Rust, C, C++, you name it) You are going to literally miss them half of the time.
In some languages like Golang, that are the same as JS, in that you can use semi-colons, but in this case it's preferred not to because the code formatter strips them off.
But in JS, USE SEMI-COLONS, because they will help you immensely learn other languages

firefish (953)

@CodeLongAndPros python can have semicolons.
print(a := 2);print(a) will print

2
2
firefish (953)

@CodeLongAndPros Python has a worse no-semi-colon disease than Golang.

CodeLongAndPros (1631)

@firefish Uh so you can literally just use a new line instead of a semi as the delim

firefish (953)

@CodeLongAndPros Yes. Not in js though, you get thigs like

let foo = bar()
(async () => {
     await baz()
})()

In which JS (which is broken) thinks that you are calling the output of bar(), with a callback, then calling that.
so basically, JS reconstructs the above to be the following:

let foo = bar()(async () => await baz())()

which is unintended. So USE SEMICOLONS

CodeLongAndPros (1631)

@firefish Yes. But a python programmer met not know that.

firefish (953)

@CodeLongAndPros Well python isn't susceptible to this AWFUL BUG THAT MOZILLA SHOULD FIX, so I do not blame them.
But just be wary of this, JS coders.

CodeLongAndPros (1631)

@firefish Because python parses by newlines

firefish (953)

@CodeLongAndPros In JS the distinction between a feature and a bug is microscopic.

CodeLongAndPros (1631)

Electron sucks. I have like 5 browsers on my computer even though I only installed firefox-developer-edition

EpicGamer007 (1751)

OMG AMAZINGGGG, YAYYYYY, Now vscode has a useeee!! And i can make a appppp without javaaa.. lezzzz goooooo.