I build an Electron app with plugin system based on yarn (installed as node module), since I don't want to force users to install node or npm.
Some plugins depends on modules with postinstall script "node index.js".
This script failed because node doesn't exists.
Since Electron contains some version of node I thought to add the directory with electron's node to PATH, but I can't find the node binary in packaged app.
I missed something?
Can you think about any other workaround?
I use electron-packager on mac.
I don't think it's relevant to issue but here the main part of install function:
var modulePath = join(__dirname, '../', 'node_modules', 'yarn', 'bin', 'yarnpkg')
var args = ['add', `${plugin.name}#${plugin.version}`, '--json' ]
var child = fork(modulePath, args ,{ silent: true, cwd: this.pluginsPath })
process info:
{
"PATH": "/usr/bin:/bin:/usr/sbin:/sbin",
"versions": {
"http_parser": "2.7.0",
"node": "6.5.0",
"v8": "5.3.332.45",
"uv": "1.9.1",
"zlib": "1.2.8",
"ares": "1.10.1-DEV",
"modules": "50",
"openssl": "1.0.2h",
"electron": "1.4.5",
"chrome": "53.0.2785.113",
"atom-shell": "1.4.5"
}
}
Related
I trying to build an electron with an exe installer on macOS with a MacBook Pro with an m1. I already tried different packages like electron-packager, electron-forge, but unfortunately, none of my tries worked. Did anyone has a solution to build an electron version with an exe on macOS.
My latest approach looked like, but when I start and after more then 30 minute it still do no finish.
yarn run electron-forge make --arch=x64 --platform=win32
The current code could be found here.
We using electron-builder for packaging electron app on Windows&MacOS(x86_x64/arm etc.), and you can try it.
add some config in package.json, like this:
"build": {
"appId": "com.electron.yourappid",
"productName": "your-product-name",
"asar": false,
"mac": {
"target": [
"pkg"
],
"entitlements": "entitlements.mac.plist"
},
"win": {
"target": [
{
"target": "zip",
"arch": [
"x64"
]
},
{
"target": "msi",
"arch": [
"x64"
]
}
]
}
},
"scripts": {
"dist": "electron-builder"
},
then run npm command like this:
# add package in your project
npm install --save-dev electron-builder
npm run dist # or 'npx electron-builder'
If you perfer using 'shelljs', create a file 'dist.js', and content:
const { exec, rm } = require('shelljs');
exec('electron-builder');
and then run node command
npm install --save-dev shelljs
node dist.js
More detail for config you can read offical doc of electron-builder.
I've looked into it and failed (building Apple Silicon, Apple Intel and Windows distributables from M1 Mac). I ended up setting up VMs that I use for building the distributables, and testing also.
electron-builder 23.0.3 and flag --universal work for me on Macbook M1 2021
This works for me. npx electron-builder --win --x64
I would like to create a simple npm package and import that into svelte components, however, I cannot seem to use index files to import deeply nested files, e.g.
// routes/test.svelte
<script lang="ts">
import { Test } from '#my-co/my-lib/dist/folder1/folder2/test';
const test = new Test('foo', 'bar');
</script>
works, but
// routes/test.svelte
<script lang="ts">
import { Test } from '#my-co/my-lib';
const test = new Test('foo', 'bar');
</script>
does not. I have the following in the index.ts file in my npm module:
export { Test } from './folder1/folder2/test';
This strangely also does seem to work in ssr (dev server output in console seems to pick the import {Test} from '#my-co/my-lib' correctly), but not in the browser, where I get the error that Test is not a constructor...
Npm library package.json:
{
"name": "#myco/my-lib",
"version": "0.0.2",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"files": [
"dist"
],
"scripts": {
"build": "tsc",
"prepare": "npm run build"
},
"author": "redacted",
"license": "ISC",
"dependencies": {
"#types/rosie": "0.0.40",
"#types/slug": "^5.0.3",
"rosie": "^2.1.0",
"slug": "^5.1.1"
}
}
Npm library tsconfig
{
"compilerOptions": {
"declaration": true,
"strictNullChecks": true,
"outDir": "dist",
"moduleResolution": "node",
"module": "es2015",
"target": "es5",
"sourceMap": true,
"lib": ["es2015", "dom"],
"rootDir": "src"
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}
Lib structure
my-lib/
| dist/
| node_modules/
| src/
| | folder1/
| | | folder2/
| | | | test.ts
test.ts
export class Test {
foo: string;
bar: string;
constructor(foo: string, bar: string) {
this.foo = foo;
this.bar = bar;
}
testMe() {
console.log("foobar", this.foo, this.bar);
}
}
The svelte-kit package command should automatically do everything for you (docs).
This Youtube video should explain everything.
The steps it provides to publish are:
npm init svelte#next project-name
cd project-name
Create component
npx svelte-kit package
cd package
Login to npm / create an account
npm publish --access public
While Caleb's answer did not really help in my case, I think it was a bit of a pointer as to what was going wrong. I did not intend to write a svelte-focused Component library, but rather a general model/factory library to be reused between the front- and backend.
I did a couple of things since this issue occurred and here is a list of things I think went wrong:
Local linking of the npm package into my project caused issues (npm link). I have very little experience with all the build tools in sveltekit but figured out where those stale/non-functional libs are referenced from. I deleted the node-modules/.vite folder which sometimes resolved my issues (I greped for seemingly cached values which led me to this directory. In my dev experience quite uncommon to have found build artifacts in node-modules, so that was a bit tedious to find in that place).
I converted my npm package to a hybrid ESM/CJS module (previously CommonJS only). I'm unsure whether that resolved the initial issues, but might be worth a try.
I think the main issue was the local linking and some sort of build caching going on in vite.
That being said, I haven't encountered any issues with the library ever since.
I am working on app with electron and electron-forge, this app is being built on a virtual machine with no internet connection, so I got electron binaries files, and set the electron_config_cache to the path where I located the new binaries as well as for cacheRoot for packagerConfig in the package.json file, the problem is that:
When I run yarn package (electron-forge package) I am getting Done with green check next to each step which had been called by yarn package .. but the out folder is empty, while it should has appName-win32-x64 folder which contains .exe.
so does anyone have an idea regarding this?
Be sure that your package.json has the correct settings, including the "main" attribute as well as build directories. It seems electron forge uses electron-packager as its packaging platform so:
Following these instructions:
From Electron forge,Electron forge - packager options, Electron-packager options
Without a forge.config.js file:
Add this to your package.json:
"config": {
"forge": {
"packagerConfig": {dir:"./path/to/your/dir"},
"makers": [
{
"name": "#electron-forge/maker-zip"
}
]
}
Or with a forge.config.js file:
In your package.json, make sure to have:
{
"name": "my-app",
"version": "0.0.1",
"config": {
"forge": "./forge.config.js"
}
}
In your forge.config.js:
{
packagerConfig: {dir:"./path/to/your/dir"},
electronRebuildConfig: { ... },
makers: [ ... ],
publishers: [ ... ],
plugins: [ ... ],
hooks: { ... },
buildIdentifier: 'my-build'
}
I think it is most probable that forge is just not pointed to the correct dir, add the dir setting shown above.
The problem was a virtual machine problem, nothing related to electron forge itself, the VM was not able to copy the content from the temp folder to the out folder, this can be solved by changing the temp folder
While in developing mode, executing the exe is working well.
My code to launch the exe is
function LaunchExe() {
var child = require('child_process').execFile;
var executablePath = 'DemoExe/Sample.exe';
var parameters = ['Hai', 'Test', 'Dat'];
child(executablePath, parameters, function (err, data) {
console.log(err)
console.log(data.toString());
});
}
But after packaging the Electron app, I can't launch the exe.
The command I use to build the exe is
electron-packager . --asar
Error code
Error: spawn DemoExe/Sample.exe ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:232)
at onErrorNT (internal/child_process.js:407)
at process._tickCallback (internal/process/next_tick.js:63)
Regards.
Is your project with angular?
Maybe this can help, but I had problems too with electron-packager.
So I suggest you to use electron builder : https://www.electron.build
Fist you need to add a file at root called electron-builder.json and it shoul'd contain the following (you need to update productname and icons location):
{
"productName": "projectname",
"appId": "org.project.projectname",
"artifactName": "${productName}-setup-${version}.${ext}",
"directories": {
"output": "builds/"
},
"files": [
"dist/",
"node_modules/",
"package.json",
"**/*",
"!**/*.ts",
"!*.code-workspace",
"!package-lock.json",
"!src/",
"!e2e/",
"!hooks/",
"!angular.json",
"!_config.yml",
"!karma.conf.js",
"!tsconfig.json",
"!tslint.json"
],
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true
},
"mac": {
"icon": "src/favicon.ico"
},
"win": {
"icon": "src/favicon.ico"
},
"linux": {
"icon": "src/favicon.png"
}
}
Then, you need to add those scripts to your package.json
"scripts": {
"build:prod": "npm run build -- -c production",
"package:windows": "npm run build:prod && electron-builder build --windows"
}
can compile the executable with
npm run package:windows
Also, don't forget to add electron builder into your dev dependencies :
yarn add electron-builder --dev
the executable with be located into /builds
Got to work with following steps,
1.package the Electron app using command
electron-packager .
2.Path to exe
path.join(__dirname, "DemoExe", "Sample.exe")
I use:
VS Code 1.14.1
Tasks 2.0
node 6.11.1
My problem is that some tasks are working, and some are not.
Here my tasks.json file.
{
"version": "2.0.0",
"tasks": [
{ // This task work fine.
"label": "tsc",
"type": "typescript",
"tsconfig": "tsconfig.json",
"group": {
"kind": "build",
"isDefault": true
}
},
{ // This task work fine.
"taskName": "css",
"type": "shell",
"command": "./scss.sh",
"windows": {
"command": "./scss.cmd"
},
"presentation": {
"reveal": "always",
"panel": "new"
}
},
{ // This task not work. (See output #1 below)
"taskName": "npm-install",
"type": "shell",
"command": "npm install",
"problemMatcher": [],
"presentation": {
"reveal": "always",
}
},
{ // This task not work. (See output #2 below)
"type": "gulp",
"task": "clean",
"problemMatcher": []
}
]
}
Output #1 - When I try to run npm task with type shell\npm, I get the same result:
> Executing task: npm install <
Usage: npm <command>
where <command> is one of:
access, adduser, bin, bugs, c, cache, completion, config,
ddp, dedupe, deprecate, dist-tag, docs, edit, explore, get,
help, help-search, i, init, install, install-test, it, link,
list, ln, login, logout, ls, outdated, owner, pack, ping,
prefix, prune, publish, rb, rebuild, repo, restart, root,
run, run-script, s, se, search, set, shrinkwrap, star,
stars, start, stop, t, tag, team, test, tst, un, uninstall,
unpublish, unstar, up, update, v, version, view, whoami
npm <cmd> -h quick help on <cmd>
npm -l display full usage info
npm help <term> search for help on <term>
npm help npm involved overview
Specify configs in the ini-formatted file:
C:\Users\usr\.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config
npm#3.10.10 C:\Program Files\nodejs\node_modules\npm
Output #2 - When I try to run gulp task I get next (gulp package installed as global (npm install gulp -g),(I have gulpfile.js with correct content)):
> Executing task: node_modules\.bin\gulp.cmd clean <
clean: node_modules.bingulp.cmd: command not found
I can use gulp, npm, node and other tools from cmd as usually, and it's works fine, but not in the VS Code.
Current solution of this thing:
Create batch files for each stuff.
Create shell task for each batch file (as scss.cmd)
Run those tasks.
Yep, it works well, but you need to do too much action for simple tasks.
What can you advise in this regard?
I found a solution to this problem, the problem was in the default terminal application.
By default on Windows OS visual studio code use powershell as terminal app, in my case, I changed it to the git-bash app and got this problem. After that I changed it back to powershell and all works fine.
I did not bother about why gitbash does not work, it is possible that additional configuration is required in the configuration in the vs code.
This is an issue in VS Code. A < gets added at the end of commands, making them fail. There doesn't seem to be a direct fix at the moment.