Created
April 6, 2019 18:42
-
-
Save oropesa/58ff22013b7122360ca6a3d805fdc1ba to your computer and use it in GitHub Desktop.
Initial steps of an electron project
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "En lo que respecta al desarrollo, una aplicación Electron es esencialmente una aplicación Nodejs." | |
| # In project folder | |
| > npm install electron -save-dev | |
| > npm install electron -g | |
| > npm install uikit | |
| > npm install lodash | |
| > npm install electron-builder --save-dev | |
| > mkdir build | |
| # https://cloudconvert.com/png-to-icns | |
| # background.png & icon.png are equals | |
| build/ | |
| |- background.png (256x256) | |
| |- icon.png (256x256) | |
| |- icon.ico (256x256) | |
| \- icon.icns | |
| > npm init | |
| # package.json is created with the project custom data, review, at least, this data: | |
| { | |
| "name": "custom-app", | |
| "version": "0.1.0", | |
| "description": "Just do it.", | |
| "author": "Oropensando <[email protected]>", | |
| "license": "ISC", | |
| "main": "main.js", | |
| "dependencies": { | |
| "lodash": "^4.17.11", | |
| "uikit": "^3.0.3" | |
| }, | |
| "devDependencies": { | |
| "electron-builder": "^20.39.0" | |
| }, | |
| "scripts": { | |
| "test": "echo \"Error: no test specified\" && exit 1", | |
| "start": "electron .", | |
| "pack": "build --dir", | |
| "dist": "build" | |
| }, | |
| "build": { | |
| "appId": "custom-app.oropensando", | |
| "productName": "My Custom App", | |
| "asar": true, | |
| "dmg": { | |
| "contents": [ | |
| { | |
| "x": 110, | |
| "y": 150 | |
| }, | |
| { | |
| "x": 240, | |
| "y": 150, | |
| "type": "link", | |
| "path": "/Applications" | |
| } | |
| ] | |
| }, | |
| "linux": { | |
| "target": [ | |
| "AppImage", | |
| "deb" | |
| ] | |
| }, | |
| "win": { | |
| "target": "NSIS", | |
| "icon": "build/icon.ico" | |
| } | |
| } | |
| } | |
| # Add Window.js | |
| # Add main.js | |
| # Add index.html | |
| # Add index-front.js | |
| # Add functions.js | |
| ... | |
| # Meanwhile developing | |
| > npm start | |
| # To create the installer | |
| > npm run dist |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // CUSTOM FUNCTIONS | |
| const _ = require( 'lodash' ); | |
| /** | |
| * let theObj = array2obj( { array: [ "one", "two", "three" ] } ); | |
| * // theObj = { 1: "one", 2: "two", 3:"three" } | |
| * | |
| * let theObj = array2obj( { array: [ { id: "one", text: "foo" }, { id: "two", text: "bar" } ] }, 'id' ); | |
| * // theObj = { one: { id: "one", text: "foo" }, two: { id: "two", text: "bar" } } | |
| * | |
| * @param {object} args | |
| * @param {array} args.array | |
| * @param {string} [args.key] | |
| * @return {object} obj | |
| */ | |
| let array2obj = function( args ) { | |
| if( ! args.array || ! args.array.length ) { return {}; } | |
| let obj = {}; | |
| args.array.forEach( ( value, key ) => { | |
| let theKey = args.key && value[ args.key ] !== undefined ? value[ args.key ] : key; | |
| obj[ theKey ] = value; | |
| }); | |
| return obj; | |
| }; | |
| exports.array2obj = array2obj; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // All of the Node.js APIs are available here. | |
| const { ipcRenderer } = require( 'electron' ); | |
| const fns = require( './functions' ); | |
| let objMain = { foo: 'bar' }; | |
| document.getElementById( 'the-button' ) | |
| .addEventListener('click', () => { | |
| ipcRenderer.send( 'oro-custom-event', objMain ); | |
| }); | |
| ipcRenderer | |
| .on( 'oro-custom-event-done', ( event, objFile ) => { | |
| console.log( objFile ); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Oro - Youtube mp3</title> | |
| <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'"> | |
| <link rel="stylesheet" href="./node_modules/uikit/dist/css/uikit.min.css" /> | |
| </head> | |
| <body> | |
| <div class="uk-margin-top uk-margin-bottom"> | |
| <div class="uk-container uk-text-small"> | |
| <p>Hello World!</p> | |
| <button id="the-button" class="uk-button uk-button-small uk-button-primary">Accion</button> | |
| </div> | |
| </div> | |
| <script type="text/javascript" src="./node_modules/uikit/dist/js/uikit.min.js"></script> | |
| <script type="text/javascript" src="./node_modules/uikit/dist/js/uikit-icons.min.js"></script> | |
| <script>require('./index-front.js');</script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const { app, ipcMain } = require( 'electron' ); | |
| const Window = require( './Window' ); | |
| let mainWindow; | |
| function createWindow () { | |
| mainWindow = new Window( { file: 'index.html' } ); | |
| mainWindow.on('closed', () => { mainWindow = null } ); | |
| } | |
| app.on( 'ready', createWindow ); | |
| app.on( 'activate', () => { if( mainWindow === null ) { createWindow() } } ); | |
| app.on( 'window-all-closed', () => { if( process.platform !== 'darwin' ) { app.quit(); } } ); | |
| // SERVER FN | |
| ipcMain.on( 'oro-custom-event', ( event, objFile ) => { | |
| event.sender.send( 'oro-custom-event-done', objFile ); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const { BrowserWindow } = require( 'electron' ); | |
| const defaultProps = { | |
| width: 1024, | |
| height: 640, | |
| webPreferences: { nodeIntegration: true }, | |
| show: false | |
| }; | |
| class Window extends BrowserWindow { | |
| constructor( { file, ...windowSettings } ) { | |
| super( { ...defaultProps, ...windowSettings } ); | |
| this.loadFile( file ); | |
| this.once( 'ready-to-show', () => { this.show() } ); | |
| } | |
| } | |
| module.exports = Window; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment