How to use electron on Jhipster Angular generated application? - javascript

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

Related

Why npm start not working after npm init?

I have initiated a new project with NPM :
npm init
I have installed the socket.io-client package.
package.json:
{ "name": "client", "version": "1.0.0", "description": "", "main": "script.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "socket.io-client": "^4.5.4" } }
script.js:
import { io } from "socket.io-client";
const socket = io('http://localhost:3000')
socket.on('connect', () => {
console.log('Hello - ' + socket.id)
})
The error I get:
npm ERR! Missing script: "start"
I have added the start command to package.json:
"start": "node script.js"
Now I get:
SyntaxError: Cannot use import statement outside a module
I have tried adding start command, and did not worked.
You can try one of these:
Add type="module" to whereever you import your script.
Add "type": "module" to your package.json file.
See more here: "Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6

babel-node --presets node '.' is not recognized as an internal or external command,

this is the dependencies in package.json
{
"name": "whatsapp",
"version": "1.0.0",
"description": "whatsapp-clone-in-mern-stack",
"main": "server.js",
"scripts": {
"start": "./node_modules/babel-cli/bin/babel-node.js --presets node8 ./server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "someone",
"license": "ISC",
"dependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.26.0",
"babel-preset-node8": "^1.2.0",
"body-parser": "^1.19.0",
"compression": "^1.7.4",
"cors": "^2.8.5",
"express": "^4.17.1",
"moment": "^2.29.1",
"mongoose": "^6.0.14"
}
}
code in server.js file
import App from "express";
import connectDB from "./dbConnection";
const app = new App();
const PORT = 3001;
const startServer = () => {
Promise.all([connectDB()]).then(() => {
app.listen(PORT);
console.log(`Server started on port ${PORT}`);
});
};
startServer();
code in index.js file
import mongoose from "mongoose";
const DB_CONNECTION_URL = "mongodb://localhost:27017/test";
const connectDB = () => {
console.log("DB trying to connect on " + new Date());
const options = {
keepAlive: 1,
autoReconnect: true,
poolSize: 10,
useNewUrlParser: true,
useUnifiedTopology: true,
};
return mongoose.connect(DB_CONNECTION_URL, options);
};
export default connectDB;
error in console
whatsapp#1.0.0 start C:\Users\krish\onedrive\desktop\whatsapp_clone-mern_Stack\whatsapp-clone\server
> ./node_modules/babel-cli/bin/babel-node.js --presets node8 ./server.js
'.' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! whatsapp#1.0.0 start: `./node_modules/babel-cli/bin/babel-node.js --presets node8 ./server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the whatsapp#1.0.0 start 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! C:\Users\krish\AppData\Roaming\npm-cache\_logs\2021-11-30T
09_26_47_364Z-debug.log
Learning from YouTube tutorials, I tried to make a whatsapp clone. I wanted to use babel cli and babel node to start the server in order to connect the database, so I wrote this code { "./node_modules/babel-cli/bin/babel-node.js --presets node8 ./server.js" } in the scripts, but it displays the above error. Please help me.
The error you are encountering is due to using *nix path syntax in Windows. Try writing the path with windows backslashes or try
babel-node --presets node8 .\server.js
write this
"scripts": {
"start": "node ./node_modules/babel-cli/bin/babel-node.js --presets node8 ./server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
instead of this
"scripts": {
"start": "./node_modules/babel-cli/bin/babel-node.js --presets node8 ./server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},

PM2 with ES module. Error: ERR_REQUIRE_ESM

My package.json file looks something like this:
{
...
"main": "index.js",
"type": "module",
"scripts": {
"devStart": "pm2 start ecosystem.config.js --env dev --watch",
"prodStart": "pm2 start ecosystem.config.js --env prod --watch",
"reload": "pm2 reload ecosystem.config.js",
"stop": "pm2 stop ecosystem.config.js",
"end": "pm2 delete ecosystem.config.js"
},
...
}
I did activate ES modules by "type": "module", as you see.
And the ecosystem.config.js file you know, is:
module.exports = {
apps : [{
name : "app1",
script : "./app.js",
env_production: {
NODE_ENV: "production"
},
env_development: {
NODE_ENV: "development"
}
}]
}
So, when I run the script npm run devStart an error occurs.
File ecosystem.config.js malformated
code: 'ERR_REQUIRE_ESM'
It works when I just remove the "type": "module" part from config file.
How can I solve this?
node -v : v16.13.0
pm2 -v : 5.1.2
Rename ecosystem.config.js to ecosystem.config.cjs

How can I make the ESM work with electron in my project?

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

Electron app not launching

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.

Categories

Resources