Nodejs Electron App can't find image path - javascript

I'm trying to show an image on an electron app. I've included it via extraResources in package.json like that:
"extraResources": [
{
"from": "app/assets/images",
"to": "../app/assets/images",
"filter": [
"**/*"
]
}
]
I'm calling it from JavaScript like that:
./app/assets/images/a.jpg
But it's calling wrong path which is: file:///D:/Program%20Files/nodejs/Nodejs_Projects/paletten4/release/win-unpacked/resources/app.asar/app/app/assets/images/a.jpg
There is no app.asar folder in the resources.
How can I get this image?

Related

Typescript issues with multiple projects in the same VSCode workspace

I work with a VSCode workspace that holds various projects, often containing a Nuxt.js application, that has its own tsconfig.json. I recently added an Nx monorepo to the mix and it looks like my typings are not found by IntelliSense anymore.
My workspace looks like the following, with 3 projects so far.
my-project
--tsconfig.json
my-other-project
--tsconfig.json
my-monorepo
--tsconfig.base.json
apps/my-app
--tsconfig.json
--tsconfig.spec.json
I now get errors like this if I open a file in my-project for instance, but if I open the project alone in another VSCode instance, the error is gone.
const { $axios } = context;
Property '$axios' does not exist on type 'Context'.ts(2339)
The definiton is here but it seems like it's not found in a multi-project setup.
my-project/tsconfig.json
"types": [
"#nuxt/types",
"#types/node",
"#nuxtjs/i18n",
"#types/jest",
"#testing-library/vue",
"#testing-library/jest-dom",
"#pinia/nuxt",
"#nuxtjs/axios" <- The definition
],
I'm using Takeover Mode along with the Volar extension, maybe that could also explain why I run into these kinds of problems.
workspace.code-workspace
{
"folders": [
{
"name": "my-project",
"path": "my-project"
},
{
"name": "my-other-project",
"path": "my-other-project"
},
{
"name": "my-monorepo",
"path": "my-monorepo"
}
],
"settings": {}
}

Where to put extjs file?

I came across the extjs class on GitHub that I would like to use in my application.
Where should I put that file?
I know that file structure in extjs follows some patterns, so for example if the name of my application is MyApp, then I put classes in corresponding folders, like MyApp.view.myfolder.MyClass.
However, in this case the usage of class is given as
GLC.tip.toast(title, message, options)
so I doubt that I should put it in some view folder. On the other hand I tried to copy those two files (glc_tip.js and tip.scss) in the root folder of my application and include in index.html the following line:
<script type="text/javascript" src="glc_tip.js"/>
but it also doesn't work. I got an error that it is not defined.
UPDATE
I created folder /ux/tip/ in the application root directory and put files toast.js (renamed glc_tip.js) and tip.scss into it.
After that I modified app.json, so the section with "js" and "css" looks like:
"js": [{
"path": "app.js",
"bundle": true
},{
"path": "/ux/tip/toast.js",
"bundle": true
}],
"css": [{
// This entry uses an ant variable that is the calculated value of the generated
// output css file for the app, defined in .sencha/app/defaults.properties
"path": "${build.out.css.path}",
"bundle": true,
"exclude": ["fashion"]
},{
"path": "/ux/tip/tip.scss"
}],
After that I did sencha app refresh and sencha app build development, but it still doesn't work. i am getting an error:
Uncaught ReferenceError: GLC is not defined
at constructor.handler
It is better to register the third party libs in 'app.json' file. There must be js and css sections. You can put it in '/ux/tip/toast.js' file (create dirs if they do not exist).
Js files in
"js": [
{
"path": "${framework.dir}/build/ext-all-rtl-debug.js"
},
{
"path": "app.js",
"bundle": true
}
],
CSS files will be registered in
"css": [
{
// this entry uses an ant variable that is the calculated
// value of the generated output css file for the app,
// defined in .sencha/app/defaults.properties
"path": "${build.out.css.path}",
"bundle": true,
"exclude": ["fashion"]
}
],
And do not forget to rebuild and refresh your project to apply changes.

Cordova electron publish to s3

I want to include the ability to publish (as I've done through electron-builder before) a Windows app to a S3 bucket, in order to be able to use electron-builder's auto-upload.
I'm on the stage of being able to deploy my packed app to the storage.
I have a .sh script to start the deployment:
cordova platform add electron
echo "Setting main.js ..."
cp res/electron/cdv-electron-main.js platforms/cordova-electron/platform_www/cdv-electron-main.js 2>/dev/null
cp res/electron/cdv-electron-main.js platforms/electron/platform_www/cdv-electron-main.js 2>/dev/null
echo "Package build ..."
webpack --config webpack.config.electron.production.js && cordova build electron --release --publish=always
echo "Done."
I also have a build.json file.
{
"electron": {
"linux": {
"package": [
"dir"
]
},
"windows": {
"publish": [
{
"provider": "s3",
"bucket": "hub-staticfiles.bexfyinfra.com"
}
],
"package": [
"portable"
]
}
}
}
and a bucket with the following permissions:
But I don't seem able to publish my app, get the latest.yml or anything of the sort. I believe I have the correct credentials in my .aws/credentials folder too.
Any ideas how can I go about making it work?
Thank you in advance.

Creating Directories using NPM Module fs-extra

I need some help.
I need to be able to create a directory structure which looks like the following:
parent
child1
folder1
folder2
child2
folder1
folder2
I'm currently using fs-extra (npm module). My issue is that the folder structure needs to be read from a .JSON file. When running say buildDir.js, it should read the .JSON file and create the above structure under a dist (distribution) folder. My current .JSON files looks like:
{
"directories": [
{
"type": "folder",
"name": "parent",
"path": "parent/child1"
},
...
]
}
p.s I'm quite new to Javascript so my code my be a little sparse in places.
Any help would be great.
var parsedJson = JSON.parse(fs.readFileSync("directories.json", "UTF-8"));
parsedJson.directories.forEach(function(value){
if(value.type == "folder"){
fs.mkdirSync(value.path);
}
});
console.log("It worked!");

How to change the ext framework folder to a external Url

I have the following problem.
The "ext" folder of a Ext js framework is very heavy in order to upload it to the repository so we are planning to upload it to our local server and point at it when we build the app.
The problem comes when Sencha cmd cant find the folder when its uploadded externally.
This is my workspace.json:
{
"frameworks": {
"ext": {
// this is the closest i've gotten
"path":"C:/ext",
"version":"6.2.0.981"
}
},
"build": {
"dir": "${workspace.dir}/build"
},
"packages": {
"dir": "${workspace.dir}/packages/local,${workspace.dir}/packages",
"extract": "${workspace.dir}/packages/remote"
}
}
is there something like : "path":"localhost/ext"?

Categories