am working with angular version 6.1.0 and electron 2.0,on running the app in browser it but on running npm run electron-build was successful but the app could not launch. thus, no browser window is displayed.
Here is the package.json file:
{
"name": "front",
"version": "0.0.0",
"main": "main.js",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .",
"electron-build":"ng build --prod"
}
...
}
Here is the main.js file:
const {app, BrowserWindow} = require('electron');
let win;
function createWindow (){
win = new BrowserWindow({
height: 600,
width:600,
backgroundColor:'#ffffff'
})
win.loadURL(`file://${__dirname}/dist/index.html`)
win.on('closed',function(){
win=null;
})
}
app.on('ready',createWindow())
app.on('windows-all-closed',()=>{
if(process.platform!=='darwin'){
app.quit();
}
})
app.on('activate',function(){
if(win==null){
createWindow()
}
})
It's because you're calling the createWindow function when the app first loads since in the ready event it thinks it should call the createWindow function straight away since it has the two brackets at the end.
To fix it just take the brakets off so it becomes:
app.on('ready',createWindow)
Thanks to #KirkLarkin for spotting the bug.
Related
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 have created a bundle.js file with webpack from my create-react-app project as it sits with the below config:
const path = require("path")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const glob = require("glob")
module.exports = {
entry: {
"bundle.js": glob.sync("build/static/?(js|css)/*.?(js|css)").map(f => path.resolve(__dirname, f)),
},
output: {
filename: "release/bundle.min.js",
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
plugins: [new UglifyJsPlugin()],
}
And, this is my index.html
<html>
<body id="root">
<script src="path-to-bundle.min.js"></script>
</html>
But, I dont see anything mounted inside #root. Basically the script does not fire. I tried the var and EntryPoint webpack config as well. In that case, EntryPoint is always an empty object.
UPDATE:
Package.json
"start": "react-scripts start",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build": "npm run build:react && npm run build:bundle",
"build:react": "react-scripts build",
"build:bundle": "webpack --config webpack.config.js"
I just discovered electron and I found it interesting, so I want to implement it on my jhipster angular project (lastest jhipster version)
I tried following this tutorial and adapt it but I believe since Jhipster uses Webpack my build is not fine
here is what I have done
I declared a main.js file in src/main/webapp folder as below
const { app, BrowserWindow } = require("electron");
const path = require("path");
const url = require("url");
let win;
function createWindow() {
win = new BrowserWindow({ width: 800, height: 600 });
// load the dist folder from Angular
win.loadURL(
url.format({
pathname: path.join(__dirname, `/dist/index.html`),
protocol: "file:",
slashes: true
})
);
// The following is optional and will open the DevTools:
// win.webContents.openDevTools()
win.on("closed", () => {
win = null;
});
}
app.on("ready", createWindow);
// on macOS, closing the window doesn't quit the app
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
// initialize the app's main window
app.on("activate", () => {
if (win === null) {
createWindow();
}
});
Then I tried updating my config files as below
package.json
{
"name": "boxing",
"version": "0.0.1-SNAPSHOT",
"main": "main.js", <-- added this
"description": "Description for boxing",
"private": true,
"license": "UNLICENSED",
"cacheDirectories": [
"node_modules"
],
"dependencies": {
"#angular-devkit/build-angular": "^0.803.14", <-- installed using npm
...
"scripts": {
"electron": "ng build --base-href ./ && electron .",
angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"boxing": {
"root": "",
"sourceRoot": "src/main/webapp",
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"skipTests": true,
"style": "scss"
},
"#schematics/angular:directive": {
"skipTests": true
},
"#schematics/angular:guard": {
"skipTests": true
},
"#schematics/angular:pipe": {
"skipTests": true
},
"#schematics/angular:service": {
"skipTests": true
}
},
"prefix": "jhi",
"architect": {
<-- added this lines
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist"
}
}
<-- end of add
}
}
},
"defaultProject": "boxing",
"cli": {
"packageManager": "npm"
}
}
I updated finally my index.html href to ./
but when I run the command in terminal I m getting this error
npm run electron
boxing#0.0.1-SNAPSHOT electron /home/housseyn/Desktop/projects/salle-de-sport
ng build --base-href ./ && electron .
Schema validation failed with the following errors:
Data path "" should have required property 'main'.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! boxing#0.0.1-SNAPSHOT electron: ng build --base-href ./ && electron .
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the boxing#0.0.1-SNAPSHOT electron script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output >above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/housseyn/.npm/_logs/2019-10-25T16_00_19_675Z-debug.log
You have to build your project using this commande npm run electron-build after that you add it in a script to your package.json
check in this doc until the end
I hope that can help you,
Use this configuration :
{
"name": "angular-electron-demo",
"version": "0.0.0",
"main": "main.js",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"start:electron": "ng build --base-href ./ && electron ."
},
// [...]
}
After add this, you can use the start:electron script to execute the ng build --base-href ./ && electron . which first builds the project and then run electron from the current folder.
Go back to your terminal and run:
npm run start:electron
I am currently working on creating a CRUD app using Angular6 with MSSQL.
I have successfully retrieved data from my local database and created the desired routes but I am having trouble displaying the data in the frontend.
//masterList.service.ts
import {
Injectable
} from '#angular/core';
import {
HttpClient
} from '#angular/common/http';
import {
MasterList
} from './MasterList';
#Injectable({
providedIn: 'root'
})
export class MasterListService {
uri = 'http://localhost:4000/masterList';
constructor(private http: HttpClient) {}
getMasterList() {
console.log(this);
return this
.http
.get(`${this.uri}/`);
}
}
//package.json
"name": "ng6crud",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "nodemon server.js && ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
Running:
npm start
This returns the service with the data but the app is not compiled, and reversing the order does the opposite, with the error:
ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://localhost:4000/masterList/", ok: false, …}
How do I get data from my service: 4000 and have it published: 4200 at the same time?
If you have your server hosted on port 4000, you need to specify proxy for your angular app so it will redirect all api calls to port 4000, even if it's hosted on port 4200.
Add proxy.conf.json next to your package.json:
{
"/": {
"target": "http://localhost:4000",
"secure": false
}
}
in MasterListService do something like:
getMasterList() {
return this
.http
.get(`/masterList`);
}
and finally change your package.json npm start script:
...
"scripts": {
...
"start": "nodemon server.js && ng serve --proxy-config proxy.conf.json",
...
}
Hope that helps.
Ended up doing a number of steps to get this to work, most important being using concurrently which allowed both ports to run
npm install concurrently --save
//proxy.conf.json
{
"/masterList": {
"target": "http://localhost:4000",
"secure": true, //or false when cors is not in use with express
"logLevel": "debug"
}
}
//package.json
"scripts": {
"ng": "ng",
"start": "concurrently \"npm run serve-api\" \"npm run serve\"",
"serve": "ng serve --proxy-config proxy.conf.json",
"serve-api": "nodemon server.js --watch server",
"build": "ng build",
"test": "ng test"...
}
//service.ts
import {
Injectable
} from '#angular/core';
import {
HttpClient
} from '#angular/common/http';
import {
MasterList
} from './MasterList';
#Injectable({
providedIn: 'root'
})
export class MasterListService {
uri = '/masterList';
constructor(private http: HttpClient) {}
getMasterList() {
return this
.http
.get(`${this.uri}`);
}
}
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: