Electronic write a simple host switch tool


As a developer, you need to do it frequentlyhostSwitch, fast development and testing in different environments. There is an IHost inside Ali. It’s easy to use. Unfortunately, it’s not open. After leaving, we can’t find a better onehostSwitch tools, simply write one yourself. The project has been open source

Code address, make complaints about Tucao.

Technology used

Because it is a desktop application, as a front-end development, the first choice at present is electron, and the front-end framework chooses the react technology stack.

The project is generated based on electron-react0-boilerplate. The technologies used include:

  1. react 16.x
  2. redux 4.x
  3. redux-thunk 2.x
  4. react-router 4.x
  5. ant-design 3.x
  6. reselect 3.x
  7. redux-actions 3.x
  8. webpack 4.x
  9. node-sass 4.x

Main logic and demonstration

In fact, the difficulty of the whole application is not big. It is mainly to generate some items based on the activation status of the itemshostThe basic operation of reading and writing files is as follows:

Electronic write a simple host switch tool

functional design

  1. Three tab pages

    • Host setting page: add, delete, modify and check the host entry
    • Current effective host: view the current effective host of the system
    • Original host: after starting the application, a copy of the original host manuscript will be backed up for restoration
  2. Host settings

    • Can create a host entry, write the corresponding host
    • You can add, delete, and modify the host
    • At the same time, a host group can be created for unified management
    • Click the check box on the left. Editing the active host setting will change the system host in real time. However, a delay of 2 seconds is set during editing to avoid frequent reading and writing files in the continuous input process

The whole application function is so simple, a key point is the issue of permissions, to operate the host file needs to be changed/private/etc/hostSum of documents/private/etcPermissions for the directory. So when the application starts, a pop-up window will pop up to enter the computer user password for authorization.

Record the use of several major technologies

Redux actions and bindactioncreators

The Redux based projects are often criticized for their tedious actions, reducers and too much template code. Redux actions is a good tool to solve this problem. Please learn the specific usage by yourself. But it’s worth noting that Redux’sbindActionCreatorsActioncreator with nested objects is not supported, such as

const actionsCreators = {
    add: function() {
    change: {
        changeTitle: function() {
        changeDate: function() {

const { add, change } = bindActionCreators(actionsCreator, dispatch)

Here, the action creators in change will not bind successfully becauseredux-actionsThe generated actioncreators can be nested, so the originalbindActionCreators andredux-actionsIt’s not very comfortable to cooperate. The bindactioncreators have been rewritten a little in the project to support nesting.


For some computationally based data, it is not a good solution to store both the original data and the calculated data in the store. Each update should be double updated, which is easy to miss,reduxdiffermobx, mobxexistencecomputedDecorators are used to solve computational property problems. At this time, reselect comes into use. It not only solves the problem of computational data, but also has a greater value in reducing repeated calculation. Each time rerender calculates a large amount of data without repeated calculation with the input parameters unchanged. But the problem is that there will be one more layerselectorsLayer, may also make some people crazy, Gaga~~

State persistent storage

In order to keep the previous state when opening the app, the entire store layer needs to be stored. Therefore, a simple Redux middleware is written with the help of electronic JSON storage

import storage from 'electron-json-storage';

//A persistent storage middleware that synchronizes the store to a file and stores it based on electronic JSON storage

const storageState = store => dispatch => action => {

  const nextState = store.getState();
  const { menuTree, checkedKeys } = nextState.host.menus;
  const { systemHost } = nextState.host.systemHost;
  const defaultDataPath =     storage.getDefaultDataPath();
  const dataPath = storage.getDataPath();
  console.log('paths:', defaultDataPath, dataPath);
  storage.set ('hoststate Xu ', nextstate); // creates a hoststate- xu.json As far as possible to ensure the uniqueness of the file, does not conflict with other applications
export default storageState;

every timeactionChanges are kept in syncstate

Pits brought by electron react boiler plate

Flow and eslint

Flow and some eslint rules will bring a lot of trouble and extra work in the early stage, so you can modify some rules at your own discretion, but for theFlowandeslintI still suggest to use it more often, which will reduce a lot of small problems later.

But in the projecteslint-importPlug ins are combiningwebpackset upaliasAlso, for test cases,webpackOfaliasThe configuration will not take effect.

Several key processing points:

  1. . eslintrc needs to be changed to eslintrc.js
  2. . eslintrc.js Quoted inpathneedrequireYou can’timport
  3. Change to eslintrc.js It will appear in vscodeEslint serverThe problem of hanging up is mainly due to the projectwebpack.config.render.dev.jsThe environment variables are detected by ourselvesCheckNodeEnv('development'), comment out this line of code.

Electronic react boiler plate is constantly updated. The latest version of eslint configuration may be inconsistent with that of me at that time, and some processing experience may be out of date. Some reference issues are listed as follows: ා 620, ා 1321, ා 1509

Reference to pictures

There is always a problem with the path of quoting images after packaging. It is recommended that you use the path in the render processrequireIntroduce the picture and go through itloadergeneratebase64The picture, directly throughpath.joinand__dirnameThe build path is OK in the development environment, but an error will be reported after packaging.

However, there are also problems in using pictures in the main process. The appeal scheme does not come into effect. At present, no solution has been found and the relevant issue has been raised

seeminglyelectronThere are some problems in the development and generation environment of the static resource path. Further research is needed here. Students with understanding can instruct them.

Shell’s Exec

I wanted to use shelljs to do some command processing, but I found that it hadelectronElectronic compatibility

Because the demand is not complex, it can be used directlychild_process.execProcessing.

A weird packing problem

Due to the problem of picture introduction, I will often pack and verify, and come back to find a problem. If there is a problem with the last packaging, I will package it again after modification. If the program still fails to start, it needs to be disconnected to start it. The reason is not known.

Stage summary

It’s interesting to write a complete electronic project for the first time to solve the actual needs. The follow-up projects also need to do some tests, continuous integration and automatic update. At present, the experience is still insufficient. Dear friends of the community, please give more advice and learn together!

Recommended Today

What black technology does the real-time big data platform use behind the glory of the king?

Hello everyone, I’m Xu Zhenwen. Today’s topic is “Tencent game big data service application practice based on Flink + servicemesh”, which is mainly divided into the following four parts: Introduction to background and Solution Framework Real time big data computing onedata Data interface service onefun Microservice & servicemesh 1、 Introduction to the solution framework and […]