A practice of implementing desktop applications with ant pro and electron--->ant-design-pro@2.3.1

[heytheww]

Sorry, I am not very likely to use github. this is my blog https://www.cnblogs.com/ww01/p/10791844.html

This is a practical practice on how to make ant.design pro run on electron. I think it should have five steps.

Among them, the first 2 steps are changed in your ant.design pro project.

The first step

Please add the following to the plugin.config.js config.target('electron-renderer');

Please add the following to the config.js

publicPath: './',
history: 'hash',

The second step

Your electron application should be able to access the network, so please modify the utils/ request.js

export default function request(apiUrl, option) {

   let url = `${baseUrl}${apiUrl}`  // electron
   …
}

The third step

In your ant design pro project

npm run build

The fourth step

Get electron-quick-start at https://github.com/electron/electron-quick-start Please create an ant folder in electron-quick-start and put your packaged ant design pro project file(the third step) into this folder.

Modify the main.js file

 -   mainWindow.loadFile('index.html')
 +  const path = require('path')
 +  mainWindow.loadURL(path.join('file://', __dirname, 'ant/index.html'))

  webPreferences: {
        nodeIntegration: true,
        + webSecurity: false,
        + allowRunningInsecureContent: true
  }

I don't think webSecurity here can solve the real problem, but it will make your app unable to use the network, so I set it to false

The fifth step

Try it in electron-quick-start npm start

P.S. : If you want to know how to publish your app, please use electron-builder, I use it in my blog to package ant design pro as exe to publish the app.

[chenshuai2144]

you can add doc in site

https://github.com/ant-design/ant-design-pro-site

[heytheww]

Thank you. I'll try.