Skip to content

Latest commit

 

History

History
65 lines (45 loc) · 2.97 KB

20-08-2019-client-electron-integration.md

File metadata and controls

65 lines (45 loc) · 2.97 KB
Raw

client electron integration

Updating Electron app with newer NPM release of client

  1. Publish a newer version of the React client to NPM by running npm run publish:public (you can use npm version - short doc here)
  2. In the digital-paper-edit-electron repo, update the DPE React Client (eg npm install @bbc/digital-paper-edit-clint@latest)
  3. Bump Electron NPM app version (refer to step 1)
  4. Push to master (Travis CI will automatically make a new release in github releases)

How does it work?

package.json

The command npm run publish:public publishes to npm, see package.json:

"publish:public": "npm run publish:prep && npm publish build --access public",

This runs the publish:prep step as well, which builds, copies and remove necessary files:

"publish:prep": "npm run build && cp package.json ./build/package.json && cp README.md ./build/README.md && rimraf ./build/db",

index.html

The client uses create-react-app. In the /public/index.html folder, there is the index file for the react app, which contains logic that makes the ElectronWrapper available.

...
      if(window.process && window.process.versions.electron){
        const { app } = require('electron').remote;
        const path = require('path');
        const appPath = app.getAppPath();
        // changing path to simplify being able to load electron wrapper from this index.html file, 
        // which will be deep in node_modules
        window.process.chdir(appPath)
        const ElectronWrapper = require(path.join(appPath,'src','ElectronWrapper','index.js'));
        window.ElectronWrapper = ElectronWrapper;
      }
  ...

This line changes directory to simplify loading of the electron wrapper from this file, as the wrapper will be deep in node_modules.

window.process.chdir(appPath)

This line window.ElectronWrapper = ElectronWrapper; makes ElectronWrapper available in the ApiWrapper to replace the default ApiWrapper in /src/ApiWrapper/index.js React client app. The APIWrapper module uses dynamic export

const ElectronWrapper = require(path.join(appPath,'src','ElectronWrapper','index.js'));

The actual ElectronWrapper module, /src/ElectronWrapper/index.js is in the digital-paper-edit-electron repository, bbc/digital-paper-edit-electron/src/ElectronWrapper.

There is scope to simplify the accessing of dependencies, but is currently at a lower priority.