preface

Electron is a technology (library) that allows front-end programmers to develop desktop applications, such as opening Windows, accessing system files, and so on. It also integrates well with the front-end framework.

Since this project was designed by myself, I used the course of Imook Zhang Xuan for reference and conducted in-depth research based on it. The code is not very concise, I hope you correct.

To complete the effect

Project structures,

React front end

  • Create a project with scaffolding:
npm install create-react-app # if you don't have
create-react-app cloud-md-manager
Copy the code
  • Install ANTD and configure import on demand
npm install antd 
npm install babel-plugin-import
Copy the code

Create a.babelrc file and configure import on demand in plugins

[
    "import",
    {
       "libraryName": "antd"."libraryDirectory": "es"."style": "css"}].Copy the code

Electron parts

  • Install the electron
NPM install electron # Do not recommend NPM and YARN for personal use. For domestic use, CNPM install electron-is-dev # Determine the development environment or production environmentCopy the code
  • Create main.js in the project root directory and write the main process code
const isDev = require('electron-is-dev');
const {BrowserWindow, app} = require('electron');
let mainWindiw;
app.on('ready', () = > {const mainWindowConfig = {
            width: 1366.height: 768.show: false.webPreferences: {
                nodeIntegration: true // Integrate the Node environment
            },
            backgroundColor: '#efefef'
            // frame: false Debug status on, formal environment closed (no border)
    };
    const urlLocation = isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, './dist/index.html')}`;
    
    mainWindow = new BrowserWindow(mainWindowConfig); / / create the window
    mainWindow.loadURL(urlLocation); // Load the front-end
    mainWindow.center(); // Center display
    
    // Garbage collection
    mainWindow.on('closed', e => {
        mainWindow = null;
    });
}
Copy the code
  • Modify the package. The json

    The installationconcurrently,wait-on,cross-envSimple operation
+ "main" : "the main js" # set main process entry "scripts" : {+ "dev" : "concurrently \"wait-on http://localhost:3000 && electron ./main.js\" \"cross-env NODE_ENV=development BROWSER=none npm start\"", }Copy the code

The project can then be developed using the command NPM run dev.

conclusion

This series is long and will be updated regularly. Since I am still in the liver, there will be a delay in updating, but it will be maintained at least one more day. The project code can be seen in cloud-doc-Editor. I also did other work in this project, such as editing markdown and uploading markDown to the cloud, so the project code is still being updated. A lot of support