Why on earth can I not move my main.js file into a sub directory and have electron build from the that sub directory? for instance my file structure:
app
|_package.json
|_node_modules
|_src
|_main.js
|_index.html
|_renderer.js
|_...
My package.json:
"main":"main.js",
"scripts" : {
"start": "electron ./src"
}
When I run start electron launches the intro screen("to start your application run ...") and not the application I created at ./src. Is there a package out there that allows for this to happen? is there something I'm missing in the package.json file?
Been a while since I posted to SO but this one got me stumped / its not clearly documented on Electron's site(you'd think it would be in architecture). I do see in the quickstart about file structure but it doesn't say I can't do as I illustrated above^ It's not really a big deal I just hate when Im forced into a specific file structure.
The Electron application I am developing makes also use of a main.js file located in a sub-directory, and this is how it would be documented in your package.json file:
"main":"src/main.js",
"scripts" : {
"start": "electron ."
}
I guess this is because npm needs the correct relative path of the startup script in package.json...
There may be also some relevant information in Writing Your First Electron App.
Related
I've been trying to add additional functionality to the electron installer, where I copy some files that are packaged inside the installer, but I receive a non-descriptive error when I try to compile my electron project to create the installer i.e. I get:
* writing effective config
* packaging
* building
x [object Object]
Here is what my script looks like:
!macro customInstall
Rename "$APPDATA\myfolder\img" "$APPDATA\myfolder\img-old"
SetOutPath "$APPDATA\myfolder"
File /nonfatal /a /r "additional_files\*"
CreateShortcut "$SMSTARTUP\mylink.lnk" "$INSTDIR\mylink.exe"
!macroend
Basically everything works except the file copy part. When I remove that part the project builds and compiles into an installer with no problems.
I've also tried to use CopyFiles instead of SetOutPath and File and it works as expected when I place the additional_files folder into the same folder as the installation (dist folder), but I want the folder to be packaged inside the installer. However, I cannot get the additional_files to be packaged with the installation.
I believe it's a location issue, that is, that the NSIS script cannot locate the additional_files/ folder. I've tried modifying the package.json file by adding to the files section the additional_files/ folder and placing it in the root of the project.
I've even tried placing it in the build folder where my installer.nsh script resides, but with no luck.
File looks for files relative to the directory where the .nsi is by default. /NOCD can be used to prevent that but I'm not sure if electron uses that switch.
!cd can be used inside a script to change the directory but I'm not sure if that is going to help you much in this case unless you are willing to use a absolute path and in that case you could just use the absolute path with the File instruction instead.
If you only know where your .nsh file is I suppose you could try File /r "${__FILEDIR__}\additional_files\*"
if you are using electron-builder you have two options inside the settings
extraResources this will copy files into the $INST_DIR/resources folder in your app (this is where the app.asar file is too), and you can access via process.resourcesPath, ex:
extraResources: [
{ from: './dist/ThirdPartyNotices.txt', to: 'ThirdPartyNotices.txt' },
]
extraFiles this would do the same but place the files into the $INST_DIR root folder of your installation ex:
extraFiles: [
{ from: './distrib/mytool.exe', to: 'mytool.exe' },
],
to get the root folder you can use something like remote.app.getAppPath().replace('resources\\app.asar', '').replace('resources/app.asar', '');
all info on: https://www.electron.build/configuration/configuration#overridable-per-platform-options
I have a dll-file that I need to use for a separate process that is started by the Main process in my Electron project.
So I want to include this dll in my electron project and I'm using electron-builder to build the project. The problem is that I don't know how to include the file without it being added in the asar package, which is not reachable from the separate process directly. When I use app.getPath() to get the path for the running instance it will look something like this:
C:\installPath\myProject\resources\app.asar\my.dll
my electron-builder.json currently looks like this:
{
"productName": "myApp",
"directories": {
"output": "release/"
},
"files": [
"**/*",
"my.dll"
],
"win": {
"icon": "dist",
"artifactName": "myApp.${ext}",
"target": [
"portable"
]
}
}
Are there any way to get my.dll included in the resources folder (or somewhere else) instead of in the app.asar?
Thanks!
Solution1:
You should be able to do it with "extraResources" param, put your .dll under resources folder, then create config param named "extraResources" under targeted dist.
The installation process should copy the file(s) to app’s resources directory
https://www.electron.build/configuration/contents#extraresources
Solution2:
You can download .dll file from a web server then move it to the desired place with fs.
If you Keep the DLL file in the Dist folder, Electron-builder tool will include that file into the app.asar file.
This is the limitation of that because if you trying to load the dll file using ffi module or your own written native node module then it will not load the file from app.asar file. so you have to keep the dll file outside of the app.asar file manually or make this copy setup part of your build system.
I am upgrading to Babel 7. They have changed how config files are loaded.
As much as I've tried per their docs I can not make it work. Babel config loading docs
An Electron app with two package.json structure is explained here:
Electron builder docs
The problem is it looks like my babel config is not being loaded for the code where the second package.json is located. (main renderer)
I tend to think that this is because of this new way of loading config and the two package.json but it could be something else.
The app structure looks like this:
/package.json
/.babelrc (or babel.config.js now)
/app/package.json
/app/main.js <-- this can not be compiled anymore
I use Webpack with the babel loader.
Somehow, with the Webpack dev server, it works, but compiling for production fails.
The exact error I get is this:
(function (exports, require, module, __filename, __dirname) {
import "core-js/modules/web.dom.iterable";
SyntaxError: Unexpected string
For which I got a clue here that made me think there is some config being ignored.
The entire project is open source and can be seen in Github.
Cloning and running npm run compile:main will show the error.
I'm creating a portable Electron app that writes some files to the program folder. It works pretty well when I package it without the --asar option in Electron-packager, which leaves the resources folder with plain html + js files.
Now when I try to compile it with the --asar option, so that it packages the resources folder into one file, I can't access the program directory any more with the following code:
remote.app.getAppPath()
This now returns the path of the asar file, so I can't really write to the application folder any more. Is there any way around this?
No, you cannot modify the asar of a running Electron app. You should be saving your config outside of the asar path.
I've been thinking about using React as the frontend for a Grails application, but I'm having a bit of trouble getting started.
So far, I've become accustomed to write a React app using Node/NPM with the help of Webpack, and that's been pretty easy because there is plenty of documentation for that setup.
However, I'm struggling to find anything concrete integrating React seamlessly with Grails.
Ideally, I would just do grails run-app and it should take care of everything. I do not want other team members to worry about starting up two different servers or something along those lines.
Please let me know if anyone has done this before.
Webpack can be configured to work quite well with Grails. The key is to have webpack generate its bundle whenever the app is started up, and to output the bundle in a directory where it can be served from the GSP. You do not want your source JavaScript (I.e, React/ES6 code) in the asset pipeline if your using Webpack, instead you want to keep those source files in another directory (such as src/webapp), and configure Webpack to bundle these files and output the result to the asset pipeline (assuming you're using AP at all).
Here's an example configuration for Webpack:
var path = require('path');
module.exports = {
entry: {
index: './src/webapp/index.js'
},
output: {
path: './grails-app/assets/javascripts',
publicPath: '/assets/',
filename: 'bundle.js'
},
Finally, to achieve the integrated webpack/Grails startup, you can use the Gradle node plugin and attach the webpack run script to the application startup in a custom task in your build.gradle (this is assuming that you have a npm script named "webpack" defined to run webpack)
assetCompile.dependsOn(['npmInstall', 'npm_run_webpack'])
Please note that if you want to run webpack in "watch" mode, you'll need to do that seperately from starting up the Grails app, so that that script can run continuously (there actually is support for this in the Gradle mode plugin but it's currently broken).
See this link for a more in-depth explanation of this approach, with a sample application: http://grailsblog.objectcomputing.com/posts/2016/05/28/using-react-with-grails.html
Also checkout the React profile for Grails 3: https://github.com/grails-profiles/react
It has not been released yet but should be in the next few days. It makes use of the same approach outlined here and in the linked post.
You could use npm's scripts feature to combine all steps necessary to start up the development environment into a single command, e.g.:
// package.json
{
...
"scripts": {
"start": "npm start-grails & npm start-react",
"start-grails": "grails run-app",
"start-react": "node server.js"
},
...
}
Now all it takes is a simple npm start to launch all relevant applications.