preface

The online Markdown cloud document built by Electron+React+ seven ox cloud is adopted.

git clone [email protected]:FrontDream/cloud-doc.git

cd cloud-doc

NPM install (remember in the case of scientific Internet can be installed, domestic even use Taobao image, although it can run, packaging will fail)

NPM run dev

NPM Run Dist

NPM Run Release

Pay attention to

  • After running, you need to open the Settings center in the menu bar and configureaccess_key.secret_key.bucketIn order to synchronize to your own seven ox clouds
  • When you need torelease“, you need to confirmpackage.jsonIn thepublishPlatform and in their ownpackage.jsonTo set the publishing platformGH_TOKEN

Here is the setup from 0 to 1, of course, leaving out the middle business

Build the electron+React development environment

  • React scaffolding code:npx create-react-app my-app
  • Install the electron:cnpm install electron --save-dev
  • Create one in the project root directorymain.jsAnd, inpackage.jsonAdd “main” entry to:
    "main": "main.js".Copy the code
  • Install widgets to determine if they are locally developed:cnpm install electron-is-dev
const { app ,BrowserWindow } = require('electron')
const isDev = require('electron-is-dev')

let mainWindow;

app.on('ready'.() = >{
    mainWindow = new BrowserWindow({
        width: 1024.height: 680.webPreferences: {
            nodeIntegration: true}})const urlLocation = isDev?'http://localhost:3000': 'ddd'
    mainWindow.loadURL(urlLocation)
})
Copy the code
  • Install packages that run two commands at the same time:npm install concurrently --save
  • Modify thepackage.jsonIs as follows, but because this is run simultaneously, normally the first command is run, and then the second command is run
"scripts": {
    "start": "react-scripts start"."build": "react-scripts build"."test": "react-scripts test"."eject": "react-scripts eject"."ele": "electron ."."dev": "concurrently \"npm start\" \"npm run ele\""
  }
Copy the code
  • So you need to install another gadget:cnpm install wait-on --save-dev. And modify thepackage.jsonAs follows:
"scripts": {
    "start": "react-scripts start"."build": "react-scripts build"."test": "react-scripts test"."eject": "react-scripts eject"."ele": "electron ."."dev": "concurrently \"npm start\" \"wait-on http://localhost:3000 && electron .\""
  },
Copy the code
  • In order not to open the BROWSER, you can set BROWSER to None, but there is a cross-platform problem, so you can also install a cross-platform tool for setting environment variables:cnpm install cross-env --save-devAnd modifypackage.jsonChange it to the following:
 "scripts": {
    "start": "react-scripts start"."build": "react-scripts build"."test": "react-scripts test"."eject": "react-scripts eject"."ele": "electron ."."dev": "concurrently \"cross-env BROWSER=none npm start\" \"wait-on http://localhost:3000 && electron .\""
  },
Copy the code

The packaging process

  • The installationelectron-builder: npm install electron-builder –save-dev
  • Project root directory to runnpm run build
  • Change the local address for electron running in a non-development environment:const urlLocation = isDev? 'http://localhost:3000':file://${path.join(__dirname, ‘./build/index.html’)}
  • inpackage.jsonTo add the basic configuration,package.jsonAdd the following code to the first layer:
"author": {
    "name": "qiandingwei"."email": "[email protected]"
},
"build": {
    "appId": "cloudDoc"."productName": "7 Niu Yun Document"."copyright": "Copyright © 2020 ${an}"
  },
Copy the code
  • inscriptAdd:
"pack": "electron-builder --dir"."prepack": "npm run build"."dist": "electron-builder"
Copy the code
  • runnpm run pack
  • An error
  • An error
  • An error
  • An error

Configuration installation Package

  • Configure a static image of the packaging process in the build of package.json to tell the location of the static files required for installing the package in electron builder:
"directories": {
      "buildResources": "assets"
    },
Copy the code
  • Add win, MAC, and Linux configurations to the package.json build
"mac": {
      "category": "public.app-category.productivity"."artifactName": "${productName}-${version}-${arch}.${ext}"
    },
    "dmg": {
      "background": "assets/appdmg.png"."icon": "assets/icon.icns"."iconSize": 100."contents": [{"x": 380."y": 280."type": "link"."path": "/Applications"
        },
        {
          "x": 110."y": 280."type": "file"}]."window": {
        "width": 500."height": 500}},"win": {
      "target": [
        "msi"."nsis"]."icon": "assets/icon.ico"."artifactName": "${productName}-Web-Setup-${version}.${ext}"."publisherName": "Viking Zhang"
    },
    "nsis": {
      "allowToChangeInstallationDirectory": true."oneClick": false."perMachine": false
    }
Copy the code

Compression-optimized volume

  • There is one in the installation packageapp.asarIs the main culprit of oversize, which, when unpacked, turns out to bepackage.jsonIn thebuildUnder thefilesFile contents in.
  • Optimize the View layer (React). The installation package has been installednpm run buildReact-related code, that is, the view layer code, has been packaged tobuildSo you really only need to put the packages that are used in main.jsdependenciesMedium will do. The rest of the package, move todevDependenciesIn the. becauseelectron-builderDon’t takedevDependenciesPackage into the application
  • To optimize theelectronLayer. Create a new onewebpack.config.jswillmain.jsTo package, and configure, willmain.jsPackaged intobuildfolder

How to release

  • inpackage.jsonIn the configurationreleaseThe platform forgithubIn which thebuildHow to configure code in
    "publish": ["github"]
Copy the code
  • inGitHubIs required for the projectaccess_keyAnd replace the following codeyou_access_keyCorresponding position of
  • inpackage.jsonIn the configurationreleaseCommand and set the environment variables as follows:
"release": "cross-env GH_TOKEN=you_access_key electron-builder"."prerelease": "npm run build && npm run buildMain"
Copy the code
  • npm run releaseCan.

Automatic version update

  • The installationnpm install electron-updater --save-devAnd in themain.jsThe introduction of:
const { autoUpdater} = require('electron-updater')

autoUpdater.autoDownload = false
    autoUpdater.checkForUpdatesAndNotify()
    autoUpdater.on('error'.(error) = >{
        dialog.showErrorBox('Error',error===null?"un-known":error)
    })
    autoUpdater.on('update-available'.() = >{
        dialog.showMessageBox({
            type: 'info'.title: 'There's a new version of the app'.message: 'New application found. Do you want to update it now? '.buttons: ['is'.'no'],},(buttonIndex) = >{
            if(buttonIndex===0){
                autoUpdater.downloadUpdate()
            }
        })
    })
    autoUpdater.on('update-not-available'.() = >{
        dialog.showMessageBox({
            type: 'info'.title: 'No new version'.message: 'Current is the latest version',})})Copy the code

Need tutorial and mutual exchange of private chat ❤️ love triple punch

1. Please click “Watching” to support me when you see here. Your “watching” is the motivation for my creation.

2. Pay attention to the public number front-end dreamers, “learn front-end together”!

3. Add wechat [QDW1370336125] to pull you into the technical exchange group to learn together.