All geek questions in one place

Getting problems creating electronicjs autorun application

npm init npm install electron-prebuilt --save-dev Create index.js npm install electron-packager --save-dev npm run build OR electron-packager . --all

I used these steps to create an electronicjs application in the past and placed its executable in the start folder to start it at system startup. But, after updating the window, there are some problems that arise when I run the application in tabmode. So, I planned to create a new application, but these commands do not work perfectly. I have problems with this.

So, I want this to be exactly what I was trying to do: creating an auto-launch electron app . Can someone provide me with the correct steps as I get errors with the steps that I provided?

Thanks in advance.

+5
source share
1 answer

Steps to create an electronic application

Teams:

 npm install electron-prebuilt -g

An Electron project requires three files:

  • index.html: the webpage displayed by default.
  • main.js: Launches the application and creates a browser window for rendering HTML.
  • package.json: contains a list of application dependencies, metadata, and files.

package.json and add the following:

 { "name": "hero-browser", "version": "0.1.0", "main": "main.js", "dependencies": { "dotenv": "^2.0.0", "md5": "^2.1.0" } } 'use strict'; const electron = require('electron'); const app = electron.app; // Module to control application life. const BrowserWindow = electron.BrowserWindow; // Module to create native browser window. 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; }); });

application /index.html

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Marvel Super Hero Browser</title> <link href="css/index.css" rel="stylesheet" type="text/css"/> </head> <body> <h1>Marvel Super Hero Browser</h1> <em>Thanks to Marvel for their API.</em> <div id="character_list"></div> <script src="js/index.js"></script> </body> </html>

pp / css / index.css and add basic css to support layout.

 #character_list .character img { width: 100px; } .character { float: left; padding: 25px; max-width: 100px; }

app / js / index.js.

Here most of the application functions will be executed. Start by setting up the necessary dependencies and variables:

 'use strict'; require('dotenv').config(); var md5 = require('md5'); var publicKey = process.env.MARVEL_PUBLIC_KEY; var privateKey = process.env.MARVEL_PRIVATE_KEY; var ts = String(new Date().getTime()); var hash = md5(ts+privateKey+publicKey); var url = `https://gateway.marvel.com/v1/public/characters?ts=${ts}&apikey=${publicKey}&hash=${hash}&limit=25`;
+1
source

Source: https://habr.com/ru/post/1270921/

More articles:


All Articles