Building Cross Platform Apps with Electron
2 likes439 views
The document discusses creating cross-platform desktop applications using Electron, including installation and setup instructions. It outlines the structure of an Electron project with key files like index.html and main.js, and provides example code for initializing the application. Additionally, it touches on app packaging and integrating native features such as notifications and menus.
Building Cross Platform Apps with Electron
- 1. Create AmazingCross- Platform Desktop Node Apps with Electron ViennaJS, June @chrischinch
- 2. Use any of these?
- 3. What is it? • From GitHub* • JavaScript as a ‘desktop’ Application • Version 1.0 released in May *You might have heard of them
- 4. Install and Setup npm install electron-prebuilt -g brew install Caskroom/cask/electron
- 5. End result
- 6. For GUI fans
- 8. An Electron project index.html: The web page rendered by default. main.js: Starts app and creates a browser window to render HTML. package.json: Lists application dependencies, meta data and files needed.
- 9. main.js const electron = require('electron'); const app = electron.app; const BrowserWindow = electron.BrowserWindow; var mainWindow = null; app.on('window-all-closed', function() { if (process.platform != 'darwin') { app.quit(); } }); app.on('ready', function() { mainWindow = new BrowserWindow({width: 800, height: 600}); mainWindow.loadURL('file://' + __dirname + '/app/index.html'); mainWindow.on('closed', function() { mainWindow = null; }); });
- 10. The app
- 11. Packaging • Create asar archive • Copy files into Electron app • Rename, distribute, etc… • Use 3rd party tool 👍
- 12. Electron Packager electron-packager /Users/chrisward/Workspace/sp_electron MarvelBrowse --platform=darwin --arch=x64 --asar --prune —version=1.2.5 --out=/Users/chrisward/Workspace --overwrite --icon=/Users/chrisward/Workspace/sp_electron/marvel-app.icns
- 13. Going native • Notifications • Recent documents • Menus • Progress bars, thumbnails, represented file, dock, System preferences…
- 14. Thank You! Chris Ward gregariousmammal.com @chrischinch Developer Relations & Technical Writer I have stickers and merchandise!