Electron - Tidy Up Packaged App Folder - javascript

Running electron-packager, I expected the resulting folder structure to be a bit neater, so that I could just zip it up and allow it to be downloaded as an app.
The main folder contains the executable app, but also a lot of .dll, .pak and .bin files. I think this may be a bit confusing to users of my app, is there any way to move all of these files into a folder when running electron packager?

The output from electron-packager is not supposed to be used by the user. It gives an output folder that you can pass into the windows installer to make an installer for users. The installer hides that messy folder under AppData\Local\appname\app-version. It uses Squirrel to do this and once configured correctly the user only sees desktop and start menu shortcuts to launch the application. Using Squirrel means it plays nicely with the Electron autoUpdater.
While using the windows installer and auto updater is recommended you could also create a shortcut to the executable created by the packager so that users don't have to see the messy folder themselves.

Related

How to integrate Ionic 4 + AngularJS (1.7.2) + Webpack + Cordova?

Ionic 4 CLI is seems to be friendly only with Angular7. And Angular7 is slow like.. send for compile and go take a shower and back and maybe the bundle will be ready. Actually the worst framework the front end ever met.
AngularJS is probably the best happened to front end world. Everything is fast, reliable, straight forward. When you combine this with Webpack you can enjoy an high level of programming language including exports and imports and classes and and components just everything else you need.
However, the Ionic CLI doesn't integrated with something else than the Angular7.
So I have tried to create a cordova based project using:
cordova create test
And then tried to "manually" setting things up.
I have installed Webpack in the cordova based project so now it's accessiable through the node_modules folder. Then I have created the webpack.config.js file in the same directory.
Then I have created src directory which stores the webpack.entry.js file. The webpack.config file reads what the entry file created and creates a new folder called www and there it places index.html file and bundle.js.
Then I am trying to run cordova run --device with Android device connected and the app is getting actioned in the actual device.
Very nice.
However, I have some issues: it seems that the files that are in the bundle doesn't going to be work since angularjs is not completely served.
I mean, in order to serve an angularjs app you probably need a static server or serve it via node. In this case this doesn't happening so it just like drag the index.html file to the Chrome browser and have it not working at all.
I have searched tons at Google but found just nothing.
Is there any boilerplate working with Cordova + Webpack + AngularJs + Ionic framework's components, working fast with livereload?

NW.js - nwbuild not opening on windows

I have an application building in Nw.js. Its almost done, but now facing an issue. While on clicking nw.exe on code (development) it is opening very fast, within in 2 seconds. But when I create a build using nwbuild -p win64 . , it is taking a lot time of time, say a minute to open and giving a feeling that app is opening itself.
The code base when built, the .exe is 21 MB size. Appreciate, if some one could help me to understand why this happens and what to make it open faster.
nwbuild is not recommended by official now, maybe try nwjs-builder-phoenix or create you own distribute script. As I remember, nwjs-builder-phoenix also not handle node_modules folder size very good.
Here is how I distribute my package:
copy NW.js binaries client to dist folder
copy my working source project into a folder named package.nw(Windows) or app.nw in nwjs.app/Contents/Resources/(MacOS)
run npm prune --production under the path you just copy your source into. https://docs.npmjs.com/cli/prune.html
using npm package plist(for MacOS) or rcedit(for Windows) to change the binaries client's information about version, nanme, author ..etc
For mac these is alot of things needs to be changed if you want to publish to appstore http://docs.nwjs.io/en/latest/For%20Users/Advanced/Support%20for%20Mac%20App%20Store/

electron - node.js - fs.readFileSync requires admin privileges when electron is built and in Program Files

I've successfully built my electron application which appears to be working substantially fine.
I use the node module fsto access files for use in my application, which is standard affair for Electron. This works exactly as expected in the development environment, and even when I build my app with the asar in C:\Users\myApp\ I can access the files from the built electron application.
However, when I've created an installer and placed the application # C:\Program Files(x86)\myApp\
fs.readFileSync
which previously worked fine both in the development verson and the built version when it was present in C:\Users\myApp\, now requires Run as Administrator Privileges to read files, else it will throw an error.
Any explanation?
Electron Version: 1.8.4
Platform: Windows 7
I believe you may want to deploy some of your application data into your %APPDATA% i.e. C:\Users\yourusername\AppData\Roaming, or in the case of electron, can deploy your files into the userData folder using app.getPath('appData') which refers you to C:\Users\yourusername\AppData\Local\your_electron_app_name or app.getPath('userData'). https://github.com/electron/electron/blob/master/docs/api/app.md#appgetpathname
In that directory, you can change the files without elevated privileges.
If you look properties of your electron application folder in your Program Files, and go to the security tab, you will noticed that that permission settings for Users is (Read & execute, List folder contents, and Read); however, administrators, have access to Full control (modify, read & execute, list folder contents, read, and write).
However, if you really need to create/edit/delete files in your Program files or ProgramData will require elevated privileges and to get around that you may want to install the npm package electron-sudo (https://www.npmjs.com/package/electron-sudo) or sudo-prompt (https://www.npmjs.com/package/sudo-prompt).

Meteor build packages not included

I am currently trying to generate native versions of a small meteor app I built. When I run them on iOS or Android via the meteor run command it works and meteor build with --debug also generates an ipa/apk that works as expected. But when I run meteor build without --debug the web view only shows a white screen. Using remote debugging I noticed an injector error. I was wondering why and checked the apk/ipa content. There I recognized that in the debug version under assets/www/application/packages there is a bunch of .js and .js.map files which simply is not there in the non-debug ipa/apk.
In the index.html of the non-debug ipa/apk the imports of these files are also missing.
How can I tell meteor to just copy these obviously required files for non-debug?
When you build, Meteor concatenates and minifies all the JS files into a single bundle, same as Browserify and webpack are doing. That is why you do not see all the script imports.
It does not do it in debug to facilitate live reload / hot code push while you are developing, besides facilitating debugging​ obviously.
See the Meteor guide on building for production.
If you believe this difference causes some issue, you can simulate it in development using the --production flag after meteor run.
This addresses your titled and last question, but may not fix in itself your initial issue.

What HTML files should be edited in cordova?

I have seen a few references to this topic, but it's not 100% clear to me.
Inside the top level of a cordova project you have these folders '.cordova', 'merges', 'platforms', 'plugins', 'www'. I would think you edit the top level 'www' folder and it would update the files inside platforms\<platform>\assets\www because editing files directly in this path get overwrote, from what I have read and I experienced this once before deploying an app.
I can't find documentation on this (searching cordova update project just covers updating cordova itself, at least from what I am seeing maybe I'm being blind here).
How do the files in the root 'www' update the project files? I am sure there is a command for this but is it true I have to run an update command every time I make an edit in say Dreamweaver, because when I make an update it obviously doesnt make changes into the directory because it doesnt have anything telling it to.
So what I am asking.
You should edit the html/css/javascript inside the cordova projects root 'www'?
What are some solutions to updating the platform code from the main files?
Edit the content of www folder in main project directory and run cordova build command to copy these files to your platform specific directories. So the process will be like
Edit the content of www folder in project directory.
Debug the changes with any browser or emulator like Ripple.
Run cordova build command to test it in Android emulator or in a real device.
To use cordova command line tools, you need to install cordova command line interface. It can be found here.

Categories