Tutorial on building React and Webpack desktop applications with Electron

Electron can use HTML, CSS, and JavaScript to build cross-platform desktop applications. However, when using React and Webpack, you will encounter some configuration problems. This article will provide a general solution for Electron configuration under React+Webpack. This article mainly introduces the method of using Electron to build React+Webpack desktop applications. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Environment configuration

##

  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",
  "babel-plugin-transform-class-properties": "^6.24.1",
  "babel-plugin-transform-object-rest-spread": "^6.26.0",
  "babel-preset-env": "^1.6.1",
  "babel-preset-react": "^6.24.1",
  "css-loader": "^0.28.7",
  "electron": "^1.7.9",
  "electron-packager": "^10.1.0",
  "extract-text-webpack-plugin": "^3.0.2",
  "node-sass": "^4.7.2",
  "react": "^16.2.0",
  "react-dom": "^16.2.0",
  "sass-loader": "^6.0.6",
  "style-loader": "^0.19.1",
  "webpack": "^3.10.0",
  "webpack-dev-server": "^2.9.7"

Configuration webpack.config.js

Due to use The default Webpack packaging will generate a large bundle file, which affects performance on the desktop. However, when debugging, the bundle needs to be generated quickly, but sourcemaps need to be used to locate bugs, so we use a function to switch between Environment:

module.exports = (env)=>{
 ******
 const isProduction = env==='production';
 ******
 devtool: isProduction ? 'source-map':'inline-source-map',

And we write the following command in the package.json file:

"build:dev": "webpack",
"build:prod":"webpack -p --env production",

Better switching environment.

The following are all webpack.config.js:

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = (env)=>{
 const isProduction = env==='production';
 const CSSExtract = new ExtractTextPlugin('styles.css');
 console.log('env='+env);
 return {
  entry:'./src/app.js',
  target: 'electron-renderer',
  output:{
   path:path.join(__dirname, 'public','dist'),
   filename:'bundle.js'
  },
  module:{
   rules:[{
    loader: 'babel-loader',
    test: /\.js(x)?$/,
    exclude: /node_modules/
   }, {
    test: /\.s?css$/,
    use:CSSExtract.extract({
     use:[
      {
       loader:'css-loader',
       options:{
        sourceMap:true
       }
      },
      {
       loader:'sass-loader',
       options:{
        sourceMap:true
       }
      }
     ]
    })
   }]
  },
  plugins:[
   CSSExtract
  ],
  devtool: isProduction ? 'source-map':'inline-source-map',
  devServer:{
   contentBase: path.join(__dirname, 'public'),
   historyApiFallback:true,
   publicPath:'/dist/'
  }
 };
}

Note: target: 'electron-renderer', let our App be debugged It can only be used under Electron.

React

This time I wrote a simple App to display time. The React module is as follows:

import React from 'react';
class Time extends React.Component{
 state = {
  time:''
 }
 getTime(){
  let date = new Date();
  let Year = date.getFullYear();
  let Month = date.getMonth();
  let Day = date.getDate();
  let Hour = date.getHours();
  let Minute = date.getMinutes();
  let Seconds = date.getSeconds();
  let time = Year+'年'+Month+'月'+Day+'日'+Hour+':'+Minute+':'+Seconds;
  return time;
 }
 componentDidMount(){
  setInterval(()=>{
   this.setState(()=>{
    return {
     time:this.getTime()
    }
   });
  },1000);
 }
 render(){
  let timetext = this.state.time;
  return (
   <p>
    <h1 id="timetext">{timetext}</h1>
   </p>
  );
 }
}
export default Time;

Electron

This App does not involve complex Electron API, it is just a container for display:

const electron = require('electron');
const {app,BrowserWindow} = electron;
let mainWindow = electron;
app.on('ready',()=>{
 mainWindow = new BrowserWindow({});
 mainWindow.loadURL(`file://${__dirname}/public/index.html`);
});

index. html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>React-Webpack-Electron</title>
 <link rel="stylesheet" type="text/css" href="./dist/styles.css" rel="external nofollow" >
</head>
<body>
 <p id="app"></p>
 <script src="./dist/bundle.js"></script>
</body>
</html>

We load the js and css packaged by webpack into html.

Debugging

##yarn run build:prod

First we use webpack to package the file under dist/ Generate bundle.js and style.css

yarn run electron

Start debugging:

Build App

We add the following command to the package.json file:

"packager": "electron-packager . - -platform=darwin --electron-version=1.7.9 --overwrite"

means to build the Mac desktop application and overwrite the files we built before using this command.

Wait for a while and you will see the built folder in the directory, which is our desktop application.

When we open the application, we will find that the navigation bar menu during debugging has disappeared, and there is only one exit option. This is because we have not set up the application Menu bar items, Electron will discard various menus for debugging when building the App.

Improvement

Everyone should notice that according to the previous method, we have to reuse webpack packaging every time we modify it during debugging. Of course, we can also use webpack- dev-server to monitor changes. It’s just that we need to adjust the project:

Modify the loadURL in the index.js file to:

mainWindow.loadURL(`http://localhost:8080/index.html`);

and then run ：

yarn run electron

Because at this time we are detecting the files under webpack-dev-server, and we are in the project at this time The modifications you make can be seen in electron in real time.

If debugging and testing are completed, you only need to modify the loadURL to:

mainWindow.loadURL(`file://${__dirname}/public/index.html`);

to proceed with the next build operation.

Note that before building the final application, you should pay attention to whether the web file at this time is running under webpack-dev-server. If so, you should use webpack to generate static packaging files.

Related recommendations:

Detailed introduction to JavaScript development of cross-platform desktop applications (pictures and texts)

Diagrams of XML-based desktop applications Detailed introduction to the text code

Write desktop application with electron_html/css_WEB-ITnose

The above is the detailed content of Tutorial on building React and Webpack desktop applications with Electron. For more information, please follow other related articles on the PHP Chinese website!