Electron front end measurement tool



At present, the company’s test environment is built and deployed by development. This approach is extremely unscientific. So the repetitive operation of deployment and so on is to make a tool for the test to deploy by itself.
Let’s preview the tool -. -:

Electron front end measurement tool


I wanted to make an online version of the tool. But communicate with the company’s operation and maintenance department. The test server is not connected to the Internet. Let them have the permission to connect to the Internet BB continuously. Is this what I should do? I can only say that I am a front-end developer. Is it my job to develop a server with requirements?
OK, no complaints, I can play everything on the front end, but I just don’t have a net.
No net, I’ll make an offline version of the tool. It’s not good to be a desktop app.

Excavation record

Although I haven’t struggled with desktop applications before, don’t ask me to roll up my sleeves.

Research and selection technology

At present, I have learned that there are three kinds of magic tools for desktop applications using front-end technology: electron, nw.js and hex. Which one should I choose? I don’t worry. I see
Electron comes from GitHub. Naturally, it’s the first thing to consider.

Install electron

As a lazy person, the first thing I think about is the scaffold:

# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start

Then we can see an application like this:

Electron front end measurement tool

Then we see a directory structure like this:

Electron front end measurement tool

Look, we are familiar with index.html, main.js and render.js. It’s easy to understand that main.js is used to create our application window. Index.html is used to show the main content of the application.
Since it’s HTML and JS, roll up your sleeves.


Pay attention to the comments of render.js:

Electron front end measurement tool
You don’t need much advanced English, do you? It is said that this file is referenced by index.html. This file can also write nodejs code. So that’s easy.
Before that, a pit had been dug:

The automatic publishing preview environment of front-end projects based on Vue cli https://segmentfault.com/a/11

Since you can write nodejs, just use the nodejs related code you have done before.

Electron front end measurement tool

It is still using the SSH2 module, linking the server, then invoking the shell script written before, and the incoming parameters are slightly modified.
Well, it’s useless. Let’s preview our Gadgets:

Electron front end measurement tool
By default, dist.zip is the latest package to be tested. If there is a problem with the package deployment in the test environment, which affects the test, you can click Modify, enter the package name of a fallback version provided by our development, and then click publish test environment to wait for the build to complete.

Hey, is the front end invincible. The development is not finished yet. It should be used for testing. Should it be packaged into an EXE.

Electronic packager packaging application


npm install electron-packager -g


electron-packager . fe-tool --out ../electron

The first parameter is the path of the resource to be packaged. The point I use here represents the resource under the current path. The second parameter is the name of the file to be packed, and the last parameter is the folder in which the output will be made after packing.


As a pauper, I also struggled under windows. When can I buy a Mac and put it on again.

Updated on: November 27, 2018 10:25:24 MAC started. It’s very easy to use.