In the previous section, “Setting up the Node.js Development Environment,” we installed the Node.js environment. In this video, I’m going to show you how to develop your first Electron project.

1. Use The NPM image of Taobao

First, we need to install the Electron module, but because NPM is downloaded from a foreign server by default, the network is not so stable, so we first install CNPM and download from the domestic Taobao image, which will be more stable.

npm install -g cnpm --registry=https://registry.npm.taobao.org
Copy the code

For the difference between NPM and CNPM, please refer to the article “Usage and Differences of NPM and CNPM”.

2. Initialize the project

There are two ways to do this: you can use the NPM init command to generate the project initialization file, or you can download the sample program code directly from the GitHub home page.

Method 1: Usenpm init

  1. Create an empty folder, then open the command line tool and run it in that folder 
    npm init
Copy the code
  2. Once the parameters are set, a package.json file is generated 
    {
  "name": "first_electron"."version": "0.0.1"."description": ""."main": "main.js"."scripts": {
	"start": "electron ."
  },
  "author": "samrt crane"."license": "ISC"."devDependencies": {
	"electron": "^ 9.2.0"}}Copy the code
  3. The default package.json file may not look like this. Let’s change these parameters. 
    {
  "name": "your-app"."version": "0.1.0 from"."main": "main.js"."scripts": {
	"start": "node ."}}Copy the code

Method two: Download the sample from Github

Open the following address to download the source code of the electron quick-start project.

https://github.com/electron/electron-quick-start
Copy the code

Once downloaded, unzip the code file (if you downloaded it in zip format) into your project folder.

Install electron as a development dependency in your app.

npm install --save-dev electron
Copy the code

This one is from a foreign source, the network is very unstable and will probably fail.

Solution: Install CNPM instead of NPM.

cnpm install --save-dev electron
Copy the code

4. Set the project filemain.js 和 index.html

  1. The new main. Js

    const { app, BrowserWindow } = require('electron')
function createWindow () {   
  // Create a browser window
  const win = new BrowserWindow({
    width: 800.height: 600.webPreferences: {
      nodeIntegration: true}})// And load index.html for your application
  win.loadFile('index.html')

  // Open developer tools
  // win.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some apis are available only after the Ready event is triggered.
app.whenReady().then(createWindow)

// Quit when all windows are closed.
app.on('window-all-closed'.() = > {
  // On macOS, unless the user is sure to exit with Cmd + Q,
  // Otherwise, most apps and their menu bars will remain active.
  if(process.platform ! = ='darwin') {
    app.quit()
  }
})

app.on('activate'.() = > {
  // On macOS, when you click the Dock icon and no other Windows are open,
  // Usually create a new window in the application.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also split it into several files and import it with require.

Copy the code

  2. A new index. HTML

    <! DOCTYPEhtml>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <! -- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </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>
Copy the code

Of course, if you are using the sample code downloaded from Github, you can modify it directly in the corresponding file

5. Start and run

npm start
Copy the code

Operation effect diagram:

At this point, our first Electron program is created and ready to run successfully.