DEV Community

Cover image for Javascript Electron
RRARI504
RRARI504

Posted on • Edited on

Javascript Electron

#webdev #javascript #electron #programming

What is an Electron?

Electron is a framework that lets developers build cross-platform web applications. It utilizes HTML, CSS and Javascript to make web applications between Windows, macOS and Linux operating systems. So, the same skills used to build static websites can be used to make full desktop applications; giving developers a toolkit to use and one code base. It is used today in many popular applications like Discord, Slack and Microsoft just to name a few. On the frontend Electron user interfaces can be made regularly just like a webpage using frameworks like Angular, React or whatever framework you choose. The backend is handled by the main process which runs Node.js and is like a server behind the scenes.

Building from scratch

Lets get started with the process of putting together a minimal Electron application from scratch to see how it actually works.
In Visual Studio Code make sure you have Node.js installed. If you do not, run this command to install it:

npm install -g npm
Enter fullscreen mode Exit fullscreen mode

Once this command is ran you can make sure Node.js was installed correctly by checking the node version. You should see something like this when using the -v flag.

$ node -v
v16.14.2
Enter fullscreen mode Exit fullscreen mode

Next, you can use npm init to initialize an npm package and also you can create a directory for your actual Electron app and cd into this directory using these commands:

npm init
Enter fullscreen mode Exit fullscreen mode

This command sets up a new npm package and creates a package.json file in the current directory.

mkdir my-electron-app
Enter fullscreen mode Exit fullscreen mode 
cd my-electron-app
Enter fullscreen mode Exit fullscreen mode

These commands make a new directory called 'my-electron-app' and uses cd (current directory) to go into that newly made directory.

Now, that you have successfully set up your package.json you can change the 'rules' section in the package.json to make the entry point main.js. Then you can use this command to actually install Electron into your app's devDependencies.

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

After installing Electron your package.json should look like this.

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Jane Doe",
  "license": "MIT",
  "devDependencies": {
    "electron": "23.1.3"
  }
}
Enter fullscreen mode Exit fullscreen mode

Now you should add a .gitignore into your project's root folder to avoid committing your project's node_modules folder. The gitignore file allows you to control what files and directories you don't want to be tracked with git. At this point you are ready to actually run your Electron application. As stated before the backend of Electron is handled by the main process which runs Node.js and is like a server behind the scenes. To ensure your main process entry point is configured correctly, create a main.js in the root directory of your project and add this simple line of code.

console.log('Hello from <name>')
Enter fullscreen mode Exit fullscreen mode

Now you can run the electron command and the scripts field to your package.json by adding electron . to the start command in your package.json. This command will tell the Electron executable to look for the main script in the current directory and run it in dev mode. Your package.json should look like this now.

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Jane Doe",
  "license": "MIT",
  "devDependencies": {
    "electron": "23.1.3"
  }
}
Enter fullscreen mode Exit fullscreen mode 
npm start
Enter fullscreen mode Exit fullscreen mode

Now, running this start command should print 'Hello from ' in your terminal and this lets you know that your first line of code with Electron is being executed and now you've successfully set up a minimal Electron app and verified that it's running. Next, you can start creating user interfaces with HTML and load that into a native window.

Electron vs. React

Onward

This concludes the basic set up tutorial for an Electron application. It is minimal but functional and the foundation of a cross-platform desktop application using web technologies like HTML, CSS and Javascript. From here, you can start exploring more advanced features in Electron like inter-process communication, integrating frontend frameworks like React and packaging your app for distribution.

https://www.electronjs.org/docs/latest/

Top comments (0)