Skip to content

Commit

Permalink
added docs for Client / Electron integration (#46)
Browse files Browse the repository at this point in the history
* added docs

* Updated docs with my own feedback in #46
  • Loading branch information
pietrop authored and emettely committed Aug 30, 2019
1 parent a9de51a commit 15a9fe2
Showing 1 changed file with 65 additions and 0 deletions.
65 changes: 65 additions & 0 deletions docs/notes/20-08-2019-client-electron-integration.md
Original file line number Diff line number Diff line change
@@ -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.

0 comments on commit 15a9fe2

Please sign in to comment.