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.

How to fix blank web page after 'npm run build'

I'm currently working on a project using Vue and Firebase. The issue is that my dev server is no longer rendering new routes from my vue router after building and deploying to prod.
For ex: I have several vue components and they all render properly for their corresponding vue router routes, although now when I add new components(Test.vue)/new routes, nothing is rendered when loading the web page.
I've spent quite a while looking at just about every helpful article relevant to this issue but have had no luck. I have tried manually setting the webpack config in a vue.config.js file and setting the root path to './' as well as '/' and even ''. None work.
I'm really lost at this point.
package.json (in root folder of project):
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"#firebase/firestore": "^1.4.10",
"#google-cloud/firestore": "^2.2.7",
"core-js": "^2.6.5",
"firebase": "^6.4.0",
"vue": "^2.6.10",
"vue-router": "^3.0.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.10.0",
"#vue/cli-service": "^3.10.0",
"vue-template-compiler": "^2.6.10",
"webpack-cli": "^3.3.7"
}
}
//
package.json (in node_modules/webpack-dev-server/schema-utils/src/package.json):
{
"_args": [
[
"schema-utils#1.0.0",
"/home/b-rad/Documents/AustinKratom/frontend"
]
],
"_development": true,
"_from": "schema-utils#1.0.0",
"_id": "schema-utils#1.0.0",
"_inBundle": false,
"_integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
"_location": "/webpack-dev-server/schema-utils",
"_phantomChildren": {},
"_requested": {
"type": "version",
"registry": true,
"raw": "schema-utils#1.0.0",
"name": "schema-utils",
"escapedName": "schema-utils",
"rawSpec": "1.0.0",
"saveSpec": null,
"fetchSpec": "1.0.0"
},
"_requiredBy": [
"/webpack-dev-server"
],
"_resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
"_spec": "1.0.0",
"_where": "/home/b-rad/Documents/AustinKratom/frontend",
"author": {
"name": "webpack Contrib",
"url": "https://github.com/webpack-contrib"
},
"bugs": {
"url": "https://github.com/webpack-contrib/schema-utils/issues"
},
"dependencies": {
"ajv": "^6.1.0",
"ajv-errors": "^1.0.0",
"ajv-keywords": "^3.1.0"
},
"description": "webpack Validation Utils",
"devDependencies": {
"#commitlint/cli": "^7.0.0",
"#commitlint/config-conventional": "^7.0.0",
"#webpack-contrib/eslint-config-webpack": "^2.0.0",
"del-cli": "^1.0.0",
"eslint": "^5.0.0",
"eslint-plugin-import": "^2.0.0",
"eslint-plugin-prettier": "^2.0.0",
"jest": "^21.0.0",
"prettier": "^1.0.0",
"standard-version": "^4.0.0"
},
"engines": {
"node": ">= 4"
},
"files": [
"src"
],
"homepage": "https://github.com/webpack-contrib/schema-utils",
"license": "MIT",
"main": "src/index.js",
"name": "schema-utils",
"repository": {
"type": "git",
"url": "git+https://github.com/webpack-contrib/schema-utils.git"
},
"scripts": {
"clean": "del-cli coverage",
"commits": "commitlint --from $(git rev-list --tags --max-count=1)",
"lint": "eslint --cache src test",
"release": "npm run commits && standard-version",
"test": "jest --env node --verbose --coverage"
},
"version": "1.0.0"
}
Please let me know if I need to provide additional information or files. I also have this project up on Github here: https://github.com/austin-kratom/AustinKratom
There are no error messages in console when on localhost dev server. Simply just a blank web page and nothing else. All my previous vue components/routes work fine, but new ones do not.
Thank you!

When I moved the /test route above dynamic routes related to show and edit routes /test url is loading the Test.Vue.
{
path: '/test',
name: 'test',
component: Test
},
{
path: '/edit/:product_id',
name: 'edit-product',
component: EditProduct
},
{
path: '/:product_id',
name: 'show-product',
component: ShowProduct
}
Before making this change, /test url was matching the path: '/:product_id route pattern with product_id parameter value being set to value "test". So rule is to always define the specific routes before the dynamic routes.

Electron desktop app Icon is not displaying?

I am creating an electron app in windows. Everything is working fine but when I run the setup, the desktop shortcut icon is electron's icon.
This is my package.json file:
{
"name": "happiness",
"version": "1.0.0",
"icon": "logomain.ico",
"iconUrl":"file:///E:/abc/abc1/logomain.ico",
"description": "Descriptions",
"main": "index.js",
"build": {
"appID": "happiness",
"productName": "happiness",
"icon": "logomain.ico"
},
"scripts": {
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron-packager": "^13.0.1"
},
"dependencies": {
"electron-squirrel-startup": "^1.0.0",
"electron-winstaller": "^2.7.0"
}
}
I am using Electron windows installer to generate final exe and this is my build.js file:
var electronInstaller = require('electron-winstaller');
// In this case, we can use relative paths
var settings = {
appDirectory: './release-builds/app-happiness-win32-ia32',
outputDirectory: './myapp-source-built-installers',
authors: 'ABC',
exe: './app-happiness.exe',
setupIcon: 'logomain.ico'
};
resultPromise = electronInstaller.createWindowsInstaller(settings);
resultPromise.then(() => {
console.log("The installers of your application were succesfully created !");
}, (e) => {
console.log(`Well, sometimes you are not so lucky: ${e.message}`)
});
However the icon is displaying in control panel and in the startup menu. But in shortcut of the app electron's icon is displaying.
This is the command I'm using:
electron-packager . app-happiness --overwrite --asar=true --platform=win32 --arch=ia32 --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName="Happiness" --electron-version=4.0.0 --icon=logomain.ico
and then
node build.js

Android NativeScript Path must be a string. Received undefined

I am a newbie in NativeScript, I am trying to import/open an existing NatriveScript project on Visual Studio code, I have installed, Node, NativeScript 3.0.3, when I try to build or run the project I get this from debug console
[NativeScriptCli] execute: tns --analyticsClient VSCode --version
[NSDebugAdapter] Using tns CLI v3.0.3 on path 'tns'
[NSDebugAdapter] Running tns command...
[NativeScriptCli] execute: tns --analyticsClient VSCode debug android --no-client --watch
[NSDebugAdapter] Watching the tns CLI output to receive a connection token
Searching for devices...
Executing before-prepare hook from c:\Dev\QAP\Mobile app\hooks\before-prepare\nativescript-dev-android-snapshot.js
[31;1mPath must be a string. Received undefined
[NSDebugAdapter] The tns command finished its execution with code 127.
Error: Unknown signal: SIGQUIT
Here is my package.json
{
"name": "tns-template-hello-world-ts",
"main": "app.js",
"version": "2.4.0",
"author": "Telerik <support#telerik.com>",
"description": "Nativescript hello-world-ts project template",
"license": "Apache-2.0",
"keywords": [
"telerik",
"mobile",
"nativescript",
"{N}",
"tns",
"appbuilder",
"template"
],
"repository": {
"type": "git",
"url": "git#github.com:NativeScript/template-hello-world-ts.git"
},
"bugs": {
"url": "https://github.com/NativeScript/template-hello-world-ts/issues"
},
"homepage": "https://github.com/NativeScript/template-hello-world-ts",
"android": {
"v8Flags": "--expose_gc"
},
"dependencies": {
"moment": "^2.11.2",
"nativescript-background-http": "^2.5.1",
"nativescript-camera": "0.0.8",
"nativescript-checkbox": "^1.2.2",
"nativescript-drop-down": "^1.4.0",
"nativescript-floatingactionbutton": "^2.1.3",
"nativescript-fresco": "^1.0.13",
"nativescript-imagepicker": "^2.4.1",
"nativescript-permissions": "^1.2.1",
"nativescript-pulltorefresh": "^1.1.9",
"nativescript-social-share": "^1.3.1",
"nativescript-telerik-ui": "^0.2.4",
"nativescript-theme-core": "^0.2.1",
"nativescript-toast": "^1.4.5",
"nativescript-videoplayer": "^1.1.4",
"nativescript-videorecorder": "^1.3.4",
"tns-core-modules": "^2.5.2"
},
"devDependencies": {
"nativescript-dev-typescript": "^0.3.2",
"nativescript-dev-android-snapshot": "^0.*.*"
}
}
and my launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch on Android",
"type": "nativescript",
"request": "launch",
"platform": "android",
"appRoot": "${workspaceRoot}",
"sourceMaps": true,
"watch": true
},
{
"name": "Attach on Android",
"type": "nativescript",
"request": "attach",
"platform": "android",
"appRoot": "${workspaceRoot}",
"sourceMaps": true,
"watch": false
}
]
}