|
| 1 | +# client electron integration |
| 2 | + |
| 3 | +## Updating Electron app with newer NPM release of client |
| 4 | + |
| 5 | +1. Publish a newer version of the React client to NPM by running `npm run publish:public` |
| 6 | + (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)) |
| 7 | +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`) |
| 8 | +3. Bump Electron NPM app version (refer to step 1) |
| 9 | +4. Push to master (Travis CI will automatically make a new release in [github releases](https://github.com/bbc/digital-paper-edit-electron/releases/)) |
| 10 | + |
| 11 | + |
| 12 | +## How does it work? |
| 13 | +### `package.json` |
| 14 | +The command `npm run publish:public` publishes to npm, see `package.json`: |
| 15 | + |
| 16 | +```js |
| 17 | +"publish:public": "npm run publish:prep && npm publish build --access public", |
| 18 | +``` |
| 19 | + |
| 20 | +This runs the `publish:prep` step as well, which builds, copies and remove necessary files: |
| 21 | + |
| 22 | +```js |
| 23 | +"publish:prep": "npm run build && cp package.json ./build/package.json && cp README.md ./build/README.md && rimraf ./build/db", |
| 24 | +``` |
| 25 | + |
| 26 | +### `index.html` |
| 27 | + |
| 28 | +The client uses [`create-react-app`](https://create-react-app.dev/). |
| 29 | +In the `/public/index.html` folder, there is the `index` file for the react app, which contains logic that makes the `ElectronWrapper` available. |
| 30 | + |
| 31 | +```js |
| 32 | +... |
| 33 | + if(window.process && window.process.versions.electron){ |
| 34 | + const { app } = require('electron').remote; |
| 35 | + const path = require('path'); |
| 36 | + const appPath = app.getAppPath(); |
| 37 | + // changing path to simplify being able to load electron wrapper from this index.html file, |
| 38 | + // which will be deep in node_modules |
| 39 | + window.process.chdir(appPath) |
| 40 | + const ElectronWrapper = require(path.join(appPath,'src','ElectronWrapper','index.js')); |
| 41 | + window.ElectronWrapper = ElectronWrapper; |
| 42 | + } |
| 43 | + ... |
| 44 | +``` |
| 45 | + |
| 46 | +This line changes directory to simplify loading of the electron wrapper from this file, as the wrapper will be deep in node_modules. |
| 47 | + |
| 48 | +```js |
| 49 | +window.process.chdir(appPath) |
| 50 | +``` |
| 51 | + |
| 52 | +This line `window.ElectronWrapper = ElectronWrapper;` makes `ElectronWrapper` available in the `ApiWrapper` to replace the default `ApiWrapper` in `/src/ApiWrapper/index.js` React client app. |
| 53 | +The `APIWrapper` module uses [dynamic export](https://medium.com/@WebReflection/javascript-dynamic-import-export-b0e8775a59d4) |
| 54 | + |
| 55 | + |
| 56 | +```js |
| 57 | +const ElectronWrapper = require(path.join(appPath,'src','ElectronWrapper','index.js')); |
| 58 | +``` |
| 59 | +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). |
| 60 | + |
| 61 | + |
| 62 | + |
| 63 | + |
| 64 | +There is scope to simplify the accessing of dependencies, but is currently at a lower priority. |
| 65 | + |
0 commit comments