Build cross-platform desktop apps with JavaScript, HTML, and CSS

Electron is an open-source software framework developed and maintained by GitHub. It allows for the development of desktop GUI applications using web technologies: it combines the Chromium rendering engine and the Node.js runtime.

If you can build a website, you can build a desktop app. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application.

Thousands of organizations spanning all industries use Electron to build cross-platform software (messenger for desktop, twitch, Figma, Slack, GitHub Desktop...).

Setting up the environment:

1) First, you should have Node installed => https://nodejs.org/en/download

2) Create a directory for you project, then run the following command:

npm install --save-dev electron

3) Initialize your node project by running the command :

npm init -y

4) Creating the starting script (main.js):

Our main.js file is going to contain the necessary code to start a browser window so we can use our web technologies to build it as a desktop app which obviously is going to run at any browser just fine. So here is the code:

5) After that we need to make a little change in our package.json file, which is setting the start script to be "electron main.js" to start our app with that file.

The structure of our directory is going to be like that:

6) Now we’re going to write a simple app just to make sure everything is working:

7) All you have to do now is run the command:

npm start

, And voila !

The following video explains the step by step process for building your first electron app:

For source code feel free to checkout the following GitHub repository:

https://github.com/wadiemendja/electron-project-setup