How to properly packaged an electron applications - electron

what could be the best way to package an electron apps.
I have test and run my electron app and it works fine. Now I want to package my electron app but it just shows in command prompt
packaging app for platform win32 ia32 using electron v5.0.6 and nothing else as can be shown in the screenshot below.
when I check electron version via this code electron --version
it output v1.4.13 but during packaging it uses electron v5.0.6. Is this an electron version conflict or what?
here is my package.json
{
"name": "test-app",
"version": "1.0.0",
"description": "",
"main": "main.js",
"dependencies": {
"pretty-bytes": "^2.0.1"
},
"devDependencies": {
"electron": "^5.0.6",
"electron-prebuilt": "^0.35.2"
},
"scripts": {
"start": "electron main.js"
},
"author": "",
"license": "ISC"
}
can someone tell me what is wrong and why my electron app refuse to be packaged.

I found out that the code will eventually compile using electron-packager source Electron Packager. If users is compiling or packaging app for the first time, it can take up 30 minutes or more so the user has to be patient and it will package well. From the screenshot above, you can see that my app is already compiling just that I was impatient to see the end.
Waiting for about 30 minutes allows my system to finally package the app so am good to go now with electron. Thanks

Related

how can i package an electron app for linux?

I have been using electron to make desktop application for a while now but still can't figure out how it can be packaged for all the available linux distributions
For ALL linux distributions I have no idea. The way I make mine Linux Electron projects is just
npm install --save-dev electron-builder
add this to the root of my package.json
"build": {
"appId": "com.myname.appname",
"asar": true,
"mac": {
"category": "public.app-category.developer-tools"
}
},
I make a build folder in the root and put
icon.icns
icon.ico
which I built from this site
and then
./node_modules/.bin/electron-builder
it puts an .AppImage file in dist
more instructions here

How to build only .app using electron-builder

I am trying to fix a tricky production issue in electron app.
And electron-builder takes around 5-6 minutes to build
project.app
project.dmg
project.mac.zip and so on.
Is there I can only build project.app and save time by not building .dmg file etc ?
Just add dir as target in your package.json
"build": {
"appId": "app.id",
"mac": {
"category": "your.app.category.type",
"target": "dir"
}
}
Not sure if you can avoid dmg and mac and only serve .app files but you can avoid generating both dmg and zip file by specifying the target option in mac build config
"mac": {
"target": [
"dmg"
],
},
If none of this work, you can always use a script to clean the .app file, run electron-builder as background process, then check until the .app file is built, kill the electron-builder process.

How to set custom executable icon using electron-packager?

I have successfully built an Electron app. Now I'm trying to change the icon of the .exe that is generated by electron-packager. However, the .exe gets the default Electron icon, not my own icon (see screenshot).
The command I run: npm run build
The corresponding script in package.json:
"build": "electron-packager --out winx64 --overwrite --platform win32 --appname clientlmcenter . --icon my_logo.ico"
The file my_logo.ico is present in the root directory.
You have to put icon argument like this
--icon=./my_logo.ico
Also make sure the logo is in the current directory where you execute npm run build
Another solution that I found is adding the icon in the packaje.json taking into account that the icon is in the root.
{
"name": "nameAplication",
"version": "1.0.0",
"icon": "favicon.ico",
}
and when creating the executable add this command
electron-packager . --platform=win32 --arch=x64 --icon=favicon.ico

React native fresh install ReferenceError: Unknown plugin "transform-runtime" specified

update
This worked for me per #digit comment
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.45.1"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "2.0.0",
...
},
I followed the instructions for building projects in native code for macos > ios. I ran react-native run-ios and I got the error in the title... Any thoughts? My thoughts are at the end if you want to read it.
Unknown plugin "transform-runtime" specified in "<myprojectdir>/node_modules/regenerator-transform/package.json" at 0, attempted to resolve relative to "<myprojectdir>/node_modules/regenerator-transform" (While processing preset: "<myprojectdir>/node_modules/babel-preset-react-native/index.js")
package.json
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.46.0"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "2.1.0",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
my npm & node versions
➜ nativeapp npm -v
4.6.1
➜ nativeapp node -v
v8.1.3
Thank you for looking. Below is my unrelated ranting about my react native but I do genuinely seek some guidance if you have any.
I watched the lectures of coders who works on react-native and I read as much as I can prior to my project and from what I can tell they are all geniuses. I am not being sarcastic I sincerely think that. Yet I fail to understand why my experience with react native is so bad. I mean ... fresh install ... should work? I do not know how many expo projects I have created and moved my stuff around before this because every freakin time I installed a package from npm, everything broke.
I've been a full time coder for 8 years and I've worked projects using things from bash to perl to python to php to golang to mysql to mongo to jquery to angular to vue to vanillajs to ionic to java to C to R yet I do not think I have ever been this frustrated with any new stack I have ever worked on.
What am I missing? What is it that I am doing wrong? Please somebody tell me because I am about to lose my mind and throw my laptop out the window. I spend my time debugging errors instead of making progress in my project. I get up in the morning two hours before work to work on this project and I work on it at home after work... It is 8PM and I've been trying to run the app for two hours now.
I am beginning to think I am the only one with these problems thus I am the cause. I see all these companies using react native and it does not make sense for any company to invest in something that is going to make its developers have the same experience as me. Just spending time on getting it to open.
Sorry about my ranting and please note that I care more about fixing the issue.
I am just passionate about what I do and I do not like spending my hours and not making progress for reasons that I do not expect to have. Thx for looking
According to this link https://github.com/facebook/react-native/issues/14843,
this is a bugs related to the babel-preset-react-native for react native v0.46. For temporary solution
1) Remove .babelrc by doing rm -rf .babelrc inside root folder
2) Revert babel-preset-react-native to the version 2.0.0

React-native error requiring unknown module 'react'

When I run my react-native app with Xcode, and after the app starts to load, I see this error:
"Requiring unknown module "react". If you are sure the module is there, try restarting the packager."
My package.json contents are:
{
"name": "the_golf_mentor",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react-native": "^0.21.0",
"react-native-button": "^1.4.2",
"react-native-cookies": "^0.0.5",
"react-native-db-models": "^0.1.3",
"react-native-navbar": "^1.2.1",
"react-native-side-menu": "^0.18.0",
"tcomb-form-native": "^0.3.3"
}
}
I have tried restarting the package manager, and I have also removed the node_module folder and done a fresh npm install. How do I fix this problem?
I had this after enabling hot reloading, and then downgrading my react version to support a library I was using.
Simulator > Reset Content and Settings
Got it running again.
In React Native React lives in react-native module instead of react (for React JS). In that case import React and other React Native modules via:
import React, {
Component,
View,
Text,
// other React Native modules
} from 'react-native';
I encountered the same error. I closed down IDE and restarted, it worked for me. If nothing works out, try npm install
You should require React from react-native in a react-native project, and not from react.
var React = require('react-native');
It turned out that the error message was an interim one I was receiving in the debugger. When I pressed continue a couple of times in the debugger, I received a message in the simulator window which indicated I had not registering the app properly, i.e. my AppRegistry.registerComponent call was invalid.
I suspect this was an unusual cause of the unknown module 'react' error message. In many cases, neciu's answer is probably more useful, so I have also upvoted it as well.
I had similar issue: "Error: Requiring Unknown module 3" after installing '#react-navigation/native', so I did the following to fix it:
Close everything (Metro, Debugger and Simulator)
npm install
npx pod-install ios (On Mac)
npm run ios
and that's it!

Resources