These are the commands I ran (I didn't change the code in any way):
quasar upgrade -i
mkdir folder
cd folder
quasar create
quasar mode add bex
npm i
quasar build -m bex
cd /dist/bex/UnPackaged && web-ext sign --api-key ... --api-secret ...
I then drag&dropped that signed .xpi file (in the folder ./web-ext-artifacts/) into the latest Firefox ESR in Debian 10 stable (78.12.0esr) and installed the addon (with no other addons being installed/running in that Firefox profile). When I click onto the Quasar (v2.0.1) icon in the upper right of Firefox after it finished installing it shows this error page:
File not found Firefox can’t find the file at moz-extension://extension-id/www/index.html.
instead of the proper Vue/Quasar page. The same also occurs with the unsigned addon (after setting xpinstall.signatures.required to enable installation) but it does work fine when running quasar dev -m bex.
Why is that and how to solve it?
It appears to be due to problems with the filepaths when using the build-command rather than the dev command. One can change the url in address bar to show the page but neither could I change all places where 'index.html' or process.env.DEV is used to make it work, nor would that be the build-process as is which I assume ought to work (as is; as said I only ran those few commands for a completely blank BEX and didn't change the code for testing).
Seems like this is bug since quasar: 2.0.0-beta.1 moved to stable:
This is not a good long term solution, but I did the following as a temporary fix:
install execa
npm i execa
in quasar.conf.js
const execa = require('execa')
...
build: {
async afterBuild(cfg) {
try {
// bit of a hack to move the index.html into the www folder on build of Packaged
const dirUnPackaged = cfg.quasarConf.bex.builder.directories.input
const { stdout } = await execa('mv', [`${dirUnPackaged}/index.html`, `${dirUnPackaged}/www/`])
console.log(stdout)
} catch (error) {
console.error(error.message)
}
},
}
Essentially moving the index.html file into the www folder in the Package
Related
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
I have an Angular project. I want to convert him to Desktop application. For this i use Electron.js.
I can run
electron .
It works fine.
But now i want to make an exe.
For this i want to use electron-packager.
The problem:
I run:
electron-packager . --platform=win32
The error:
getaddrinfo EAI_AGAIN github.com
I understand that electron-packager needs github, but how to solve it?! Again i work offline(with jfrog artifactory) without internet.
Is there another electron package which can do the same without internet? (make an exe)
The problem is that electron-packager go to github.com to download electron.js.
So as #Alexander Leithner said to use electronZipDir option. (and also malept in electron channel in Discord)
The solution is simple, when you executed:
npm install electron
A zip file of the binaries of electron are cached in your computer.
The command for electron-packager looks like this:
npm install -D electron-packager
npx electron-packager . -- platform=win32 --electronZipDir=C:/Users/baruc/AppData/Local/electron/Cache/**some long string**
Thats all
Edit 25/7/2021
Theoretically, electron-packager has an option called "download" which you can pass to him a "cacheRoot" or "mirrorOptions" to download the electron.zip file.
By default you dont need to change the cacheRoot, but unfortunately both options of the download didnt work for me.
BTW, mirrorOptions got an object, not a string. So its not clear how to pass an object from the command line.
I saw that in the file artifact-utils.js of the #electron/get library, and there in the function called "mirrorVar" it search a special environment variables or the mirrorOptions which i tell before. If this function wont find them it will take the default which is github.
Solution when you have an artifactory:
Create in your project an .npmrc file and write there:
ELECTRON_MIRROR="http://my mirror site/electron/"
Be aware that it end with back slash.
Go to package.json file, and there to scripts write:
"pac": "electron-packager -- . --platform=win32"
3.execute it: npm run pac
On Mac, when I run my app from WebStorm, exiftool-vendored works great. However, when I build my app (I use electron-builder) and install it on the same Mac, it never returns, even just trying to get the version:
exiftool.version().then(version => writeBreadcrumb('exif', version))
In other words, no error is raised, and the then is never executed when running an installed version of my app, though it works fine running my app from WebStorm (with cd build && electron .)
What am I doing wrong? Is there an example anywhere of how to use exiftool-vendored in an electron app?
You should take a look at what the docs say about making it work with Electron:
How do you make this work with electron?
Electron is notoriously brittle and buggy, and is not officially supported by this package. Although PhotoStructure uses this package within electron, there's a nontrivial amount of auxiliary support code specific to that project to make it work smoothly.
If you're still anxious to try, here are some things to keep in mind:
Note that this package will spawn exiftool external processes, which means the exiftool-vendored.pl and exiftool-vendored.exe packages should be included in your asarUnpack. SmartUnpack might work, but if it doesn't use a pattern like node_modules/{exiftool-vendored.*}/**/*.
If you're requiring exiftool-vendored from within a webview, you're gonna have a bad time. Many things won't work due to a lack of node compatibility within electron.
__dirname at runtime from within an asar package after webpacking will be invalid, so don't rely on that.
— https://github.com/photostructure/exiftool-vendored.js/wiki/FAQ#how-do-you-make-this-work-with-electron
Since I never found a way to get exiftool-vendored to work with electron on Mac, I accepted the above answer, as essentially a warning to steer clear of exiftool-vendored for electron on Mac.
This answer is included for completeness, for those of us who need exiftool in an electron app for both Mac and Windows:
I used node-exiftool with these settings added in package.json for electron-builder:
"build": {
...
"win": {
...
"extraResources": "exiftoolwin/**/*"
},
"mac": {
...
"extraResources": "exiftool/**/*"
}
}
In the root of my project, I added folders exiftoolwin and exiftool. In exiftoolwin, I put exiftool.exe which I obtained by following the Windows Stand-Alone Executable instructions here, and in my exiftool folder I put exiftool and lib which I obtained by extracting the full perl distribution on Mac, as described on the same page.
Then, in my .jsx (I'm using React):
import exiftool from 'node-exiftool';
const exiftoolFolderAndFile = process.platform === 'win32' ? 'exiftoolwin/exiftool.exe' : 'exiftool/exiftool';
const exiftoolPath = path.resolve(__dirname, '../..', exiftoolFolderAndFile);
const ep = new exiftool.ExiftoolProcess(exiftoolPath);
Then I just use ep as described here.
This is working for us:
add this dependency:
"exiftool-vendored": "^15.2.0",
Update package.json "build" section for mac ( not needed for windows as far as we can see )
"build": {
"mac": {
...
"asarUnpack": [
"node_modules/exiftool-vendored/**" ,
"node_modules/exiftool-vendored.pl/**"
]
}
}
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
I've downloaded the latest version of casperjs (1.03) and phantomjs (1.9.2).
So I took this little simple script from the casper page:
var casper = require('casper').create({
verbose: true,
logLevel: "debug"
});
var casper = new require('casper').Casper();
and when I try to run it I get the following error:
noname:phantomjs-1.9.2 Tom$ casperjs/bin/casperjs tipico2.js
Fatal: [Errno 2] No such file or directory; did you install phantomjs?
So, this is my directory structure:
phantomjs-1.9.2/ <-- the folder containing phantomjs
phantomjs-1.9.2/casperjs/ <-- a subfolder containting casperjs
Why does it not work?
The solution is actually very simple. Just export the path where the binary of phantomjs is. In my case this is /Users/Tom/Downloads/phantomjs-1.9.2/bin, hence
export PATH=$PATH:/Users/Tom/Downloads/phantomjs-1.9.2/bin
Faced the same problem when installed casper with npm globally on osx.
At first I've set environment variable PHANTOMJS_EXECUTABLE to path where phantomjs was installed (it's usually /usr/local/lib/node_modules/casperjs/node_modules/phantomjs/lib/phantom/bin/phantomjs phantomjs) with
export PHANTOMJS_EXECUTABLE=/usr/local/lib/node_modules/casperjs/node_modules/phantomjs/lib/phantom/bin/phantomjs phantomjs
this helped only partially as I still got an error like there's no file nor folder /usr/local/bin/phantomjs, so I've just created symlink and pointed it to real binary folder with
ln -s /usr/local/lib/node_modules/casperjs/node_modules/phantomjs/lib/phantom/bin/phantomjs /usr/local/bin/phantomjs
hope this will help someone :)
For OS X:
brew install casperjs --devel
brew install phantomjs
and it will works
If you are getting this error in PHP, place this above your exec:
<?php
putenv("PHANTOMJS_EXECUTABLE=/usr/local/bin/phantomjs");
?>
Where path /usr/local/bin/phantomjs is the path to your phantomjs install. You can get this by typing which phantomjs into terminal for example.
Solution For Windows
STEP 1 - Go to Environment Variables
Start -> Environment Variables -> Environment Variables
or
My PC -> Properties -> Advanced System Settings -> Environment Variables
STEP 2 - Set new PATH to your PhantomJS/bin folder
Select PATH (User or System) -> Edit
New -> Browse -> find your BIN folder in PhantomJS installation on your HDD
Accept
STEP 3 - Test Your Work
Open CMD -> Type "phantomjs -v"
You should get phantomJS version number as answer in any folder in your tree.
I had this problem. Tried on 2 different windows machines.
Deleted all npm installed versions from node_modules folders and AppData / Roaming....
Deleted phantom and casper from c:/ where initially installed.
Downloaded phantom and extracted to Program Files folder from https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-windows.zip
Downloaded casper and extracted to Program Files folder from https://github.com/casperjs/casperjs/zipball/1.1.0
Set System Environment Variable C:\Program Files\phantomjs-2.1.1-windows\bin
Set System Environment Variable C:\Program Files\casperjs-casperjs-b5c59e1\bin
I DIDN'T set PHANTOMJS_EXECUTABLE as some other posts have mentioned. Not sure whether it would make a difference, but 100% working with above steps on Windows 10 with Phantom 2.1.1 and casper 1.1.0
Faced the same problem after installing casperjs with npm globally on osx. The solution is actually very simple. You have to include these lines at the top of your script to connect casperjs with phantomjs.
phantom.casperPath = "/path_to/casperjs/";
phantom.injectJs(phantom.casperPath + "/bin/bootstrap.js");