Is packaging an Electron-builder via npm (not yarn) possible? - javascript

I have create a python3 app using the Electron environment (itself based on Node.js).
For this app, the dependencies have been installed using npm and my app launches using the npm start command.
Following the documentation of Electron, it seems that Electron-builder is the best option for distributing my app for all platforms. Unfortunately, the installation guide recommends using yarn, not npm as npm might not be working properly : see related ticket
Now my question is: As the ticket is rather old (2017), is it now possible to make it work with npm ? So yes how ?
If it is not possible to make it work with npm, how do I transition my code to yarn ?
For info:
The reason I ask is because I get a BIIIIIG error message when I run the command npm run dist.
If needed I can edit the post to include it (alongside my package.json file)
Thanks in advance.
EDIT: adding error and package.json
{
"name": "APP_NAME",
"version": "1.0.0",
"description": "The first version of APP_NAME's GUI.",
"main": "index.js",
"homepage": "https://docenhance.com",
"author": "DocEnhance <nootaku#gmail.com>",
"license": "MIT",
"scripts": {
"postinstall": "electron-builder install-app-deps",
"start": "npm install && electron .",
"pack": "electron-builder --dir",
"dist": "electron-builder"
},
"build": {
"appId": "com.docenhance.APP_NAME",
"productName": "APP_NAME - PROJECT_NAME",
"linux": {
"target": "deb",
"icon": "build/icon.icns",
"category": "Office"
}
},
"devDependencies": {
"bootstrap": "^4.1.2",
"electron": "^4.0.7",
"electron-builder": "^20.39.0",
"jquery": "^3.3.1"
},
"dependencies": {
"bootstrap": "^4.3.1",
"jquery": "^3.3.1",
"popper.js": "^1.14.7",
"python-shell": "^1.0.7"
}
}
The error file can be found HERE.

Yes, you can use npm. The yargs issue is explained here.
Your error messages tell you . . . what the errors are.
error output:[ERROR] Unknown input file format:
/home/MYUSERNAME/Documents/APP_DIRECTORY/dist/.icon-set/icon_ICN#.jp2
Known file formats are *.j2k, *.jp2, *.jpc or *.jpt
I don't use or work on Linux so I don't know for sure if this is the case, but you are specifying a .icns file format for your icon. That is an OSX icon file format. Your error message says that Electron Builder doesn't know what to do with that (on Linux).
"linux": {
"target": "deb",
"icon": "build/icon.icns",
"category": "Office"
}
The rest of the scary error text likely just cascades from that.

Related

Cypress Error (Can't walk dependency graph: ENOENT: no such file or directory, lstat)

When I am trying to Run Cypress Test Runner following error is coming
Can't walk dependency graph: ENOENT: no such file or directory, lstat
Cypress Version
Cypress package version: 9.5.1
Cypress binary version: 9.5.1
Electron version: 15.3.4
Bundled Node version:
16.5.0
Following are the configuration:-
Package.json
{
"name": "cypressautomationproject",
"version": "1.0.0",
"main": "index.js",
"author": "",
"license": "ISC",
"devDependencies": {
"#types/cypress-cucumber-preprocessor": "^4.0.1",
"cypress": "^9.5.1",
"cypress-cucumber-preprocessor": "^4.3.1",
"cypress-iframe": "^1.0.1",
"mocha": "^5.2.0",
"mochawesome": "^7.1.0"
},
"dependencies": {
"cucumber": "^7.0.0-rc.0",
"run": "^1.4.0",
"socket.io": "^4.4.1"
},
"description": "",
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": true
}
}
Cypress.json
{
"defaultCommandTimeout": 6000,
"pageLoadTimeout": 20000,
"reporter":"mochawesome",
"modifyObstructiveCode": true,
"experimentalSourceRewriting":true,
"chromeWebSecurity": true,
"testFiles": ["**/*.feature","**/*.js"],
"projectId": "jyfuej",
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": true,
"cucumberJson": {
"generate": true,
"outputFolder": "cypress/cucumber-json",
"filePrefix": "",
"fileSuffix": ".cucumber"
}
}
}
Not able to Identify the issue
In my case, while scripting below import gets added by mistake in auto suggestion in stepdefination file.
import { text } from "stream/consumers";
Remove this & script will work.
Delete node_modules
Just delete package-lock.json file and then install packages you want with npm install . All will work.
rm -rf node_modules
rm package-lock.json
npm install
If the issue still persists check if you have a global version of any of the packages installed. This can happen if you have a global version of a package that clashes with a local version of a package.
And another thing,
It may be a problem with the cache, try to verify the cache.
npm cache verify
If this due to npm cache problems. Run
npm install --cache /tmp/empty-cache

Zsh: command not found: snowpack

I am trying to create snowpack config file for my preact application. I have already installed all necessary libraries but it still show an error when I try to run this command snowpack init. error zsh: command not found: snowpack
This is my package.json file
{
"name": "test",
"version": "1.0.0",
"main": "index.js",
"author": "EF",
"license": "MIT",
"scripts": {
"start": "snowpack dev --port 3000",
"build": "snowpack build"
},
"devDependencies": {
"#prefresh/snowpack": "^3.1.2",
"snowpack": "^3.8.8"
},
"dependencies": {
"preact": "^10.5.15"
}
}
What could be the problem here?
The problem is that the snowpack binary isn't in your $PATH. The only time it should be is if you globally installed it. But because you haven't, you cannot access it.
There's an easy solution (and the correct way to run binaries) and that is using npx or yarn. Either will do the trick, so whichever you prefer.
npx snowpack ... or yarn snowpack ... from within your project will be able to access the snowpack binary and run it correctly.

NPM build phase of my package not executed during install

I am developing a package to use web workers in a generic way but I am finding some issues when trying to add it as a dependency for another project.
Normally I would expect that having a build script section of my package.json when doing install that it would be automatically called generating the output of the rollup.config.js. But it does not seem to execute anything. Do I have any misunderstanding on how npm build should be working?
If not, there be any other colliding script in package.json that is causing it not to work in the next file example:
{
"name": "web-threads",
"version": "1.0.5",
"description": "generic threads using web workers for the web",
"main": "dist/web-threads.js",
"scripts": {
"build": "rollup -c",
"test": "jest",
"test:dev": "jest --watchAll test/unit",
"test:int": "jest test/integration",
"test:cov": "jest --coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
"push": "yarn test && git push",
"deploy:major": "yarn version --major",
"deploy:minor": "yarn version --minor",
"deploy:patch": "yarn version --patch",
"deploy:push": "git push && git push --tags",
"preversion": "yarn test"
},
"keywords": [""],
"repository": "",
"author": "",
"license": "MIT",
"private": false,
"devDependencies": {
"babel-jest": "23.4.2",
"babel-preset-env": "1.7.0",
"babel-preset-stage-0": "6.24.1",
"coveralls": "3.0.2",
"faker": "4.1.0",
"jest": "23.5.0",
"jest-puppeteer": "3.3.1",
"puppeteer": "1.7.0",
"rollup": "0.65.0",
"rollup-plugin-babel": "3.0.7",
"rollup-plugin-uglify": "4.0.0",
"uglify-es": "3.3.9"
},
"babel": {
"presets": ["env","stage-0"]
},
"jest": {
"testMatch": [
"**/test/**/*-test.js"
],
"transform": {
"^.+\\.jsx|.js?$": "babel-jest"
}
}
}
I also moved the dependencies to not be devDependencies but it didn't help solving the issue.
NPM build documentation: https://docs.npmjs.com/cli/build
You could try adding a postinstall script.
As documented in the npm docs
postinstall: Run AFTER the package is installed.
So the answer of #Olian04 send me in the right direction and dig a bit on the documentation. Indeed I had a misunderstanding regarding build as it is actually not a script but just a hook to the process stage.
So seems the correct way of solving the compilation required in packages is a different process run by prepare. This is a script that documentation defines as:
For build steps that are not platform-specific, such as compiling CoffeeScript or other languages to JavaScript, use the prepare script to do this, and make the required package a devDependency.
The prepare script will be run before publishing so that users can consume the functionality without requiring them to compile it themselves. In dev mode (ie, locally running npm install), it'll run this script as well, so that you can test it easily.
Example:
{ "name": "web-threads",
"description": "a delightfully fruity coffee varietal",
"version": "1.2.3",
"devDependencies": {
"coffee-script": "~1.6.3"
},
"scripts": {
"prepare": "coffee -o lib/ -c src/waza.coffee"
},
"main": "lib/waza.js"
}
As a summary use postinstall for things that need to happen locally to the installing computer/platform (but it will require all dependencies to be satisfied). Use prepare for process that are not platform dependant this will not require the user to have all the tools to trnspile the package and you will also not polute your repository.

Error when building my electron app

I'm stuck with a problem when building my Node JS/electron app with electron-builder. It works perfectly when running npm start. But, when I execute the command build -w (for windows) it fails with this log.
Here is my JSON file:
{
"name": "Munshiiii",
"version": "1.0.0",
"description": "This is a short Description of the project",
"main": "index.js",
"scripts": {
"start": "electron .",
"dist": "build -w"
},
"author": "Hicham Dbiza",
"license": "ISC",
"devDependencies": {
"electron": "1.7.8",
"electron-prebuilt": "^1.4.13"
},
"dependencies": {
"asar": "^0.13.0",
"cradle": "^0.7.1",
"fs": "0.0.1-security",
"git": "^0.1.5",
"jquery": "^3.2.1",
"jsdom": "^11.3.0",
"loke-ipc": "^1.0.5",
"mongodb": "^2.2.33",
"node-couchdb": "^1.2.0",
"pouchdb": "^6.3.4",
"pouchdb-replication-stream": "^1.2.9",
"scanner.js": "^1.0.0"
},
"build":{
"appId": "com.hicham.dbiza.faizan",
"win":{
"target": "nsis",
"icon": "build/Munshiiii.ico"
}
}
}
for this project Im using:
fs
pouchdb
electron
jquery
....
I already used electron-packager and it works almost fine with one problem: See this picture, which means all links inside the js files (e.g: fs.readFileSync('./assets/state','utf8')) won't work.
I have also added some native js click and keypress listeners... could that be a problem?
My electron version is 1.7.8.
I appreciate your help.
Yarn is strongly recommended instead of npm.
yarn add electron-builder --dev
if you are using Npm
do just simple steps terminal:
1 npm install yarn -g
2 yarn
3 yarn pack
Read this Blog (reactJS in electronApp with .exe file)
Have you installed electron-builder? You don't have it in your package.json. Then I would propose to use the electron-builder command, as recommended by the authors.
Run npm install electron-builder --save-dev and change your dist command to run just electron-builder. Since electron-builder per default build for the current running OS, it's not necessary to send the -w flag. If you still experience problems, try to set the following env variable to get a better stack trace:
DEBUG=electron-builder,electron-builder:*
Edit after getting more information from the comments:
According to this issue at GitHub your first issue seemed to be caused by permission errors, and was solved with running as administrator.
From electron-builders README:
Yarn is strongly recommended instead of npm.
yarn add electron-builder --dev
Try to remove your node_modules folder and run
npm install yarn -g && yarn && yarn pack
First I installed electron-builder with following line
npm install -g electron-builder
then I created a build folder in the root of my project, containing the .ico file with the app logo. then I wrote following parts in my package.json
"build": {
"appId": "your.app.id",
"productName": "Your final product name"
}
and
"scripts": {
"start": "electron .",
"pack": "build --dir"
}
That was everything I needed. I opend my root folder in the terminal and executed
build -w
That created an folder called dist, with an unpacked version of my app plus an installer for the app.

Installing package by adding package to node package managers package.json file?

Sorry for such a trivial question, but I'm new to node.
So can one install a package using only the npms package.json file? If yes how can we achieve this? I know I could install it using npm install packageName command, but my project is running on windows azure mobile service and it just allows to modify the package.json file and not to run the npm commands.
So if this is possible, then where do I specify the package name to load and install in the package.json file?
Here is an example of using package.json, imagine you want to add package express as dependency:
{
"name": "TAP",
"description": "Simple package by TAP",
"author": "The amateur programmer",
"dependencies": {
"express": ">= 1.2.0"
}
}
After making changes to the package.json, you need to run npm install command for changes to take effect.
For more information, please refer to the Documentation.
you will get dependencies & devDependencies fields in package.json file, modify them accordingly.
Let's assume you have following content in package.json.
{
"name": "node-app",
"version": "0.0.1",
"private": true,
"dependencies": {
"express": "~4.2.0"
}
If you want to add underscore as dependency modify dependencies add another key as package-name
{
"name": "node-app",
"version": "0.0.1",
"private": true,
"dependencies": {
"express": "~4.2.0",
"underscore" : "~1.0"
}
But make sure adding ,(commas) properly.

Categories