Starting Electron with JS file as argument - electron

When I install the electron quick start and run
node_modules/.bin/electron --help
it tells me:
A path to an Electron app may be specified. It must be one of the following:
- index.js file.
- Folder containing a package.json file.
- Folder containing an index.js file.
- .html/.htm file.
- http://, https://, or file:// URL.
Running
node_modules/.bin/electron .
(i.e. the option "Folder containing a package.json file") works alright. package.json points to main.js and looks as follows:
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"repository": "https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^4.1.4"
}
}
I'd assume that running this:
node_modules/.bin/electron main.js
should work as well, but it does not – it just shows the Electron "dummy" screen.
How can I specify on the command line which JavaScript to run?

Turns out the JavaScript is executed alright – the problem is how the path to the main HTML file is resolved. Solution: Replace:
mainWindow.loadFile('index.html')
with:
const arg = process.argv[1] // better command line parsing might be needed
const dir = fs.lstatSync(arg).isDirectory() ? arg : path.resolve(arg, '..')
mainWindow.loadFile(path.resolve(dir, 'index.html'))

Related

Electron-forge package generates an empty out folder

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

Where is the buildResources directory?

I'm adding an icon to my electron app, but I have no idea where the buildResources directory is!
I've looked everywhere, the out folder, the .git folder, but it seems to be nonexistent!
buildResources does not have a default value, so you must set it. You would set it in package.json, here's an example.
{
"name": "my-project",
"version": "0.0.1",
"description": "My desription.",
"main": "index.js",
"scripts": {
//... scripts
},
"build": {
"directories": {
"buildResources": "resources"
},
//... rest of properties
},
//... rest of file
}
Your project
app/
dist/
node_modules/
resources/
icon.ico
... other resources
package.json
webpack.config.js
//... other files/folders

Proper .gitignore file for a Neos Flow project?

I recently created a new project using composer create-project --keep-vcs neos/flow-base-distribution ProjectName and I'm a bit confused by the .gitignore file it produces:
/Build/
/Configuration/
/Data/
/Packages/
/Web/
/bin/
/Readme.rst
/Upgrading.rst
/flow
/flow.bat
It basically throws out almost every file from the VCS, including the entirety of the Packages/Application folder, where I assumed most of my code would go. So what gives? Why is the .gitignore file so broad?
I don't have previous experience in neos-flow but I installed it with the help of composer on two different computers with Ubuntu OS.
My .gitignore file output is same like your output both time.
/Build/
/Configuration/
/Data/
/Packages/
/Web/
/bin/
/Readme.rst
/Upgrading.rst
/flow
/flow.bat
The Original structure of my project is
. .. .editorconfig .git .github .gitignore Build Configuration Data Packages Readme.rst Web bin composer.json composer.lock flow flow.bat
When i remove all folders and files as declared in .gitignore then my project structure is like this
. .. .editorconfig .git .github .gitignore composer.json composer.lock
As you know, The purpose of the .gitignore file is to allow you to ignore files, such as editor backup files, build products or local configuration overrides that you never want to commit into a repository.
I think that neos-flow just need those files that are remaining after applying .gitignore.
Those are composer.json and composer.lock
The purpose of composer.json is that it shows the details about the project like name, description, license information.
And composer.lock shows all packages, and dependencies for the project, their name, detail and url for downloading the package.
The content of composer.json
{
"name": "neos/flow-base-distribution",
"description": "Flow Base Distribution",
"license": "MIT",
"support": {
"email": "hello#neos.io",
"slack": "http://slack.neos.io/",
"forum": "https://discuss.neos.io/",
"wiki": "https://discuss.neos.io/c/the-neos-project/project-documentation",
"issues": "https://github.com/neos/flow-development-collection/issues",
"docs": "https://flowframework.readthedocs.io/",
"source": "https://github.com/neos/flow-base-distribution"
},
"config": {
"vendor-dir": "Packages/Libraries",
"bin-dir": "bin"
},
"require": {
"neos/flow": "~6.0.0",
"neos/welcome": "~6.0.0"
},
"require-dev": {
"neos/kickstarter": "~6.0.0",
"neos/buildessentials": "~6.0.0",
"neos/behat": "dev-master",
"phpunit/phpunit": "~8.1",
"mikey179/vfsstream": "~1.6"
},
"repositories": {
"distributionPackages": {
"type": "path",
"url": "./DistributionPackages/*"
}
},
"replace": {
"typo3/flow-base-distribution": "self.version"
},
"suggest": {
"ext-pdo_sqlite": "For running functional tests out-of-the-box this is required"
},
"scripts": {
"post-update-cmd": "Neos\\Flow\\Composer\\InstallerScripts::postUpdateAndInstall",
"post-install-cmd": "Neos\\Flow\\Composer\\InstallerScripts::postUpdateAndInstall",
"post-package-update": "Neos\\Flow\\Composer\\InstallerScripts::postPackageUpdateAndInstall",
"post-package-install": "Neos\\Flow\\Composer\\InstallerScripts::postPackageUpdateAndInstall"
}
}
First 70 lines of composer.lock
{
"_readme": [
"This file locks the dependencies of your project to a known state",
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
"This file is #generated automatically"
],
"content-hash": "06d49a77babbafa5a03d726865e61dc3",
"packages": [
{
"name": "composer/ca-bundle",
"version": "1.2.4",
"source": {
"type": "git",
"url": "https://github.com/composer/ca-bundle.git",
"reference": "10bb96592168a0f8e8f6dcde3532d9fa50b0b527"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/composer/ca-bundle/zipball/10bb96592168a0f8e8f6dcde3532d9fa50b0b527",
"reference": "10bb96592168a0f8e8f6dcde3532d9fa50b0b527",
"shasum": ""
},
"require": {
"ext-openssl": "*",
"ext-pcre": "*",
"php": "^5.3.2 || ^7.0 || ^8.0"
},
"require-dev": {
"phpunit/phpunit": "^4.8.35 || ^5.7 || 6.5 - 8",
"psr/log": "^1.0",
"symfony/process": "^2.5 || ^3.0 || ^4.0"
},
"type": "library",
"extra": {
"branch-alias": {
"dev-master": "1.x-dev"
}
},
"autoload": {
"psr-4": {
"Composer\\CaBundle\\": "src"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Jordi Boggiano",
"email": "j.boggiano#seld.be",
"homepage": "http://seld.be"
}
],
"description": "Lets you find a path to the system CA bundle, and includes a fallback to the Mozilla CA bundle.",
"keywords": [
"cabundle",
"cacert",
"certificate",
"ssl",
"tls"
],
"time": "2019-08-30T08:44:50+00:00"
}]}
The _readme key in composer.lock json shows the purpose of composer.lock
"_readme": [
"This file locks the dependencies of your project to a known state",
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
"This file is #generated automatically"
],
So in short your .gitignore is absolutely fine and accurate. I also install it on both my ubuntu computers and both are same.
There are two models of .gitignore under their repository:
https://github.com/neos/flow/blob/master/Resources/Private/Installer/Distribution/Defaults/.gitignore
/Build/
/Configuration/
/Data/
/Packages/
/Web/
/bin/
/Readme.rst
/Upgrading.rst
/flow
/flow.bat
https://github.com/neos/flow-development-distribution/blob/master/.gitignore
/Build/Behat/*
/Build/BuildEssentials
/Build/Reports
/Build/Resources
/Configuration/
/Data/
/Packages/
/Web/
/bin/
/Readme.txt
/Upgrading.txt
/Readme.rst
/Upgrading.rst
/flow
/flow.bat
As I am an avid Flow user, I can explain why the Packages/ directory is excluded:
As you can see in the composer.json, there is this section:
"repositories": {
"distributionPackages": {
"type": "path",
"url": "./DistributionPackages/*"
}
},
This tells composer to look for your own packages in the DistributionPackages/ directory. This is much cleaner than mixing own packages and dependencies in the Packages/ directory and also helps a bit with dependency management itself (since only the composer.json in your package directory needs to contain the package dependencies - i.e. no need to duplicate them in the root composer.json).
See https://docs.neos.io/cms/manual/dependency-management#the-path-repository-setup and https://www.neos.io/blog/project-repository-best-practice.html for more info about that (this not only applies to Neos site packages, but every project specific package).
As for the other excluded files: Since those get created by composer install, those don't need to be tracked by git.
Exception: You often want to include the Web/ directory (but exclude non-specific contents like Web/_Resources/ or Web/index.php) i.e. for the favicons or other static files needed in the web root.

electron-forge how to specify a source directory for packaging?

I've rigged create-react-app with the electron-forge app and now I need to somehow specify the build folder produced from the CRA for the packaging. That folder should also be served.
Would such a thing be possible with electron-forge?
I understand are you asking how to tell electron-forge which directory to find your source files in for packaging the app.
If so, see: https://github.com/electron-userland/electron-packager/blob/master/docs/api.md
where it describes the options of the
"config": {
"forge": {
object in your package.json file
inside they there is this package config object:
"electronPackagerConfig": {
"dir": "./src",
where you can specify your source folder.
Also, BTW: there you can specify files/file-regexs to be ignored in packaging:
"ignore": [".idea", ".gitignore"]
electron-forge has no option to specify input folder (project's root folder will be used):
Specify ignore option to skip folders/files;
Use main key in
package.json to specify correct start script.
For example, package.json for vue project:
{
"name": "project",
"version": "1.0.0",
"main": "index.js",
...
"config": {
"forge": {
"packagerConfig": {
"ignore": [
"^/[.]vs$",
"^/public$",
"^/src$",
"^/[.]browserslistrc$",
"^/[.]editorconfig$",
"^/tsconfig[.]json$",
"[.](cmd|user|DotSettings|njsproj|sln)$"
]
},
...
}
},
...
}

Where is Electron's app.getAppPath() pointing to?

I am using browserify to merge all the .js files of my app into a dist/main.js. My package.json looks like:
"main": "./dist/main.js",
"scripts": {
"start": "electron ./dist/main.js",
},
"bin": {
"electron": "./node_modules/.bin/electron"
}
and I can correctly run my application with npm run start.
However if in main.js I use app.getAppPath() I get:
/home/myuser/projects/electronProject/node_modules/electron/dist/resources/default_app.asar
I would expect this to be
/home/myuser/projects/electronProject/dist/main.js
Did I misunderstood the usage of this method? How can I get the path of the Electron program entrypoint? What is the role of default_app.asar?
Thanks
Why aren't you using __dirname (node.js) or process.resourcesPath (electron)?
https://github.com/electron/electron/blob/master/docs/api/process.md
https://nodejs.org/docs/latest/api/globals.html#globals_dirname
It returns the current application directory:
app.getAppPath()
Returns String - The current application directory.
From the docs.
An asar file is a simple archive format that just appends the files to each other. I'm not sure exactly how you're building the application but tools like electron-packager and electron-builder output the files into a resources/app.asar archive and run the files from there. That means that your current application directory is going to be something/resources/app.asar. From there your main file is located at something/resources/app.asar/main.js.
For whom may ran into the same problem...
It's maybe a problem with your electron configuration field main in package.json
The script specified by the main field is the startup script of your
app, which will run the main process.
The example code from offical websites:
{
"name": "your-app",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
app.getAppPath() output:
YOUR_PATH_TO/electron-quick-start
If you change the code snippet to
{
"name": "your-app",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"start": "electron YOUR_PATH_TO/main.js"
}
}
Then app.getAppPath() output:
YOUR_PATH_TO/electron-quick-start/node_modules/electron/dist/resources/default_app.asar
So the consolution is : If you want to change the startup script, change it in the main field, not just change it in scritps field...

Resources