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)$"
]
},
...
}
},
...
}
Related
Electron is giving me 'Error: Cannot find module './constructor/getOptions' when I open my executable. I tracked the error to a dependency I have which has the following file structure:
My issue is that in the built version of the program, the entire constructor folder is missing. The way I look at the built version is by using the command npx asar extract app.asar ./extracted to view the files. When I look at this dependency I only see index.js being listed there.
I have checked inside of the index.js to see if getOptions is being imported and it is. I have tried to import the file using relative and absolute path. I have also made sure that the dependency is not under devDependency as electron-builder ignores that. I'm not really sure what else to do. Does electron-builder have an option to go deeper into the file structure of a dependency?
Here is my package.json section for electron-builder:
"build": {
"productName": "MintAIO",
"appId": "aio.mint",
"win": {
"icon": "build/ic.png"
},
"mac": {
"target": "dmg",
"icon": "build/ic-mac.png"
}
}
For anyone who might come across this issue in the future, there is a bug with Asar where the directory name constructor is for some reason not included when being packaged. I'm not sure what other directory names this might cause this issue, but constructor is definitely one of them. To fix this, you can either rename that directory to something else, or specifically leave that one dependency unpacked using the asarUnpack option in the build config of electron.
you can try to include files on the build section for example
"build": {
"productName": "MintAIO",
"appId": "aio.mint",
"win": {
"icon": "build/ic.png"
},
"mac": {
"target": "dmg",
"icon": "build/ic-mac.png"
},
"files": [
"constructor/*"
]
}
I think this will do the trick ....
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
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
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'))
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...