I am working on an electron test application for windows.
The goal is an auto launching application which displays a popup message everytime the windows user logs in.
Scenario:
I'm executing npm start to package my code. (index.js +
package.json)
I execute the generated .exe which will popup my message. (so far so good, right?)
I sign out from windows (CTRL + L ALT + DEL if this is important) and sign in again to test the application.
The popup opens but the default electron welcome page, too.
package.json
{
"name": "test",
"description": "",
"version": "0.0.1",
"main": "index.js",
"scripts": {
"test": "electron .",
"start": "electron-packager . Test --platform=win32 --arch=x64 --overwrite"
},
"author": "",
"license": "MIT",
"build": {
"appId": "com.test.test",
"win": {
"target": "NSIS"
}
},
"dependencies": {
"auto-launch": "^5.0.5"
},
"devDependencies": {
"electron": "latest",
"electron-packager": "^12.1.1"
}
}
index.js
const {app, dialog} = require("electron");
const AutoLaunch = require("auto-launch");
app.on("ready", function(){
dialog.showMessageBox({ message: "We are ready to take off! :-)", buttons: ["OK"] });
let autoLaunch = new AutoLaunch({
name: "test"
// path: app.getPath("exe")
}).isEnabled().then((isEnabled) => {
if (!isEnabled){
autoLaunch.enable();
dialog.showMessageBox({ message: "AutoLaunch enabled.", buttons: ["OK"] });
}
else dialog.showMessageBox({ message: "AutoLaunch already enabled.", buttons: ["OK"] });
});
app.quit();
});
Edit: Found a problem that prevents the package.json being updated. A simple npm info resulted in a completely unexpected output.
Wow, totally forgot about this question.
The solution was following:
Update all dependencies.
Make sure, that the path to the .html / .js file is absolute and correct.
An absolute path start with a /
For example /files/index.html
That's how it works!
Related
Good evening, i am learning about testing and have installed mocha. I have a basic test that just compares 2 numbers and i cant get it to run. could anyone explain to me why and how to fix this?
Json
{ "scripts": {
"test": "mocha test/**/*.js"
},
"name": "image-gallery",
"version": "1.0.0",
"description": "",
"main": "script-test.js",
"directories": {
"test": "script-test.js"
},
"author": "",
"license": "ISC"
}
Test.js
const assert = require('assert');
describe('number test', function() {
it('matching numbers', function() {
assert.ok(2 === 2);
});
});
Did you install mocha by running this in your project directory?
npm install --save-dev mocha
I've been trying fix for this a week now but can't really seem to find the problem.
I've followed this tutorial but instead of having that project structure I've my own (see image below)
In the esm.js:
require = require("esm")(module);
module.exports = require("./vickie.js");
Then i've changed vickie.js:
From const { app, BrowserWindow, ipcMain } = require('electron')
To import { app, BrowserWindow, ipcMain } from 'electron'
Then I got this error
In package.json:
{
"name": "vickie",
"type": "module",
"version": "0.0.1",
"description": "",
"main": "./vickie.js",
"scripts": {
"start": "electron ./vickie.js"
},
"author": "Arijanit",
"license": "ISC",
"devDependencies": {},
"dependencies": {
"dotenv": "^8.2.0",
"electron": "^8.2.3",
"electron-builder": "^22.5.1",
"esm": "^3.2.25",
"mysql2": "^1.7.0"
}
}
Why am I getting the error? Should I type in something extra in package.json to enable esm?
Thanks in advance
I created a build tool that lets you use ESM in your own Electron code and modules installed from npm:
https://github.com/mifi/build-electron
To use it:
yarn add -D build-electron concurrently wait-on
Put your Electron main ESM source code in src/main/index.js and preload source in src/preload/index.js.
Add to your package.json:
{
"main": "build/main.js",
"build": {
"files": [
"build/**/*"
]
},
"scripts": {
"start": "concurrently -k \"build-electron -d\" \"wait-on build/.build-electron-done && electron .\"",
"build": "build-electron"
}
Now create a configuration file in your project root build-electron.config.js:
module.exports = {
mainEntry: 'src/main/index.js',
preloadEntry: 'src/preload/index.js',
outDir: 'build',
mainTarget: 'electron16.0-main',
preloadTarget: 'electron16.0-preload',
}
Now you can start developing:
npm run start
And to build your production app:
npm run build && npm exec electron-builder --mac
I wanted to build trading apps using electron JS and using the TradingView library but I got stuck on how to implement it. I also created a new blank project to implement it, but still result.
Is there anyone has ever implement TradingView to electron and could give me solution to this?
Blank app result
Error in console
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://demo_chart.tradingview.com/charting_library/charting_library.min.js"></script>
<script type="text/javascript" src="https://demo_chart.tradingview.com/datafeeds/udf/dist/polyfills.js"></script>
<script type="text/javascript" src="https://demo_chart.tradingview.com/datafeeds/udf/dist/bundle.js"></script>
<script type="text/javascript">
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
TradingView.onready(function()
{
var widget = window.tvWidget = new TradingView.widget({
// debug: true, // uncomment this line to see Library errors and warnings in the console
fullscreen: true,
symbol: 'AAPL',
interval: 'D',
container_id: "tv_chart_container",
// BEWARE: no trailing slash is expected in feed URL
datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo_feed.tradingview.com"),
library_path: "charting_library/",
locale: getParameterByName('lang') || "en",
disabled_features: ["use_localstorage_for_settings"],
enabled_features: ["study_templates"],
charts_storage_url: 'http://saveload.tradingview.com',
charts_storage_api_version: "1.1",
client_id: 'tradingview.com',
user_id: 'public_user_id',
theme: getParameterByName('theme'),
});
});
</script>
</head>
<body style="margin:0px;">
<div id="tv_chart_container"></div>
</body>
</html>
Never used electron so using this opportunity to try it out myself. This is the steps I took.
Look at the documentation https://electronjs.org/docs/tutorial/first-app
1) created a folder called electron-test
2) run command npm init in that folder
3) modify package.json to be this
{
"name": "electron-test",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "",
"license": "ISC",
"dependencies": {}
}
4) create main.js
const { app, BrowserWindow } = require("electron");
function createWindow() {
// Create the browser window.
win = new BrowserWindow({ width: 800, height: 600 });
// and load the index.html of the app.
win.loadFile("index.html");
}
app.on("ready", createWindow);
5) create index.html
6) run command npm install electron
7) run command npm start
This is the result
Is there anyone has ever implement TradingView to electron and could give me solution to this?
Well I don't have solution to the error, but I have found my way out to build an tradingView+ElectronJs app.
In short, you can start with TradingView Charting Library Integration Examples, from which you can choose the kind of integration template to start with(I just use react-javascript to start my app).And I just take this template for example.
After follow How to start to configure the app properly. You should first install election to your app(which means run npm install --save electron in the directory root), then add the main.js to your directory root, and configure your package.json and main.js properly. Blow is my package.json and main.js code.
package.json
{
"name": "knownsec-fed",
"version": "0.1.0",
"private": true,
"main": "main.js", // 配置启动文件
"homepage":".", //
"dependencies": {
"electron": "^1.7.10",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"electron-start": "electron ." // start electron app
}
}
main.js
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
let mainWindow
function createWindow () {
mainWindow = new BrowserWindow({width: 800, height: 600})
/**
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
*/
mainWindow.loadURL('http://localhost:3000/');
// mainWindow.webContents.openDevTools()
mainWindow.on('closed', function () {
mainWindow = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
if (mainWindow === null) {
createWindow()
}
})
to start the electron app, first run npm start to start react then run npm run electron-start to start electron app and then all thing done.
When you open Object with widget, your widget trying to find static folder from wrong path. Just connect library in widget option like this:
my webpack doesn't generate file though no errors shown. PLS help :D
i'm new to all this so dont be harsh pls :D
code in webpack.config.js
module.exports = {
entry : ['./app/index.js'],
output : {
path : '/build',
filename: 'bundle.js'
}
}
using npm run build, no errors returned.
package.json
{
"name": "es6",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"webpack": "^3.10.0"
},
"description": ""
}
After making a fresh directory, copying in your code as is, I get the following:
Error: EACCES: permission denied, mkdir '/build'
at Error (native)
It's trying to access the root level /build directory (which doesn't exist, at least for me).
Tweaking the config a bit more leads to this:
const path = require('path')
module.exports = {
entry : ['./app/index.js'],
output : {
// Get the path including the current directory node is running in
path : path.resolve(__dirname, './build'),
filename: 'bundle.js'
}
}
Which spits out a successful bundle.
There were no errors? Any output at all?
I have seen other questions about this but it is not the same.
Windows 7 x64
Node 6.6.0
electron 1.4.1
npm 3.19.8
My problem is that if I run npm start which calls electron . defined in my package.json the app runs fine. However if I just try to run electron . then I get the above error "Cannot find module app"
I think it must be path related but I can't figure it out. npm start is running the same command, I am running both commands in the root folder where main.js is located. I have also tried explicitly calling electron main.js with the same error.
Another note: when I run a debug session using Phpstorm it runs successfully. The debug configuration, Node interpreter = electron.cmd and Javascript File = main.js
package.json as requested
{
"name": "demoelectronaureliamongodb",
"title": "Demo Electron ES6, Aurelia MongoDB",
"version": "1.0.0",
"description": "Thick client demo app showing Electron, ES6, Aurelia, and MongoDB working together.",
"main": "main.js",
"scripts": {
"start": "electron .",
"build-mac": "electron-packager . 'DemoElectronAureliaMongoDB' --platform=darwin --arch=x64 --version=0.35.1 --overwrite --out ./build/mac",
"build-win": "electron-packager . 'DemoElectronAureliaMongoDB' --platform=win32 --arch=ia32 --version=0.35.1 --overwrite --out ./build/win"
},
"author": "",
"homepage": "http://karlshifflett.wordpress.com",
"license": "MIT",
"keywords": [
"electron",
"aurelia",
"es6",
"mongodb"
],
"repository": {
"type": "git",
"url": "https://github.com/Oceanware/demoelectronaureliamongodb.git"
},
"devDependencies": {
"electron-packager": "^5.1.1",
"electron-prebuilt": "^0.35.1"
},
"jspm": {
"directories": {
"baseURL": "src"
},
"dependencies": {
"aurelia-bootstrapper": "npm:aurelia-bootstrapper#^1.0.0-beta.1",
"aurelia-framework": "npm:aurelia-framework#^1.0.0-beta.1.0.2",
"font-awesome": "npm:font-awesome#^4.4.0"
},
"devDependencies": {
"babel": "npm:babel-core#^5.8.24",
"babel-runtime": "npm:babel-runtime#^5.8.24",
"core-js": "npm:core-js#^1.1.4"
}
}
}
main.js
(function () {
/**
* Main Electron process
*/
'use strict';
const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow
// var app = require('app');
// var BrowserWindow = require('browser-window');
var applicationMenu = require('./browser/application-menu');
var mainWindow = null;
app.on('ready', function () {
global.aureliaRoot = __dirname + '/src/';
applicationMenu.setup();
mainWindow = new BrowserWindow({
width: 900,
height: 700,
"min-width": 400,
"min-height": 300,
center: true,
resizable: true
});
mainWindow.loadUrl('file://' + __dirname + '/src/index.html');
});
})();
I did the below change to fix the issue:
const {app,BrowserWindow} =require('electron')
app.on('ready',function(){
var mainWindow= new BrowserWindow({
height:600,
width:600
})
})