1. Check whether Node is installed

Enter node -v and NPM -v to check whether node and NPM are installed properly. If the installation is not complete on Windows, refer to “Installing NodeJS on Windows and Configuring NPM Environment Variables”. If the installation is Linux, refer to “Installing NodeJS on Linux”.

After the installation is complete, you can change the mirror into taobao, something after download speed will be faster, at the command line, enter NPM install CNPM – g – registry=https://registry.npm.taobao.org, global CNPM installation. After the download is slow, you can directly use CNPM install.

2. Initialize the project & configuration file

The following tutorial uses Windows as an example. Linux and Mac are basically similar.

This tutorial creates a new HelloWorld folder and creates an index.html web page file underneath it.

Open a CMD window in the project file, type NPM init, and press Enter for all the bootstrap messages. The default will generate a package.json file under the project file.

Open the package.json file, change name to the project name, change the value in main to main.js, and then configure scripts as follows.

  "scripts": {
    "start": "electron ."."package-win": HelloWorld --platform=win32 -- electronic-version =10.0.0 --arch=x64 - download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/ - asar - app - version = 0.0.0 --build-version=0.0.0 --out=HelloWorld --overwrite --no-package-manager --ignore='(.git)' --icon=assets/img/logo.ico" --build-version=0.0.0 --out=HelloWorld --overwrite --no-package-manager --ignore='(.git)' --icon=assets/img/logo.ico."package-linux": HelloWorld --platform= Linux -- electronic-version = 10.0.0-no-sandbox --arch=x64 - download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/ - asar - app - version = 0.0.0 --build-version=0.0.0 --out=HelloWorld --overwrite --no-package-manager --ignore='(.git)' --icon=assets/img/logo.png"."package-mac": HelloWorld --platform= Darwin --electron-version=10.0.0 --arch=x64 - download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/ - asar - app - version = 0.0.0 --build-version=0.0.0 --out=HelloWorld --overwrite --no-package-manager --ignore='(.git)' --icon=assets/img/logo.ico" --build-version=0.0.0 --out=HelloWorld --overwrite --no-package-manager --ignore='(.git)' --icon=assets/img/logo.ico
  },
Copy the code

Four parameters are set to scripts, one is start without packaging, and the other three parameters are packaging of three different platform projects. When running the command, run NPM start if it is started directly, and run NPM run package-win if it is packaged and choose the corresponding platform.

The second argument in the first line, HelloWorld, indicates the name of the packaged application

The paltform parameter can be set to Win32, which represents an executable file packaged for Windows, packaged as.exe. If this parameter is set to Linux, the file is packaged as A Linux file. However, the file cannot run directly in Linux and needs to be configured later. Set it to Darwin and package it as an application under Mac. The out parameter indicates the name of the output folder, and the icon parameter reads the logo icon of the project. In the project, the icon is placed under the assets/ IMG folder. Then in the parameters of the mirror into the Taobao mirror, so that the packaging speed will be much faster, otherwise it will wait until the monkey horse months.

3. Create main.js

After configuring the above files, create a new main.js file under the root directory of the project, and write the following contents:

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

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

    Menu.setApplicationMenu(null) // Cancel the menu bar
    // Open the developer tool
    // win.webContents.openDevTools()
}

// Electron calls this method when initialization is complete and the browser window is ready to be created
// Parts of the API can only be used after the ready event is triggered.
app.whenReady().then(createWindow)

Exit when all Windows are closed
app.on('window-all-closed'.() = > {
    // On macOS, unless the user explicitly exits with Cmd + Q,
    // Otherwise, most apps and their menu bar remain active.
    if(process.platform ! = ='darwin') {
        app.quit()
    }
})

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

4. Install the electron plug-in

With all of the above configured, you are now ready to install the appropriate plug-ins. Open a CMD window in the project root directory and install electron only in the project by entering the command NPM install –save-dev electron.

This plugin can be used to open a web page in an application window. If you want to package it, you’ll need another plugin called NPM install –save-dev electron packager.

5. Pack and run

To test the code before packaging, type NPM start on the current command line.

Then a window will pop up, and this is the interface you need for the packaged application.

If the desired interface appears, everything is OK, but in case it does not achieve the desired effect, it is estimated to be an error, so how to open the console. In the main.js file above, I commented out the line of code that opens the developer tools. Uncheck it and see the console.

Then start packing. Run NPM run package-win in the command line window. If you see a new folder under the current directory, go to the exe file and double-click it to run.

If you want to run it under Linux, run NPM run package-Linux in a command line window, and the resulting file is slightly different from Windows, but the executable file name is the same, both called HelloWorld, go to the entire file, open the terminal in the current directory, For normal users, give chmod +x./HelloWorld permission first, and then run./HelloWorld. If it pops up, you’ve succeeded, but I’ve been trying this whole thing for a long time and I haven’t succeeded, the console is always reporting this error

[5301:1201/103632.560608: FATAL: electron_main_delegate. Cc (264)] Running as root without - no - the sandbox is not supported. See https://crbug.com/638180. Trace and breakpoint traps (core dumped)Copy the code

HelloWorld –no-sandbox /HelloWorld –no-sandbox /HelloWorld –no-sandbox

The following words of Mac are not tested, because qiu, each big guy can test by himself, if you have any questions, you can comment and discuss.

6. Other questions

The tutorial above has done all the packaging, but the point is to solve some of the problems I encountered in the packaging process.

The first is that during the packaging process, if you reference some other JS library or file, such as jQuery, the console will say $is not a function. This is because of the path problem during the packaging process. this line of code will solve the problem.

7. Compile/decompile app.asar

After packing, Electron transforms the data files into a compressed file in ASAR format that needs to be decompiled with Node to get all the data files. Go to the resources folder under the packaged directory and open it to find the app.asar file.

Open a CMD window in the Resources directory and run the command NPM install -g asar, which will be used for node global installation.

Extract app.asar./app to extract app.asar into the current directory of the app folder, then open the app folder, find the data folder, below which is the two data returned by the backend. Head_data. js and ssh_data.js. If the back end needs to replace data, replace it in the same format.

If you replace the data, you need to recompile the app folder into app.asar, or run the CMD window under the Resources folder, and then run the command asar pack app app.asar to replace the previous app.

** Note: ** If the back end needs to make changes to the data file, you don’t need to decompile it every time. You can decompile it manually once and then have the back end replace the data.