Build React+Webpack desktop application using Electron (detailed tutorial)

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 and take a look.

Preface

Electron can use HTML, CSS, and JavaScript to build cross-platform desktop applications, but when using React and Webpack, You will encounter some configuration problems. This article will provide a general solution for Electron configuration under React Webpack.

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

Because the default Webpack packaging is used, a very large file will be generated. Large bundle files affect performance on the desktop, but when debugging, bundles need to be generated quickly, but sourcemaps need to be used to locate bugs, so we use a function to switch between various environments:

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",

to switch environments better.

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', so that our App can only function under Electron during debugging.

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 and generate the bundle under dist/. 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 previously built 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. But in this way we need to adjust the project:

Modify the loadURL in the index.js file to:

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

Then run:

yarn run electron

Because we are detecting the files under webpack-dev-server at this time, the modifications we make in the project 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.

The project file address of this article: https://github.com/Voyager-One/react-webpack-electron

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed introduction to controlled components and uncontrolled components in React

How to implement a basic shopping cart using Angular Function

Detailed introduction to routing and middleware in node.js

The above is the detailed content of Build React+Webpack desktop application using Electron (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!