nw.js: index.html in a parent folder - node-webkit

The organization of my project's folder is currently as follows:
Root folder
| media folders
| js folder
| index.html
| NW folder
The package.json NW reads is inside the NW folder, which also contains everything in the SDK archive, but whatever I write doesn't seem to point at index.html. I tried both "main": "./../index.html" and "main": "../index.html", but neither of them works.
What's the correct way to point at index.html in the parent folder? Thanks in advance.

You shouldn't be putting package.json in the NW folder. Put package.json next to index.html (in the root folder) and run NW.js from that folder. Your main would then point to "./index.html".
cd /your/root/folder
mv "NW folder/package.json" .
"./NW folder/nw" .

I would recommend putting all of your project files into a package.nw folder with the package.json inside that. When you open nw.exe it will look for a package.nw folder next to it, and then try to run the app inside it.
YourProject/
├── package.nw/
│ ├── media/
│ ├── js/
│ ├── css/
│ ├── index.html
│ └── package.json
├── locales/
├── swiftshader/
├── nw.dll
├── nw.exe
└── all the other NW.js files...
Then you can just rename nw.exe to MyApp.exe, customize its icon with ResourceHacker, zip up the YourProject folder and send it to a buddy to try out. Then all they have to do is "unzip/double-click".

Related

Yarn Workspaces seemingly not recognizing directory

Wasn't sure the best verbiage for the title, but basically I have a monorepo setup using yarn workspaces. It works for every other directory I have. Here's my layout to make it easy to visualize
├── root
├── package.json
├── node_modules
├── appsync
│ ├── package.json
├── aurora
│ ├── package.json
├── lambdas
│ ├── lambda-function-1
│ ├── └── package.json
│ ├── lambda-function-2
│ ├── └── package.json
Roughly this is as simple as I can make it without getting into too much unnecessary detail. In my root package.json I have my yarn workspaces setup like so:
"workspaces": {
"packages": [
"./*",
"aurora/*",
"lambdas/**",
]
}
The issue is this:
For every other directory I have. Yarn Workspaces is working perfectly. appsync is covered in the ./* declaration. And I have packages in that package.json that get installed property to the root directory and not in the appsync directory. Same with my lambdas. I define those differently because it wont be covered from the ./* declaration. And this works great too, no issues.
Today I added a new directory, and to my surprise saw modules being installed to aurora and not to the root. So I'm very confused whats wrong with my root package.json thats causing this? Or any ideas I can try to get more information? I have done yarn both at root and in the aurora directory as well, and no matter what I try, it always installs modules to the aurora directory and also adds a yarn.lock file to that directory as well.
Any help is appreciated.

NPM 7 Workspaces - Multiple node_modules?

I'm having trouble running my app with NPM 7 Workspaces. I am expecting an npm install from the root folder to create a node_modules folder for each of my workspaces, similar to Lerna. However, when I run npm install at the root, I only get one node_modules, at the root level. Is this expected?
Example structure before npm i:
.
├── package.json -> { "workspaces": ["packages/*"] }
└── packages
├── a
│ ├── index.js
│ └── package.json
├── b
│ ├── index.js
│ └── package.json
└── c
├── index.js
└── package.json
Example structure after npm i (note only one package-lock.json/node_modules):
.
├── package.json -> { "workspaces": ["packages/*"] }
├── **node_modules**
├── **package-lock.json**
└── packages
├── a
│ ├── index.js
│ └── package.json
├── b
│ ├── index.js
│ └── package.json
└── c
├── index.js
└── package.json
Node version: 16.4.2
NPM version: 7.18.1
Update: After messing around a with a million things, I finally went and deleted the project and recloned it. It worked after this. I believe it was due to the fact that I was on an old node/npm version when I originally cloned the project. Must have been some funky state lingering around there. Anyway hope this helps anyone with the same problem!

CopyWebpackPlugin not copying files when running dev server

what I am trying to achieve
I am trying to synchronise locale files from a yarn workspace to multiple Vue apps in a monorepo so they can be used with i18next in each app. They need to be:
kept in sync during development
automatically updated when the translation files get updated
have them eventually in the dist folder so that they get deployed with the rest of the app (which should happen automatically when the files are in the public folder)
In order to keep the bundle size small, I can't just bundle the whole package - the files need to be copied individually with their original file names and stored in the public folder of each app and the UI library.
the problem
I am trying to configure CopyWebpackPlugin, but I am either
just getting an initial copy from translation/locales to public/locales on starting up the dev server
or the dev server ends up in a loop when I try to enable the writeToDisk option, plus it starts flooding the dist folder with hot reload files.
my vue.config.js *
module.exports = {
devServer: {
writeToDisk: true,
},
configureWebpack: {
plugins: [
new CopyPlugin({
patterns: [
{
from: `${path.dirname(
require.resolve(`#namespace/translations/package.json`)
)}/locales`,
to: "./public/locales",
toType: "dir",
},
],
}),
],
},
*based on instructions from https://webpack.js.org/plugins/copy-webpack-plugin/, it includes a reference to yarn workspaces
running yarn serve with this config results in a loop. The correct files are copied to the ./public folder, but at the same time, it creates the ./dist folder and floods it with ...hot-update.json files.
if I run yarn build the first time, the locale files get copied to the ./public folder, but not to the ./dist folder (so it seems it copies the files at the end of the process, so the latest files aren't included in the ./dist folder
current folder structure
Monorepo
└── packages
├── applications
│ ├── app1
│ │ ├── public
│ │ └── dist
│ ├── app2
│ └── ...
└── common
├── translations
│ └── locales
│ ├── en-GB
│ │ └── common.json
│ └── de-DE
├── ui
└── ...
versions
#vue/cli 4.5.12
webpack#4.46.0
copy-webpack-plugin#6.4.1
Any help with getting this setup to work would be very much appreciated.

How to access local images in Electron app with Vue

I have an Electron app that uses Vue for its UI. The app downloads compressed data files from a server. The files contain compressed HTML. The app decompresses and display the HTML. That's all working fine.
The HTML may contain img tags that reference images that are also compressed in the downloaded file. I extract and decompress these images, but then need to a) put them somewhere that the app can see them, and b) construct an img tag that correctly references these images.
Rather than list the dozens of places I've tried to put these images, suffice to say that no matter where I put the images, I don't seem to be able to access them from the app. I get a 404 error, and usually a message saying the app can't reference local resources.
Any suggestions for where the app should store these images, and then how to reference them from img tags?
I have a related problem with images I could reference from the Web, but would prefer to download and cache locally so that the app can display them when there's no internet connection. I feel like if I can solve one of these problems, I can solve them both.
this below setting(s) works for me...
.
├── dist
│ ├── css
│ │ └── app.6cb8b97a.css
│ ├── img
│ │ └── icon.1ba2ae71.png
│ ├── index.html
│ └── js
│ ├── app.08f128b0.js
│ ├── app.08f128b0.js.map
│ ├── chunk-vendors.e396765f.js
│ └── chunk-vendors.e396765f.js.map
├── electron.js
├── package.json
├── package-lock.json
├── public
│ ├── favicon.ico
│ └── index.html
└── src
├── App.vue
├── components
│ ├── _breakpoint.scss
│ └── RoundList.vue
├── img
│ ├── bullet.svg
│ └── icon.png
└── index.js
vue.config.js:
const path = require("path");
module.exports = {
outputDir: path.resolve(__dirname, "./basic_app/dist"),
publicPath: './'
};
part of package.json
"scripts": {
"build:vue": "vue-cli-service build",
"serve:electron": "electron .",
"serve": "concurrently \"yarn build:vue\" \"yarn serve:electron\"",
"build:electron": ""
},
the output: https://i.stack.imgur.com/nKK7y.png

Where can I find the folder SegmentationClassRaw when using semantic segmentation?

I want to learn semantic segmentation to train my own dataset in this link.
But when I downloaded the voc2012 dataset, I didn't find this folder SegmentationClassRaw in voc2012 dataset.
My folder structure is like this:
── VOC2012
├── Annotations
├── ImageSets
│ ├── Action
│ ├── Layout
│ ├── Main
│ └── Segmentation
├── JPEGImages
├── SegmentationClass
└── SegmentationObject
So where can I find the folder SegmentationClassRaw?
Now I know how to fix it.
Go to this folder models-master/research/deeplabdatasets.
Use this command:
python remove_gt_colormap.py --original_gt_folder=./pascal_voc_seg/VOCdevkit/VOC2012/SegmentationClass --output_dir=./pascal_voc_seg/VOCdevkit/VOC2012/SegmentationClassRaw
Then the folder SegmentationClassRaw will be generated automatically.