electron-builder package for windows in dev mode - electron

I need to test my app on windows, but I am using a mac. It is very easy to package the app to run on windows, but I cannot package the app in dev-mode. I am using electron-is-dev to decide if I am running in dev or not. I need to run my tests on windows because I am testing a very specific windows hardware functionality. I don't want to comment my if(isDev){doSomething} just to run these test, and then uncomment it before I push the change. I was hoping there is some flag I can set in the electron-build cli, or maybe run electon . -windows?

Parse the parameter by adding sample code below to your electron main.js
const args = process.argv.slice(1);
windows = args.some(val => val === '-windows');
It can still be parsed on electron executable app by running in cmd like "electronapp.exe -windows"

The best way to do this so as to use the IsDev is to add the ELECTRON_IS_DEV environment variable to the app kinda like #carlokid suggested. I used: https://stackoverflow.com/a/34769146/3966009. This is the target I used for my app:
C:\Windows\System32\cmd.exe /c "SET ELECTRON_IS_DEV=1 && START ^"^" ^"C:\Program Files (x86)\My App\Fun Time.exe^""

Related

React Native - .ENVs are undefined in Metro Bundler's config file when bundling iOS apps

I have NPM scripts that build and run our app with mocked backend data (used for component testing). They set ENVs inline using the cross-env npm package.
"android-mock": "cross-env MOCK_BACKEND=1 NODE_ENV=development node generate-config.js && react-native run-android -- --reset-cache", - emulator runs on Windows
"ios-mock": "cross-env MOCK_BACKEND=1 NODE_ENV=development node generate-config.js && react-native run-ios -- --reset-cache", - simulator runs on MacOS
Metro bundler looks for the MOCK_BACKEND env and based on that, it resolves paths so that the app uses mocked data instead of relying on the backend to get it.
Problem: Metro can read the process.env.MOCK_BACKEND value only when bundling Android apps, on iOS, the value returns undefined.
What is the correct way to define ENVs so that Metro can read them properly also for iOS bundling?
I don't know why, but it seems like Metro overwrites set ENVs when bundling iOS apps.
Elsewhere ENVs are defined.
If anyone comes over this problem, this is how I solved it.
Solution
1. In the generate-config.js script that is in NPM scrips above, I have added NODE_ENV checks. The script generates the config.js inside the public folder, based on NODE_ENV.
const fs = require("fs");
console.log( process.env.NODE_ENV);
if(process.env.NODE_ENV === 'production'){
fs.copyFile("config.runtime.js","public/config.js",(err) => {if(!err){console.log(err)}});
} else if (process.env.NODE_ENV === 'mock'){
fs.copyFile("config.mock.js","public/config.js",(err) => {if(!err){console.log(err)}});
} else {
fs.copyFile("config.debug.js","public/config.js",(err) =>{if(!err){console.log(err)}});
}
2. I have imported generated config.js into Metro.config and used it as needed.
const config = require(path.resolve(__dirname, 'public/config.js'));
config.js for reference:
module.exports = {
isProduction : false,
disableCache: true,
API:"http://alanj.bs.local:15455/",
/////////////////////////////////////
// ENVs
/////////////////////////////////////
MOCKED_BACKEND: 1,
/////////////////////////////////////
}
We ran into the same issue, we have no solution yet but interesting observations after approximately 1 day of trial and error:
Start Packager Script
The 'Start Packager' script in Xcode is responsible for the mess.
It does not pass the environment variables to the packager.
The problem lies within Mac OS open:
Create a new file /tmp/test.command:
#!/bin/bash
echo "Environment Variable XXX='$XXX'"
Now use
XXX="visible" /tmp/test.command
This will print
Environment Variable XXX='visible'
Whereas when called with open:
XXX="not visible" open /tmp/test.command
will just yield:
Environment Variable XXX=''
Even with
XXX="not visible" open --env XXX="abc" /tmp/test.command
we just get:
Environment Variable XXX=''
Not sure if we should file a support ticket at Apple

How to run an MSIX installed application from the command line

I have an application packaged and signed as an MSIX, it installs and runs from the start menu. I'd like to be able to run the application from the command line too, for automated testing, but I can't see a way to do it. From powershell the docs suggest Invoke-CommandInsideDesktopPackage, but that requires developer mode which I'd rather not enable on test machines, and also is not the same as just running the app. What I'd love is a simple command line command that starts the app in the same way that the start menu does it.
By design, the binaries from an installation folder of an MSIX folder are not directly accessible through their direct path.
The correct way to run an app from the command line from an MSIX package is with the use of an execution alias. The following article contains more details about how an execution alias works and how you can define it in your package, no matter the tool you use to build the MSIX package.
- App Execution Alias
Also, here is a related question on SO.

Compile and build chromium browser for electron

So I am developing an electron application. I know electron is running a chromium browser in its core.
One of the use cases I am currently working on involves changing the source code of Chromium. I have cloned the Chromium project and made the changes. Now is it possible to use my version of Chromium to build my electron application?
If yes, how can I do it? If no, what are the alternatives?
So I had to basically rebuild the entire electron code.
Get the libchromium source from here
To modify the code in content module of electron we have to write a patch in libchromium/patches.
And then build libchromiumcontent :
./scripts/bootstrap
./scripts/update
Compile and package libchromiumcontent with the following commands:
./script/build
./script/create-dist
After the build is done, take note of the hash from the libchromiumcontent commit that includes your patch and perform the following commands, replacing your operating system and architecture as appropriate:
# Use either win|linux|osx to reference the platform
mkdir -p osx/x64/<commit>
mv libchromiumcontent* osx/x64/<commit>
And then build Electron with our custom libchromiumcontent :
Clone electron if you have not done already
git clone https://github.com/atom/electron && cd electron
Bootstrap Electron with our custom libchromiumcontent:
./script/bootstrap.py -v --url file:///path/to/libchromiumcontent
And finally build Electron:
./script/build.py -c D

Cannot use node-hid library in electron app

I had integrated OpenTok.js library for video call in my electron app, for which i want to use logitech device and to use it i need node-hid library using which my app can detect device.
I had done all the needful mentioned for using node-hid in Electron projects, package did get installed
but when i require it in my js file using :-
var HID = require('node-hid');
var devices = HID.devices();
And run my app , it gives an error
Error: Module version mismatch. Expected 50, got 51. So please help me
with this issue .
Thanks
Use electron-rebuild for rebuild modules for suitable for electron. Some node modules are not exactly suitable for electron, because electron uses it's own build of Node. So, electron-rebuild will sort out any incompatibility or functional issues of node modules we use. The recommended way it to add "postinstall": "electron-rebuild --force" line to scripts of package.json file.
One other thing, on linux when you run dev mode, you have to run the script as sudo. Otherwise it'll rise another issue like cannot open device with path...
hope this help someone... :)
I encountered this issue myself, and thought I would share the solution that worked for me. #Tharanga is correct - the recommended way to get around this is to include the below in package.json "scripts" section:
"postinstall": "electron-rebuild --force"
However, I have experienced inconsistent success with that approach.
Another approach is, after installing "node-hid", run this (if on mac):
.\node_modules\.bin\electron-rebuild
Or for Windows:
.\node_modules\.bin\electron-rebuild.cmd
Finally, if you are using webpack in your project, you must add this line to your webpack.config.js file (within module.exports block):
externals: {
"node-hid" : 'commonjs node-hid'
}
I hope this helps some folks in the future!

React-native run-ios loading environment variables

I want a modern way to manage environment variables for a react native mobile app.
The answer here explains the twelve-factor method style (which I love) which involves installing a babel plugin that transpiles references to
const apiKey = process.env.API_KEY;
to their corresponding values as found in the process's environment
const apiKey = 'my-app-id';
The problem is that in order to run this with a populated environment, I need to set it like
API_KEY=my-app-id react-native run-ios
If I have a .env file with 10-20 environment variables in it, this method becomes unwieldy. The best method I've found so far is to run
env $(cat .env | xargs) react-native run-ios
This is a bit undesirable because developers who want to work on this package have to set up custom shell aliases to do this. This isn't conducive to a good development environment, and also complicates the build and deploy flow for releases.
Is there a way to add a hook to the react-native-cli (or a config file) that populates the process environment first? Like an npm "pre" script, but for react-native.
You can use react-native-config which is a native library and requires a link to work or react-native-dotenv which works just like react-native-config but doesn't require any native link.
It'll work fine with .env files set up, e.g. .env.development with environment variables for process.env.NODE_ENV === 'development'.

Resources