diff --git a/docs/notes/20-08-2019-client-electron-integration.md b/docs/notes/20-08-2019-client-electron-integration.md new file mode 100644 index 00000000..7b1c9a4e --- /dev/null +++ b/docs/notes/20-08-2019-client-electron-integration.md @@ -0,0 +1,65 @@ +# 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`](https://docs.npmjs.com/cli/version) - [short doc here](https://github.com/bbc/react-transcript-editor/blob/master/docs/notes/2019-07-31-npm-tags.md)) +2. In the [`digital-paper-edit-electron`](https://github.com/bbc/digital-paper-edit-electron/blob/master/package.json) 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](https://github.com/bbc/digital-paper-edit-electron/releases/)) + + +## How does it work? +### `package.json` +The command `npm run publish:public` publishes to npm, see `package.json`: + +```js +"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: + +```js +"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`](https://create-react-app.dev/). +In the `/public/index.html` folder, there is the `index` file for the react app, which contains logic that makes the `ElectronWrapper` available. + +```js +... + 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. + +```js +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](https://medium.com/@WebReflection/javascript-dynamic-import-export-b0e8775a59d4) + + +```js +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`](https://github.com/bbc/digital-paper-edit-electron/tree/master/src/ElectronWrapper) repository, [`bbc/digital-paper-edit-electron/src/ElectronWrapper`](https://github.com/bbc/digital-paper-edit-electron/tree/master/src/ElectronWrapper). + + + + +There is scope to simplify the accessing of dependencies, but is currently at a lower priority. +