Set Electron favicon with electron-builder - node.js

I would like set new favicon in my Electron App and replace default Electron icon when my app is build.
I use electron-builder package. In the doc, i see the icons need to be placed in the build directory. So :
And when i build my app, i've this message :
Application icon is not set, default Electron icon will be used.
Anyone can help me ?
Part of my package.json :
"scripts": {
"postinstall": "install-app-deps && npmpd",
"pre-build": "./node_modules/.bin/electron-rebuild",
"build-bcrypt": "npm rebuild bcrypt --update-binary",
"develop": "npm run private:compile -- --source-maps true && run-p -r private:watch private:serve",
"test": "mocha -R spec --compilers js:babel-core/register test/**/*.spec.js",
"lint": "eslint --no-ignore scripts app test *.js",
"pack": "run-s private:clean private:compile private:build:all",
"pack:mac": "run-s private:clean private:compile private:build:mac",
"pack:win": "run-s private:clean private:compile private:build:win",
"pack:linux": "run-s private:clean private:compile private:build:linux",
"private:build:all": "build -mwl",
"private:build:mac": "build --mac",
"private:build:win": "build --win",
"private:build:linux": "build --linux",
"private:watch": "npm run private:compile -- --source-maps true --watch --skip-initial-build",
"private:serve": "babel-node scripts/serve.js",
"private:compile": "babel app/ --copy-files --out-dir build",
"private:clean": "rimraf build",
"private:cleandb": "rm -rf ./categories ./presentations ./slides ./users"
},
"build": {
"win": {
"icon": "build/icon.ico"
}
}

In package.json, under the win key, you also need to specify the icon path:
"build": {
"win": {
"icon": "build/app.ico"
}
}

Had similar issue, i added directories to my build
"build":{
"directories": {
"buildResources": "resources"
}
}
and inside the directories folder i had my icon.ico file

I encounter same issue with you, since I also use build directory for my output, here is my configuration:
"build": {
"directories":{
"output": "build"
},
"mac": {
"icon": "build/logo.icns",
},
"win": {
"icon": "build/logo.png"
}
},
instead of specifying your directory such as ./logo.png which make electron shows default Electron icon is used reason=application icon is not set

I managed to have my icon on windows with the following script in package.json:
"package-win": "electron-packager . --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=Company --version-string.FileDescription=CE --version-string.ProductName=\"Product\""

Related

How to configure lint-staged to run eslint and prettier scripts

I have this setup:
// package.json
...
"scripts": {
...
"lint": "eslint --fix {src,test}/**/*.{js,ts,jsx,tsx} --no-error-on-unmatched-pattern",
"style": "prettier --write {src,test}/**/* ./*.{json,*.json} !package-lock.json -u --no-error-on-unmatched-pattern",
...
"lint-staged": {
"lint-staged": {
"{src,test}/**/*.{js,ts,jsx,tsx}": [
"npm run lint",
"npm run style"
],
"!**/*.{js,ts,jsx,tsx}": "npm run style"
},
}
...
The problem is that prettier will run no matter what file is matched by the glob, prettier will also double run on all files and rewrite all of them twice.
You can't use double glob expressions when using lint-staged, it will cause conflicts.
// package.json
...
"scripts": {
...
"lint": "eslint --fix {src,test}/**/*.{js,ts,jsx,tsx} --no-error-on-unmatched-pattern",
"style": "prettier --write {src,test}/**/* ./*.{json,*.json} !package-lock.json -u --no-error-on-unmatched-pattern",
...
"lint-staged": {
"lint-staged": {
"{src,test}/**/*.{js,ts,jsx,tsx}": [
"eslint --fix",
"prettier --write -u"
],
"!**/*.{js,ts,jsx,tsx}": "prettier --write -u"
},
}
...
Just use prettier --write -u and eslint --fix when you're running lint-staged, don't run your custom scripts otherwise the globs with conflict with one another. Instead just run eslint and prettier directly on the glob matched by lint-staged.

eslint linting .eslintrc.js itself

I have the following scripts and eslint rules in my package.json:
"scripts": {
"build": "tsc",
"test": "jest tests/** --coverage",
"lint": "eslint './src/**/*.{js,ts,tsx}' --quiet --fix",
"prettier": "prettier --check './**/*.ts'",
"prettier-format": "prettier --config .prettierrc './**/*.ts' --write"
...
},
"lint-staged": {
"**/*.{js,jsx,ts,tsx}": [
"prettier --config .prettierrc './**/*.ts' --write",
"prettier --check './**/*.ts'",
"eslint './src/**/*.{js,ts,tsx}' --quiet --fix"
]
},
"pre-commit": [
"lint-staged"
],
When I run npm run lint I do not get any errors. But when my pre-commit hook runs, I get an error on the .eslintrc.js file:
/.../api/.eslintrc.js
1:15 error Require statement not part of import statement #typescript-eslint/no-var-requires
The line of code it's referencing has the following:
const _path = require('path');
I know I can instrument the code to force eslint to ignore this. But I do not understand why eslint is parsing .eslintrc.js in the first place as it is not located in the src folder (it's on the root folder on the same level of package.json).

Unable to copy assets folder to dist in Electron Types, need help on package.json

I am fresher to Electron and TypeScript. I am able to run the simple electron app using Typescript.
Now I wanted to use Splash screen. When I manually copy the image to dist folder, the splash screen comes and all work fine. How can I build the application using yarn build command so that assets folder should be copied to dist folder. My lead said that the copy should work for all platform. I have tried with the following package.json file. It is not an Angular project. It is a simple project.
{
"name": "electron-quick-start-typescript",
"version": "1.0.0",
"description": "A minimal Electron application written with Typescript",
"scripts": {
"copy": "npm run copy:assets",
"copy:assets": "cp -r assets/* dist",
"build1": "tsc -p tsconfig.json && npm run copy",
"build": "tsc -p tsconfig.json",
"build:watch": "tsc -p tsconfig.json --watch",
"copy:assets1": "copy -R /assets dist/assets/",
"copy-files": "xcopy ./assets/*.* ./dist/assets",
"build11": "tsc",
"watch": "tsc -w",
"lint": "tslint -c tslint.json -p tsconfig.json",
"start": "npm run build && electron ./dist/main.js"
},
"repository": "https://github.com/electron/electron-quick-start-typescript",
"build": {
"extraResources": [
{
"from": "./src/assets/",
"to": "dist",
"filter": [
"**/*"
]
}
]
},
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo",
"typescript"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^9.0.4",
"tslint": "^6.1.2",
"typescript": "^3.9.5",
"#trodi/electron-splashscreen": "1.0.0",
"babel-cli": "^6.11.4",
"babel-preset-es2015": "^6.9.0",
"browser-sync": "^2.14.0"
}
}

How to format / test before every push in a Node.js monorepo?

I am aware of several tools like husky, lint-staged and prettier, currently I have a monorepo that is using yarn workspaces and lerna, before every push using git I want prettier to format my code and run a test script, it does not matter if this happens in every project but it would be nice to only run those scripts in the projects that are changed ofcourse, my question is what tools can really help me with this and how do I set them up? Do I set them up for each project individually or can I setup something in my root package.json? It currently looks like
{
"name": "orgname",
"private": true,
"workspaces": [
"packages/*"
],
"scripts": {
"build": "lerna run build",
"dev": "lerna run start --stream --parallel",
"test": "lerna run test --"
},
"husky": {
"hooks": {
"pre-commit": "npm test"
}
},
"prettier": {
"semi": true,
"singleQuote": true,
"trailingComma": "es5"
},
"devDependencies": {
"lerna": "^3.22.1"
}
}
You can add lint: ... script inside package.json of every lerna packages, for example;
./packages/web/package.json
...
"scripts": {
"lint": "vue-cli-service lint --fix"
},
./packages/api/package.json
...
"scripts": {
"lint": "eslint --fix src",
}
and in the main package.json you can add a lint script that runs every lint command of packages.
Lastly add it to the husky pre-commit hook, so it will run every time before you commit.
./package.json
"scripts": {
"lint": "lerna run lint"
},
"husky": {
"hooks": {
"pre-commit": "yarn lint && yarn test"
}
}
Added a comment to the selected answer about using the lint-staged package, basically it enables you to apply linting and other routines specifically to changed files, and not all the package. It may be useful, depending on how you're using the monorepo approach.
/packages/example-name/.lintstagedrc.json
{
"*.{js,ts}": ["eslint --fix", "git add"]
}
/packages/example-name/package.json
{
[...]
"scripts": {
"precommit": "lint-staged"
}
[...]
}
/package.json
{
[...]
"husky": {
"hooks": {
"pre-commit": "lerna run precommit --since HEAD"
}
},
[...]
}
For more information: https://github.com/okonet/lint-staged

How to run forever js with --experimental-modules flag

I have an application which uses esm modules and import statements. It runs fine in development using the --experimental-modules flag with nodemon, but when I run it in production using forever the imports fail because I don't know where to put the flag. When I run npm run build with the package.json as below it says sh: --experimental-modules: command not found.
If I add --experimental-modules to the "script" part of forever-config.json it says the same thing.
I've searched the internet several times. How do use the --experimental-modules flag with forever? I'm running Node v10.16.0.
{
"type": "module",
"name": "application_name",
"version": "1.0.0",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "concurrently \"npm run build:dev\" \"npm run start-server:dev\"",
"build": "npm run build:prod && npm run start-server:prod",
"build:dev": "webpack --config webpack-dev.config.js",
"build:prod": "webpack -p --config webpack-prod.config.js",
"start-server:dev": "NODE_ENV=development nodemon --config nodemon.json --experimental-modules src/server/index.mjs ",
"start-server:prod": "NODE_ENV=production --experimental-modules forever -o ./forever-out.log -e ./forever-error.log start forever-config.json"
},
//rest of package.json left out for brevity
}
forever-config.json
{
"uid": "application_name",
"max": 5,
"spinSleepTime": 1000,
"minUptime": 1000,
"append": true,
"watch": false,
"script": "src/server/index.mjs"
}
I seem to been able to make it work using the command attribute where I pass this flag, e.g:
{
"uid": "myApp",
"max": 100,
"spinSleepTime": 30000,
"append": true,
"watch": false,
"command": "node --experimental-modules",
"script": "./scripts/some-script.mjs",
"path": "D:/MyProject",
"workingDir": "./",
"sourceDir": "./",
"logFile": "./forever-script-log.log",
"outFile": "./forever-script-out.log",
"errFile": "./forever-script-err.log",
"args": ["--someOpt", "someVal"]
}
Note: you can also use args to pass args to your script/app.
In case you have no access to forever-config.json, you can run the command like this:
forever -c "node --experimental-modules" start app.js
You can also set the NODE_OPTIONS environment variable in .bashrc or the like:
export NODE_OPTIONS="--experimental-modules"
(export seems to be required when using NVM)

Resources