Cross-platform desktop apps with JavaScript, HTML, and CSS
https://medium.com/@shivekkhurana/a-gluten-free-electron-react-setup-ft-live-reload-f6e5bbbd964
- React, PostCSS and Webpack: https://github.com/alexdevero/electron-react-webpack-boilerplate
- Redux + TypeScript: https://github.com/electron-react-boilerplate/electron-react-boilerplate
- Preact: https://github.com/BashCloud/preact-electron
create-react-app
yarn create react-app my-app # or npx create-react-app my-app, or npm init create-react-app my-app
yarn add electron — dev
"electron-start": "electron ."
- Dev tools:
yarn add electron-builder wait-on concurrently --dev"electron-dev": "concurrently 'BROWSER=none yarn start' 'wait-on http://localhost:3000 && electron .'"
mainWindow.webContents.openDevTools() // see main.js, could be included
NOTE: console.log in Main process is output in terminal, not browser console.
Main:
const { app } = require('electron')
Renderer:
const { app } = require('electron').remote
// Renderer
const { ipcRenderer } = require('electron')
ipcRenderer.send('myEvent', {})
// Main
const { ipcMain } = require('electron')
ipcMain.on('myEvent', (event, args) => {
event.reply('myEvent-reply', 'pong')
})
Remove:
ipcRenderer.removeListener('myEvent', myListenerFunction)
Synchronous (sendSync, returnValue):
ipcRenderer.sendSync('myEvent', 'ping')
ipcMain.on('myEvent', (event, arg) => {
event.returnValue = 'pong'
})
https://www.electronjs.org/docs/api/remote
http://photonkit.com/components/
const { dialog } = require('electron').remote
const fs = require('fs')
dialog.showOpenDialog((fileNames) => {
// fileNames is an array that contains all the selected
if (fileNames === undefined) {
console.log('No file selected')
return
}
const fileName1 = fileNames[0]
fs.readFile(fileName1, 'utf-8', (err, data) => {
if (err) {
window.alert('An error ocurred reading the file :' + err.message)
return
}
// Change how to handle the file content
console.log('The file content is : ' + data)
setText(data)
})
})
dialog.showSaveDialog((fileName) => {})
Useful in saving files to the the right place regardless of the OS:
app.getPath(name)
app.setPath(name, path)
app.getAppPath()
https://www.electronjs.org/docs/tutorial/keyboard-shortcuts
const { Menu, MenuItem } = require('electron')
const menu = new Menu()
menu.append(new MenuItem({
label: 'Print',
accelerator: 'CmdOrCtrl+P',
click: () => { console.log('time to print stuff') }
}))