Developing apps with React & Electron

Code walkthrough of FocusedTask https://github.com/RStankov/FocusedTask as a showcase for React & Electron application.

Transcript

1. Developing desktop apps with React & Electron Radoslav Stankov 28/08/2020
2. Radoslav Stankov @rstankov blog.rstankov.com
 twitter.com/rstankov
 github.com/rstankov
 speakerdeck.com/rstankov
5. https://speakerdeck.com/rstankov
6. https://github.com/RStankov/FocusedTask
14. (main) (render)
15. (main)
16. (main) (render) rpc
17. (main) (render) rpc
18. const electron = window.require('electron') function closeApp() { electron.remote.getCurrentWindow().close(); } (render)
19. const electron = window.require('electron') electron.ipcRenderer.send('event', arg1, arg2); (render)
20. const electron = require('electron'); electron.ipcMain.on('event', function(_e, arg1, arg) { // ... }); (main)
25. Focused Task https://github.com/RStankov/FocusedTask
28. ! Tech Stack
29. ! Tech Stack
32. 3 package.json! "
34. shell/package.json app/package.json ./package.json distribution (shell) (app)
35. https://github.com/maxogden/menubar
36. const { menubar } = require('menubar'); const electron = require('electron'); const mb = menubar({ index: process.env.ELECTRON_START_URL || url.format({ pathname: path.join(__dirname, './build/index.html'), protocol: 'file:', slashes: true, }), icon: path.join(__dirname, 'assets/MenuBarIconTemplate.png'), browserWindow: { width: 500, height: 600, minWidth: 300, maxHeight: 900, minHeight: 600, webPreferences: { nodeIntegration: true, scrollBounce: true, }, }, }); mb.on('after-create-window', () => { // ... });
37. const { menubar } = require('menubar'); const electron = require('electron'); const mb = menubar({ index: process.env.ELECTRON_START_URL || url.format({ pathname: path.join(__dirname, './build/index.html'), protocol: 'file:', slashes: true, }), icon: path.join(__dirname, 'assets/MenuBarIconTemplate.png'), browserWindow: { width: 500, height: 600, minWidth: 300, maxHeight: 900, minHeight: 600, webPreferences: { nodeIntegration: true, scrollBounce: true, }, }, }); mb.on('after-create-window', () => { // ... });
38. create-react-app
39. Development ./bin/react-start ELECTRON_START_URL=http://localhost:3000 ./bin/electron-start
40. Distribution ./bin/react-build ./bin/electron-package FocusedTask.app
42. Access Electron via React
43. Access Electron via React
44. Access Electron via React
45. Access Electron via React
46. Open external links
47. Open external links mb.app.on('web-contents-created', (e, contents) => { const openExternal = (e, url) => { e.preventDefault(); electron.shell.openExternal(url); }; contents.on('new-window', openExternal); contents.on('will-navigate', (e, url) => { if (url !== contents.getURL()) { openExternal(e, url); } }); });
48. Open external links export function openURI(uri: string) { if (!isElectron) { return; } if (!isURI(uri)) { return; } if (isFilePathUri(uri)) { electron.remote.shell.openItem(uri); } else { electron.remote.shell.openExternal(uri); } }
49. Open external links import * as React from 'react'; import { openURI } from 'utils/electron'; interface IProps { children: React.ReactNode; href: string; className?: string; } export default function ExternalLink(props: IProps) { return ( <a target="_blank" rel="noopener noreferrer" onClick={e => { e.preventDefault(); openURI(props.href); }} {...props} /> ); }
50. Resize window to fit content
51. Resize window to fit content export function resizeBasedOnContent() { if (!isElectron) { return; } const bodyStyle = window.getComputedStyle(document.body) as any; const padding = parseInt(bodyStyle['margin-top'], 10) + parseInt(bodyStyle['margin-bottom'], 10) + parseInt(bodyStyle['padding-top'], 10) + parseInt(bodyStyle['padding-bottom'], 10); const observer = new ResizeObserver(() => { const height = Math.min(900, document.body.offsetHeight + padding); const bounds = electron.remote .getCurrentWindow() .webContents.getOwnerBrowserWindow() .getBounds(); if (bounds.height === height) { return; } electron.ipcRenderer.send('resize', bounds.width, height); }); observer.observe(document.body); }
52. Resize window to fit content electron.ipcMain.on('resize', function(_e, width, height) { mb.window.setSize(width, height); });
53. Store window position
54. Store window position const settings = require('electron-settings'); const electron = require('electron'); const _ = require('lodash'); const BOUNDS_KEY = 'windowBounds'; module.exports = { setWindowBounds(menubar) { menubar.setOption('browserWindow', { ...menubar.getOption('browserWindow'), ...(settings.get(BOUNDS_KEY) || {}), }); }, trackWindowBounds(menubar) { const win = menubar.window; const handler = _.debounce(() => { menubar.setOption('browserWindow', { ...menubar.getOption('browserWindow'), ...win.getBounds(), }); settings.set(BOUNDS_KEY, win.getBounds()); }, 500); win.on('resize', handler); win.on('move', handler); }, };
55. Store window position mb.on('after-create-window', () => { settings.trackWindowBounds(mb); }); mb.app.on('ready', () => { settings.setWindowBounds(mb); });
56. Global shortcut
59. Global shortcut export function getGlobalShortcutKey() { if (!isElectron) { return; } return electron.remote.getGlobal('globalShortcutKey'); } export function updateGlobalShortcutKey(key: string) { if (!isElectron) { return; } if (key.length !== 1) { return; } electron.ipcRenderer.send('updateGlobalShortcutKey', key); }
60. Global shortcut mb.app.on('ready', () => { settings.setGlobalShortcut(mb); }); mb.app.on('will-quit', () => { electron.globalShortcut.unregisterAll(); }); electron.ipcMain.on('updateGlobalShortcutKey', (_e, key) => { settings.updateGlobalShortcutKey(mb, key); });
61. Global shortcut const settings = require('electron-settings'); const electron = require('electron'); const _ = require('lodash'); module.exports = { setGlobalShortcut(menubar) { const key = settings.get(SHORTCUT_KEY) || "'"; global.globalShortcutKey = key; electron.globalShortcut.register(`CommandOrControl+${key}`, () => { if (menubar.window && menubar.window.isVisible()) { menubar.hideWindow(); } else { menubar.showWindow(); } }); }, updateGlobalShortcutKey(menubar, key) { settings.set(SHORTCUT_KEY, key); electron.globalShortcut.unregisterAll(); this.setGlobalShortcut(menubar); }, };
62. Changelog
65. Changelog import React from 'react'; import Stack from 'components/Stack'; import BackButton from 'components/BackButton'; import Title from 'components/Title'; import ReactMarkdown from 'react-markdown'; import styles from './styles.module.css'; import raw from 'raw.macro'; const markdown = raw('../../../../CHANGELOG.md').replace(/^# .*\n\n/, ''); export default function Shortcuts() { return ( <> <BackButton /> <Stack.Column> <Title emoji="#" title="Changelog" /> <div className={styles.markdown}> <ReactMarkdown source={markdown} escapeHtml={true} /> </div> </Stack.Column> </> ); }
66. Distribution
67. const packager = require('electron-packager'); const setLanguages = require('electron-packager-languages'); const createDMG = require('electron-installer-dmg'); const version = '0.1.0'; const distPath = './dist'; const name = 'FocusedTask'; packager({ dir: './shell', overwrite: true, out: distPath, afterCopy: [setLanguages(['en', 'en_GB'])], name, productName: 'Focused Task', appBundleId: 'com.rstankov.focused-task', appCopyright: 'Copyright (C) 2020 Radoslav Stankov', appVersion: version, appCategoryType: 'public.app-category.productivity', // osxSign: { // identity: '[?]', // 'hardened-runtime': true, // entitlements: 'entitlements.plist', // 'entitlements-inherit': 'entitlements.plist', // 'signature-flags': 'library', // }, // osxNotarize: { // appleId: '[?]', // appleIdPassword: '[?]', // }, }).then(() => {
70. ...payment was rejected [N] times $
71. ...turns out you need a credit card %
72. &
73. const packager = require('electron-packager'); const setLanguages = require('electron-packager-languages'); const createZip = require('electron-installer-zip'); const version = require('../shell/package.json').version; const credentials = require('../credentials.json'); packager({ dir: './shell', overwrite: true, out: './dist', afterCopy: [setLanguages(['en', 'en_GB'])], productName: 'FocusedTask', productName: 'Focused Task', appBundleId: 'com.rstankov.focused-task', appCopyright: 'Copyright (C) 2020 Radoslav Stankov', appVersion: version, appCategoryType: 'public.app-category.productivity', icon: './assets/Icon.icns', osxSign: { identity: credentials.identity, 'hardened-runtime': true, entitlements: 'entitlements.plist', 'entitlements-inherit': 'entitlements.plist', 'signature-flags': 'library', }, osxNotarize: credentials.osxNotarize, });
74. Auto update
76. const autoUpdate = require('./utils/autoupdate'); // ... mb.app.on('ready', () => { // ... if (!isDev) { autoUpdate(); } });
77. https://github.com/RStankov/FocusedTask/blob/master/shell/utils/autoupdate.js
79. Thanks ' https://speakerdeck.com/rstankov https://github.com/RStankov/FocusedTask (