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
Related
I have a problem that I have no build error locally and as soon as I deploy with Netlify using Git deploy I get the following error:
[vite]: Rollup failed to resolve import "/dist/css/app.pcss" from "src/main.js".
This is most likely unintended because it can break your application at runtime.
My Folder structure is as-
.
├── README.md
├── dist
│ ├── assets
│ │ ├── favicon
│ │ ├── fonts
│ │ ├── images
│ │ ├── index.e1359b3f.js
│ │ └── index.fb503937.css
│ ├── css
│ │ ├── app.pcss
│ │ └── base
│ │ ├── fonts.pcss
│ │ ├── global.pcss
│ │ ├── headings.pcss
│ │ └── modern-css-reset.pcss
│ └── index.html
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.cjs
├── public
│ ├── assets
│ │ ├── favicon
│ │ ├── fonts
│ │ └── images
│ └── css
│ ├── app.pcss
│ └── base
│ ├── fonts.pcss
│ ├── global.pcss
│ ├── headings.pcss
│ └── modern-css-reset.pcss
├── src
│ ├── App.vue
│ ├── _components
│ ├── _pages
│ ├── main.js
│ └── router
├── tailwind.config.cjs
└── vite.config.js
And I'm importing /dist/css/app.pcss in src/main.js like that:
import '/dist/css/app.pcss'
I will be grateful if you have any ideas:)
The goal is a successful build on netlify via git deploy and thus a successful import of the app.pcss file after the build.
Rather than importing from dist, OP moved his style files towards /src/css and it's now working successfully on Netlify.
Indeed, dist is mainly used as a target for a production app and never as an asset source.
While public, is more for hosting a light resource (like a .pdf) or alike, something that a visitor may need to download at some point on his computer.
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!
I deploy a node.js application with express to elastic beanstalk and my structure is like this:
project
├── app.js
├── client
├── apps
│ ├── app1
│ │ ├── models
│ │ ├── controllers
│ │ └── routers
│ └── app2
├── utils
├── views
├── logs
├── scripts
├── public
├── node_modules
├── .elasticbeanstalk
├── .ebextensions
I serve my static files in public directory with:
{
"option_settings": [
{
"option_name": "/public",
"namespace": "aws:elasticbeanstalk:container:nodejs:staticfiles",
"value": "/public"
},
]
}
in aws config files in .ebextensions directory.
but when I want to update code with
eb deploy
aws replace all "/var/app/current/" with project directory so all static files in server deleted.
Is aws pipelines help me? or any other solution?
thank you for your help.
I have setting up a configuration in 'wdio.conf.js' for "rpii html reporter". But its not generating master report for all suites.
const { ReportAggregator, HtmlReporter } = require('#rpii/wdio-html-reporter');
exports.config = {
reporters: ['spec', [HtmlReporter, {
debug: true,
outputDir: './reports/html-reports/',
filename: 'report.html',
reportTitle: 'Test Report Title',
showInBrowser:true
}
]],
onPrepare: function (config, capabilities) {
let reportAggregator = new ReportAggregator({
outputDir: './reports/html-reports/',
filename: 'master-report.html',
reportTitle: 'Master Report'
});
reportAggregator.clean() ;
global.reportAggregator = reportAggregator;
},
onComplete: function(exitCode, config, capabilities, results) {
(async () => {
await global.reportAggregator.createReport( {
config: config,
capabilities: capabilities,
results : results
});
})();
}
}
I expect single report with multiple test cases. But I'm getting multiple reports for each test cases.
The topic is pretty old atm, but I just addressed a similar issue in my project - cannot generate the report at all. In most of the case, it is just a matter of configuration, but there is no solid document or guideline for this painful wdio reporter configuration. So here I am, after a whole week of research and testing around, these are viable config you will need and other fellows out there who is/was facing the same issue.
First, let assume your project structure would be something like the below tree
.
├── some_folder1
│ ├── some_sub_folder1
│ ├── some_sub_folder2
├── some_folder2
├── #report
│ ├── html-reports
│ ├── template
│ │ ├── sanity-mobile-report-template.hbs
│ │ ├── wdio-html-template.hbs
├── specs
│ ├── test1
│ │ ├── test1.doSuccess.spec.js
│ │ ├── test1.doFail.spec.js
│ ├── test2
│ │ ├── test2.doSuccess.spec.js
│ │ ├── test2.doFail.spec.js
├── node-modules
├── package.json
Second, you should have templates for your reports, in my case, it is located in #report/template wdio-html-template.hbs and sanity-mobile-report-template.hbs for HtmlReporter and ReportAggregator respectively. As Rich Peters has notices above
Each suite is executed individually and an html and json file are
generated. wdio does not aggregate the suites, so this is done by the
report aggregator collecting all the files and creating an aggregate
file when complete
The HtmlReporter will actually need to find it template for generating the content for each .spec file, then there is a need for another template requested by ReportAggregator
Third, you need correct specs and suites declaration in your wdio config, generic for specs, and file specifically for suites.
Final, run your test using --suite parameter, reference to wdio guideline
My final project structure would look like this, notice the changes
.
├── some_folder1
│ ├── some_sub_folder1
│ ├── some_sub_folder2
├── some_folder2
├── #report
│ ├── html-reports
│ ├── ├── screenshots
│ ├── ├── suite-0-0
│ ├── ├── ├── 0-0
│ ├── ├── ├── ├── report.html
│ ├── ├── ├── ├── report.json
│ ├── ├── ├── 0-1
│ ├── ├── ├── ├── report.html
│ ├── ├── ├── ├── report.json
│ ├── ├── master-report.html
│ ├── ├── master-report.json
│ ├── template
│ │ ├── sanity-mobile-report-template.hbs
│ │ ├── wdio-html-template.hbs
├── specs
│ ├── test1
│ │ ├── test1.doSuccess.spec.js
│ │ ├── test1.doFail.spec.js
│ ├── test2
│ │ ├── test2.doSuccess.spec.js
│ │ ├── test2.doFail.spec.js
├── node-modules
├── package.json
Each suite is executed individually and an html and json file are generated. wdio does not aggregate the suites, so this is done by the report aggregator collecting all the files and creating an aggregate file when complete.
I've been working with Silex a few times now. And I like it, but sometimes, the documentation confuses me simply because they use another folder structure.
Who can tell me which folder structure they use exactly in Silex 2.0?
Documentation
├── composer.json
├── composer.lock
├── vendor
│ └── ...
└── web
└── index.php
Where are the views, controllers etcetera stored?
Silex is not a "convention over configuration" framework: it does not prescribe nor care what the structure of your file system or application organisation is; that is why there's no mention of such things in the docs.
Just organise things the way that best suits your own needs.
Just for example, a directory structure I usually use.
├── config
│ └── dev.php
│ └── test.php
│ └── ...
├── src PSR-4 compatible directory structure
│ └── Component Customized components (Symfony's components or any other)
│ └── Security
│ └── ...
│ └── Validator
│ └── ...
│ └── ...
│ └── Controller
│ └── DataFixtures
│ └── Migrations
│ └── Provider My service providers
│ └── Serivice My services
│ └── Auth
│ └── ...
│ └── Registration
│ └── ...
│ └── ...
│ └── Application.php Customized Silex application class
├── tests
├── var
│ └── cache
│ └── log
│ └── ...
├── vendor
│ └── ...
├── web
│ └── index.php
│ └── index-test.php
├── composer.json
├── composer.lock
And my implementation on GitHub. It's currently WIP, but you can use it as a boilerplate for your Silex application.