This module is responsible for UI rendering and communication with the main process, supporting any frontend technology.

The example code uses Vue 3 + Vite 6. Of course, you can choose your preferred technology stack.

Code Directory

./frontend

Features

• You can use any frontend technology
• The frontend module in the project is just a demo, you can freely modify or delete it
• React, Vite, Vue 2, Vue 3, Angular, HTML, and more

Communication

Only one file is needed: ipcRenderer.js

Your frontend project needs to import this file to communicate with the electron business layer

# File location
./electron-egg/frontend/src/utils/ipcRenderer.js

Development Environment

You can start both frontend & main process together, or start them separately. Quick Start

Configure ./cmd/bin.js

  dev: {
    // frontend: Frontend service
    // Description: This configuration means entering the frontend directory and executing npm run dev
    // The running service is http://localhost:8080 
    // If the protocol property is 'file://', no command will be executed, and the project directly loads the file specified by indexPath.
    frontend: {
      directory: './frontend', // frontend directory
      cmd: 'npm',              // command
      args: ['run', 'dev'],    // arguments, modify according to your frontend project
      protocol: 'http://',     // protocol: 'http://' 'file://'
      hostname: 'localhost',   // hostname
      port: 8080,              // port
      indexPath: 'index.html'  // Effective when 'file://' protocol is used, entry file
      force: false,            // Force load frontend service
    }
  },

TIP

Note 1: If the started frontend service is not: http://localhost:8080/, please configure the frontend object in the cmd/bin.js file first

Note 2: If the app shows a white screen after packaging, check the base path, check if resources have been moved, and check if the router uses hash mode.

Build Frontend Resources

In production, the /public/dist resources are loaded, so you need to copy ./frontend/dist there.

The frontend directory code will not be bundled, preventing source code leakage.

It is recommended to use the combined command

Configure package.json

"scripts": {
  // Build and move
  "build-frontend": "ee-bin build --cmds=frontend && ee-bin move --flag=frontend_dist",
}

Note: If you directly enter the frontend directory and run npm run build (without going through ee-bin), the process object will not contain renderer process information.

Production Environment

In production, the main process uses the mainServer configuration.

  /**
   * Main process
   */     
  mainServer = {
    // protocol: file://
    protocol: 'file://',
    // Frontend resource entry file
    indexPath: '/public/dist/index.html',
    // Compatible with electron parameters
    // https://www.electronjs.org/docs/latest/api/browser-window#winloadurlurl-options
    options: {} 
  };

file Protocol Mode

The file:// mode does not create a server service, offering slightly better performance, but you need to configure the project deployment base path.

Because the resource access after building is related to the base path configuration of frameworks like Vue, React, etc. Without a server service, frameworks may not be able to find resources properly.

For example, the paths of CSS, JS, IMG and other resources loaded by the main process might look like this:

// Without path configuration
file:///D:/css/app.8ada1737.css
file:///D:/js/app.73f33250.js

// After path configuration
file:///D:/www/xing/ee/public/dist/css/app.8ada1737.css
file:///D:/www/xing/ee/public/dist/js/app.94339363.js

For file:// protocol mode, make the following modifications:

• Vue

Edit the vue.config.js file

module.exports = {
  publicPath: './', // Relative path, works for both file mode and web mode
}

• Vite

Edit the vite.config.js file

export default defineConfig(() => {
  base: './',
}

• React - Webpack

Edit the webpack.config.js file

module.exports = {
  output: {
    publicPath: "./",
  }
}

• Other frontend technologies follow a similar pattern.

Change the project deployment base path to a relative path, or to a path that can be accessed (you can use Developer Tools to check if the resource paths are correct)