Electron is not exactly a new technology, but has never been touched before. So, when you hear about it being used in a project, plan to learn about it.

The Electron community website is attached at the beginning for interested friends to check by themselves

www.electronjs.org/

What is Electron?

  • Electron is an open source framework developed by Github
  • Allow developers to build desktop applications using Web technologies (use Javascript, HTML and CSS to build cross-platform desktop applications)

Common Electron development applications

  • VSCode: development tool
  • Atom: Github’s text editor

Electron development environment setup

  • Installation Node. Js

    • This for our front-end personnel should be very familiar, here directly to the official website address:

      nodejs.org/zh-cn/

      After the installation, you can use the following two commands to check, if the version appears, it indicates that you installed successfully.

      • node -v
      • npm -v

  • Install the Electron

    • In the drive letter, create a new folder. Open with VSCode, open terminal, and enter install command:

      npm install electron --save-dev

      After a period of waiting, use the following two commands to check whether the installation is successful

      npx electron -v

      ./node_modules/.bin/electron -v

      If successful, the version will be displayed, as shown

      There’s another way to do it. Start Electron directly

      ./node_modules/.bin/electron

      It is displayed after success

Electron first Hello World program

Every time you learn a new skill, start with Hello World, and Electron is no exception.

  • Global installation Electron

    npm install -g electron

    CNPM can be used for installation, and it is more convenient to use after global installation

  • Create a new index.js file

    Create a new folder such as demo, create an index.js file in the root directory of your project, and write Hello World as follows:

  • Create a new main.js file

    Create a new main.js file in the root directory. This is the Electron main process file.

  • Create a package.json file

    Use NPM init –yes to initialize the package.json file

    If the value of main is main.js, it is correct. You can open the terminal and type electron to open the window.

Conclusion: The completion of Hello World indicates that the most basic project has been successful, but there is still a considerable gap from our expectations. This is the first in our Electron series, and we're not done yet. Electron provides us with many applications: creating right-click menus, dialog box operations, outage alerts, message notifications, clipboard, etc., which will appear in later articles.