[Front-end] About how to package an html web page such as html, js, css, etc. into a single exe executable program file

To package an HTML web page such as HTML, JS, CSS, etc. into a single executable program file (exe), you usually need to use some tools and frameworks to achieve it.

Here we take Electron as an example to explain the specific packaging process in detail.

1. Install dependencies: Make sure Node.js is installed. Enter your project directory on the command line and execute the following command to install Electron:

npm install electron

2. Create file structure: Create the following file and folder structure in your project directory:

• index.html: The main HTML file where your web content will be placed.
• main.js: The main process script file of the Electron application.
• package.json: The application's configuration file.

3. Configuration package.json: Open package.jsonthe file and add the following content:

{
  "name": "your-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^12.0.0"
  }
}

4. Write the main process script main.js: open main.jsthe file and write the following code:

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

function createWindow() {
  const win = new BrowserWindow();
  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

The above code creates an Electron window and loads index.htmlthe file.

5. Write web content: Open index.htmlthe file and write your web content, including HTML, CSS and JavaScript.

6. Package and run the application: Execute the following command on the command line to run your application:

npm start

7. Build the executable file: Once you confirm that the application is running properly, you can use the packaging tool provided by Electron to package the application into an executable file. Here is electron-builderan example of packaging using the tool:

First, install electron-builder:

npm install electron-builder

Then, package.jsonadd the packaging configuration in the file:

"build": {
  "appId": "com.yourapp",
  "directories": {
    "output": "release"
  },
  "win": {
    "target": "nsis"
  },
  "mac": {
    "target": "dmg"
  },
  "linux": {
    "target": "AppImage"
  }
}

Finally, execute the following command to package:

npx electron-builder

After packaging is complete, you will releasefind an executable file in the directory that can run your application on the appropriate operating system.

In addition to Electron, NW.js, AppJS, Cordova, React Native, etc. can also implement packaging functions. The usage methods are basically similar. Which tool to use depends on the packaging requirements.