Some small problems encountered when building an Electron project

1. Build an Electron project

1. Create a folder

mkdir electron-desktop

2. Enter the created folder

cd electron-desktop

3. Execute the following command:

yarn init -y
yarn add electron --dev

        The above command creates a blank project that contains a package.json and dependencies installed in the node_modules directory.

        During the creation process, I also generated a package-lock.json file, which caused me to report an error in the fourth step, and the error message prompted to remove the file:

 After the removal, the error is still reported when the yarn add command is executed again:

After searching I found the following workaround:

• First clear the cache: npm cache clean --force
• Set the mirror source: npm config set registry https://registry.npm.taobao.org
• If it has not been set before, set the mirror address: npm config set disturl https://npm.taobao.org/dist
• Set electron mirror: npm config set electron_mirror https://npm.taobao.org/mirrors/electron/

The above method comes from: the original article of CSDN blogger "Ming Tsai's Sunny Afternoon", the original link: https://blog.csdn.net/qq_41785288/article/details/128323448

Verify that the installation was successful:

• npx electron -v

成功后再次执行yarn add，

 2. Write the startup project

1. Create the src directory, and continue to create the main and renderer folders in this directory:

        There are two important concepts in Electron, the main process and the rendering process. In the main process, Node.js code is used to call the API encapsulated by Electron to create a window, manage the entire life cycle of the application, and load the traditional web interface in the rendering process:

• The main directory is used to store code related to the main process
• The renderer directory is used to store codes related to rendering

2. Create an index.html file in the renderer directory, and write the content of the file according to your own needs

3. Create index.js in the main directory as the entry of the main process, and load the index.html file

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

let win
app.whenReady().then(() => {
  win = new BrowserWindow({ width: 800, height: 600, titleBarStyle: 'hiddenInset' })
  win.loadFile(path.join(__dirname, '../renderer/index.html'))
})

4. Add the configuration in the package.json file as follows:

"main": "src/main/index.js",
"scripts": {
  "start": "electron ."
},

5. Run the built project:

npm start

If successful, the built application can be opened on the desktop.

The road is long and long, I will search up and down!