Develop Reference

cant load react in electronjs

Here is my package.js file
{
"name": "cabed",
"version": "0.1.0",
"private": false,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"electron-forge": "^5.2.4",
"electron-is-dev": "^2.0.0",
"electron-packager": "^17.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"main": "public/electron.js",
"homepage": "./",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"dev": "concurrently -k \"cross-env BROWSER=none npm start\" \"npm:electron\"",
"electron": "wait-on tcp:3000 && electron .",
"eb": "electron-packager C:/Users/user/cabed cddf --platform=win32 --arch=x64"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"concurrently": "^7.6.0",
"cross-env": "^7.0.3",
"electron": "^22.1.0",
"wait-on": "^7.0.1"
},
"config": {
"forge": {
"packagerConfig": {},
"makers": [
{
"name": "#electron-forge/maker-squirrel",
"config": {
"name": "stock_trading_app"
}
},
{
"name": "#electron-forge/maker-zip",
"platforms": [
"darwin",
"linux",
"win32"
]
},
{
"name": "#electron-forge/maker-deb",
"config": {}
},
{
"name": "#electron-forge/maker-rpm",
"config": {}
}
]
}
}
}
The generated exe with electron builder which i ran with
npm run eb
the exe generated by code above
does not render the react app inside the opened windows app.
Here is my app js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div style={{justifyContent:'center',alignContent:'center',alignItems:'center'}}>
<div className="App">
<img src={logo} className="App-logo" alt="logo" />
<p>
Sasdsad
</p>
<p>
Sasdsad
</p>
</div></div>
);
}
export default App;
my electron.js looks like this under public directory.
const path = require('path');
const { app, BrowserWindow } = require('electron');
const isDev = require('electron-is-dev');
function createWindow() {
// Create the browser window.
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
// and load the index.html of the app.
// win.loadFile("index.html");
win.loadURL(
isDev
? 'http://localhost:3000'
: `file://${path.join(__dirname, "./index.html")}`
);
// Open the DevTools.
if (isDev) {
win.webContents.openDevTools({ mode: 'detach' });
}
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow);
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
When running npm start first, then the exe renders react page inside window.
I need some configuration probably but i could not found it yet.

Since you said it works when you start your server first, I assume you're using the localhost URL both in dev and in prod. When your app is packaged, you should load the file in your window and not the local URL:
const { app } = require("electron");
const windowURL = app.isPackaged
? `file://${path.join(__dirname, "./index.html")}`
: "http://localhost:3000/";
mainWindow.loadURL(windowURL);
The path when your app is packaged might be different depending on your file structure and your build/package configurations. Also, don't forget to add "homepage": "./" on your package.json or you may get a blank page.

How to release the electron app with only modified modules/files?

I am using electron builder to package the app and releasing on github private repository and also implemented electron-updater to update the app automatically in background, everything is working fine.
but the problem is each time i am releasing the app on github using below script
"scripts": {
"deploy": "electron-builder --config=electron-builder.yml build --win --x64 --ia32 --publish always"
},
Electron-builder config file
directories:
output: dist
buildResources: build
nsis:
allowToChangeInstallationDirectory: true
oneClick: false
perMachine: false
deleteAppDataOnUninstall: true
license: ./license.txt
win:
target:
- target: nsis
icon: ./icons/logo.png
mac:
icon: ./icons/icon.icns
target:
- target: dmg
- target: zip
hardenedRuntime: true
gatekeeperAssess: false
entitlements: build/macos/entitlements.mac.plist
entitlementsInherit: build/macos/entitlements.mac.plist
dmg:
sign: false
linux:
target:
- target: deb
- target: tar.gz
- target: snap
asar: true
buildDependenciesFromSource: true
compression: store
publish:
provider: github
token: xxxxxxxxxxxxxxxxxxxxxxxxxxx
releaseType: release
Pakcage.json
{
"name": "testapp",
"productName": "testapp",
"version": "0.0.1",
"description": "My Electron application description",
"main": "src/main.js",
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make",
"publish": "electron-forge publish",
"lint": "echo \"No linting configured\"",
"clean": "npm cache clean --force",
"build": "electron-builder --config=electron-builder.yml build --win --x64 --ia32 --publish never",
"deploy": "electron-builder --config=electron-builder.yml build --win --x64 --ia32 --publish always",
"postinstall": "electron-builder install-app-deps"
},
"repository": {
"type": "git",
"url": "repourl"
},
"keywords": [],
"author": {
"name": "name",
"email": "emailid"
},
"license": "MIT",
"build": {
"appId": "appid",
"category": "Business",
"publish": [
{
"provider": "github",
"private": true,
"owner": "user",
"repo": "reponmae"
}
]
},
"config": {
"forge": {
"packagerConfig": {},
"makers": [
{
"name": "#electron-forge/maker-squirrel",
"config": {
"name": "DesktopDMS"
}
},
{
"name": "#electron-forge/maker-zip",
"platforms": [
"darwin"
]
},
{
"name": "#electron-forge/maker-deb",
"config": {}
},
{
"name": "#electron-forge/maker-rpm",
"config": {}
}
]
}
},
"dependencies": {
"#progress/kendo-ui": "^2020.2.617", //i know kendo and synfusion UI packages increasing app size
"#syncfusion/ej2": "^18.1.59",
"axios": "^0.19.2",
"electron-json-storage": "^4.2.0",
"electron-updater": "^4.3.5",
"jquery": "^3.5.1",
"jsrender": "^1.0.6",
"material-datetime-picker": "^2.4.0",
"materialize-css": "^1.0.0-rc.2"
},
"devDependencies": {
"#electron-forge/cli": "^6.0.0-beta.52",
"#electron-forge/maker-deb": "^6.0.0-beta.51",
"#electron-forge/maker-rpm": "^6.0.0-beta.51",
"#electron-forge/maker-squirrel": "^6.0.0-beta.51",
"#electron-forge/maker-zip": "^6.0.0-beta.51",
"electron": "9.0.4",
"electron-builder": "^22.8.0",
}
}
electron builder always creating new package/installer/app with same size[in between 250-300MB] and electron updater is downloading the updated version of app.
So how can i reduce the size of progressive releases[or release only modified module/files] because its very frustrating to download complete app each time.
I have tried compression[not getting much difference] and removed some unused packages as well.
As i know VS Code/ Zoom/ Slack are managing this scenario but i don't know how.
I need some help/direction to achieve it. Thanks in advance.

Mate that's not possible at the moment. I request you to follow the common approach of bundling new application and make release.

Electron app becomes blank whenever I reload

I'm making an electron app however it my page turns blanks whenever I reload it - with Ctrl + R. The developer tools becomes blank as well and it shows the following error -
Devtools was disconnected from the page
Once page is reloaded DevTools will automatically reconnect
This is my package.json
{
"name": "pla",
"version": "1.0.0",
"description": "T",
"main": "main.js",
"scripts": {
"start": "electron .",
"rebuild": "electron-rebuild -f -w sqlite3"
},
"author": "R",
"license": "MIT",
"dependencies": {
"custom-electron-titlebar": "^3.2.4",
"electron": "^10.1.3",
"jquery": "^3.5.1",
"knex": "^0.21.6",
"sqlite3": "^5.0.0"
},
"devDependencies": {
"electron-rebuild": "^2.2.0"
}
}
Initialise devtools
// Add developer tools item if not in production
if (process.env.NODE_ENV != "production") {
mainMenuTemplate.push({
label: "Developer Tools",
submenu: [
{
label: "Toggle Devtools",
accelerator: process.platform == "darwin" ? "command+I" : "Ctrl+I",
click(item, focusedWindow) {
focusedWindow.toggleDevTools();
},
},
{
role: "reload",
},
],
});
}

When I wants to run my code in local server i always get this kinds of error "SyntaxError: Cannot use import statement outside a module"

I've got a web development project based on e-commerce but when I try to run my project on the local server I always getting this type of error. Don't find any solution yet.
For better understanding, I added my server.js and package.json file in the post
Here it is sever.js
import express from 'express';
import data from './data';
const app = express();
app.get("/api/products", (req, res) => {
res.send(data.products);
});
app.listen (5000, () => {console.log("Server started at http://localhost:5000")})
In package.json
{
"name": "web-development",
"version": "1.0.0",
"description": "nothing",
"main": "nothing",
"scripts": {
"start": "nodemon --watch backend --exec babel-node backend/server.js"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"license": "ISC",
"bugs": {
"url": ""
},
"homepage": "",
"dependencies": {
"express": "^4.17.1"
},
"devDependencies": {
"#babel/cli": "^7.10.5",
"#babel/core": "^7.11.1",
"#babel/node": "^7.10.5",
"#babel/preset-env": "^7.11.0",
"nodemon": "^2.0.4"
}
}
Update:
As far console, I added "type": "module", package.json now I get another error
Cannot GET /
Showing in my browser

Node.js does not support ES6 modules import/export syntax out of the box. Although you can enable it via --experimental-modules flag.
The project already uses Babel which transpile ES6 syntax to ES2015, but you need to add a few more scripts to package.json
start: Starts watching the file for changes. Then rebuilds the code and pipes it to babel-node
build: When you are ready to deploy the code for production, you build the ES2015 version of the code and you can run that.
package.json:
"scripts": {
"start": "nodemon --watch backend --exec babel-node backend/server.js"
"build": "babel backend/server.js -o lib/server.js",
},
To build the production code, run npm run build. Once the code is built, you can then run node lib/server.js
lib/server.js will look like:

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
I suggest you just editing your package.json like the following.
{
"name": "web-development",
"version": "1.0.0",
"description": "nothing",
"main": "nothing",
"scripts": {
"start": "nodemon --watch backend --exec babel-node backend/server.js"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"type": "module",
"license": "ISC",
"bugs": {
"url": ""
},
"homepage": "",
"dependencies": {
"express": "^4.17.1"
},
"devDependencies": {
"#babel/cli": "^7.10.5",
"#babel/core": "^7.11.1",
"#babel/node": "^7.10.5",
"#babel/preset-env": "^7.11.0",
"nodemon": "^2.0.4"
}
}

Elasticsearch Javascript Client Update not working

I am using elasticsearch JavaScript client with nodejs (Typescript). The update query is not working as expected can any one help me on this
My code is
const EsResponse = await esClient.update({
index: "myindex",
type: "mytype",
id: "1",
body: {
// put the partial document under the `doc` key
doc: {
title: "Updated"
}
}
});
And the response is
{
"msg": "[invalid_type_name_exception] Document mapping type name can't start with '_', found: [_update]",
"path": "/myindex/_update/1",
"query": {
"type": "mytype"
},
"body": "{\"doc\":{\"title\":\"Updated\"}}",
"statusCode": 400,
"response": "{\"error\":{\"root_cause\":[{\"type\":\"invalid_type_name_exception\",\"reason\":\"Document mapping type name can't start with '_', found: [_update]\"}],\"type\":\"invalid_type_name_exception\",\"reason\":\"Document mapping type name can't start with '_', found: [_update]\"},\"status\":400}"
}
My package.json file is
{
"name": "backend",
"version": "1.0.0",
"description": "The backend system",
"main": "dist/index.js",
"scripts": {
"prebuild": "tslint -c tslint.json -p tsconfig.json --fix",
"build": "tsc",
"prestart": "npm run build",
"start": "nodemon .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Jagadeesh Kumar CK",
"license": "ISC",
"dependencies": {
"#types/body-parser": "^1.17.1",
"#types/cors": "^2.8.6",
"cors": "^2.8.5",
"elasticsearch": "^16.5.0",
"express": "^4.17.1",
"ts-node": "^8.5.2"
},
"devDependencies": {
"#types/elasticsearch": "^5.0.36",
"#types/express": "^4.17.2",
"#types/node": "^12.12.12",
"tslint": "^5.20.1",
"typescript": "^3.7.2"
}
}
My elastic search version is 6.3

The reason is because you're using a 7.x client against a 6.3 ES cluster.
You just need to configure the client to talk to 6.x clusters using the apiVersion configuration setting, like this:
var elasticsearch = require('elasticsearch');
var client = new elasticsearch.Client({
... other config options ...
"apiVersion": "6.8" <--- add this line
});