Translation | "JavaScript Everywhere" Chapter 20 Electron Deployment

Translation | "JavaScript Everywhere" Chapter 20 Electron Deployment

Write at the top

Hello everyone, I am Mao Xiaoyou, a front-end development engineer. An English technical book is being translated.

In order to improve everyone's reading experience, the structure and content of sentences have been slightly adjusted. If you find any flaws in this article, or if you have any comments or suggestions, you can leave a message in the comment area, or add my WeChat: code_maomao, welcome to communicate and learn from each other.

(σﾟ∀ﾟ)σ…:*☆Oh, good

Chapter 20 Electron Deployment

When teaching a programming course for the first time, I thought of a clever idea, which is to introduce the subject of the course through a text adventure game. Students will enter the lab, sit at the table, and browse a series of interesting tips (for me) and instructions. This caused mixing, not because of a joke (well, maybe because of a joke), but because the students did not interact with the "program" in this way. These students are used to GUI(graphical user interface), and interacting with programs through text prompts is not suitable for many of them.

Currently running our application, we need to type a command in the terminal application to start the Electronprocess. In this chapter, we will study how to package applications for distribution. For this, we will use popular Electron Builderlibraries, which will help us package the application and distribute it to users.

Electron Builder

Electron BuilderIs a library used to simplify packaging and distribution Electron, ProtonNativeapplications.

Although there are other packaging solutions, Electron Buildermany of the challenges associated with application distribution can be simplified, including:

• Code signing

• Multi-platform deployment goals

• Auto update

• deploy

It strikes a good balance between flexibility and functionality. In addition, although we do not use them, but Webpack, React, Vueand Vanilla JavaScripthave some Electron Buildersupport cases.

Electron Builder与Electrom Forge

Electron ForgeIt is another popular library that provides many Electron Buildersimilar functions.

Electron ForgeThe main advantage is that it is based on the official Electronlibrary, and Electron Builderis independent build tool.

This means that users will benefit from the growth of the technology ecosystem and have more choices. The disadvantage is Electron Forgebased on stricter application settings. As far as this book is concerned, Electron Builderan appropriate balance can be found between functions and learning costs, but I hope you will also read it carefully Electron Forge.

ConfigurationElectron Builder

Electron BuilderAll configurations will be our application package.jsonfiles in.

In this document, we can see that electron-builderis listed as a dependency development. In the package.jsondocument, we can include a " build" key name key, which keywill contain Electron Builderall the instructions packaged applications. First, we will include two fields:

• appId

  This is the unique identifier of our application. macOSThink of this as CFBundleidentifier, Windowscall it AppUserModelID. The standard is to use the reverse DNSformat. For example, if we run a domain for the jseverywhere.iocompany and build a named Notedlyapplication, then IDit was io.jseverywhere.notedly.

• productName

  This is our easy-to-read product name, and the package.jsonname field needs to be hyphenated or a single word name.

In summary, the build configuration we started will look like this:

"build": {
    
    
  "appId": "io.jseverywhere.notedly",
  "productName": "Notedly"
}, 

Electron BuilderProvides us with many configuration options, and we will explore a few of them in this chapter.

For a complete list, please visit the Electron Builderdocumentation.

Built for our current platform

With minimal configuration, we can create our first application. By default, Electron Builderan application will be generated for the system we are developing. For example, since I MacBookwrote it on, my app will default to macOS.

First, we add two scripts to the package.jsonfile, these scripts will be responsible for the construction of the application. First, the packaging script will generate a packaging directory, rather than fully packaging the application. This is useful for testing. Secondly, the distscript will be distributed format packaged applications, for example macOS DMG, Windowsthe installation program or DEBpackage.

"scripts": {
    
    
  // add the pack and dist scripts to the existing npm scripts list
  "pack": "electron-builder --dir",
  "dist": "electron-builder"
} 

After making this change, you can run the Terminal application npm run dist, which will be packaged application in the project dist/directory. Switch to the dist /directory, you can see Electron Builderalready that the application package for your operating system distribution.

App icon

One thing you may have noticed is that our application is using the default Electronapplication icon. This is great for local development, but for production applications, we will want to use our own brand.

In the / resourcesfolder of our project , there are some application icons suitable for macOSand Windows. To PNGgenerate these icons from the file, I used

iConvert IconsApp can be used for macOSand Windows.

In our / resourcesfolder, you will see the following files:

• icon.icns, macOSApplication icon

• WindowsApplication iconicon.ico

• LinuxpngThe icon directory used contains a series of .files of different sizes

(Optional) We can also include the background image by adding icons named background.pngand background@ to the retina screen .2x.pngmacOS DMG

Now, in the package.jsondocument, we update the build object to specify the name of the build directory of resources:

 "build": {
    
    
  "appId": "io.jseverywhere.notedly",
  "productName": "Notedly",
  "directories": {
    
    
    "buildResources": "resources"
  }
},

Now, when we build the application, Electron Builderpackage it with our custom application icon (see picture 20-1).

Figure 20-1. macOS dockCustom application icons in

Multiple platform construction

Currently, we only build applications for operating systems that match our development platform.

ElectronOne of the biggest advantages of being a platform is that by updating the distscript, it allows us to use the same code to match multiple platforms. To this end, Electron Builderfree and open source code is used

electron-build-service. We will use a public instance of the service, but organizations can host it themselves for additional security and privacy.

In our package.json, the distscript updated to:

 "dist": "electron-builder -mwl" 

This will lead to the construction of basis macOS, Windowssum Linux.

From here, we can upload the application as a distribution GitHubor we can distribute the file to any location (for example Amazon S3or Webserver)

Code signing

macOSAnd Windowsinclude the concept of code signing. Code signing helps improve user security and trust, because it guarantees the trustworthiness of the application. I will not perform the code signing process step by step, because it is specific to the operating system and will bring a certain cost to the developer.

Electron BuilderThe documentation provides comprehensive articles on code signing for various platforms.

In addition, the Electrondocumentation provides some resources and links.

If you are building a production application, I suggest you further research macOSand Windowscode signing options.

in conclusion

We have covered the Electrontip of the iceberg for deploying applications. In this chapter, we use Electron Builderto build applications, and then we can easily Webupload and distribute them through any host. Once we meet these requirements, we can use to Electron Builderestablish a continuous build process: automatically push releases to GitHub, S3or other release platforms; and integrate automatic updates into the application.

If you are interested in further exploring the topic of electronic development and application distribution, you can take these interesting next steps.

If there is any inadequate understanding, please correct me. If you think it's okay, please like to collect or share it, hoping to help more people.