The code below works fine for scanning directories and returning image paths for example, but for some reason it doesn't return directory paths? Does globEager just completely ignore directories? Is there an alternative I can use for this purpose? Using Vue.js mind you.
Here's my code:
const project = import.meta.globEager("/src/assets/projects/design/*");
console.log(project)
for (let key in project) {
console.log(key);
}
Related
I have a multiplatform Nuxt 2.15 project with the following structure:
assets/platform1/... //contains fonts, images and config files
assets/platform2/...
components/platform1SpecificComponent.vue
components/platform2SpecificComponent.vue
components/sharedComponent.vue
layouts/platform1/...
layouts/platform2/...
components/platform1SpecificPage.vue
components/platform2SpecificPage.vue
components/sharedPage.vue
I've wrote the following plugin to dynamically register different platform's components unders the same name to be able to reuse most of my pages:
export default ({ store }) => {
const config = store.state.platform.config
Vue.component('NewsCard', () => import(`#/components/pages/news/${config.news.cardComponent.name}`))
}
The problem that after platform1 build, output dir contain assets from platform2 which increases size. At the same time sass or vue loader tries to parse style of vue template's part for components that are not used and not referenced in platform1, throwing errors about missing sass variables...
I know that nuxt allows to define ignore property in nuxt.config.json (or .nuxtignore) but that only works for pages and layouts...
I tried to configure webpack rules by modifiying nuxt.config.js extend property:
const fontsLoader = config.module.rules.find(i => String(i.test) === String('/\\.(woff2?|eot|ttf|otf)(\\?.*)?$/i'))
fontsLoader['exclude'] = new RegExp(`assets/(?!${platform})`)
and actually that removed fonts from dist folder but it started to throw warnings: that these files doent have appropriate webpack loader. The same behaviour I observed when tried to exclude specific vue components from vue-loader.
So doesnt seem like a good solution after all..
Becides, the same approach didnt work for images inside assets folder:
const imgLoader = config.module.rules.find(i => String(i.test) === String('/\\.(png|jpe?g|gif|svg|webp|avif)$/i'))
imgLoader['exclude'] = new RegExp(`assets/(?!${platform})`)
all the images are still added to dist...
Is there a way to tell nuxt (or webpack via nuxt config) to ignore specific folders with fonts and images under the /assets folder and specific vue components that are not pages or layouts?
I have a problem, I have already generated OpenApi Swagger files (swagger.json and swagger.yaml) Is it possible somehow in Ktor (kotlin) import this files and start swagger-ui server on specific route ?
I have visited ktor-swagger project but could get how just to add json file to display swagger-ui.
Any suggestions ?
Make you json file accessible from static routing
Create "files" directory in resources dir
Use next code to routing static files from "files" dir
routing {
static("/static") {
resources("files")
}
//...
}
Lets name json file "test.json", then put you it in "files" folder
so now you run the app and see this file by http://localhost:8080/static/test.json
Then we need to install and configure OpenApiGen
Add OpenApiGen dependencies you can find how to do this here https://github.com/papsign/Ktor-OpenAPI-Generator
Then use the following code
install(OpenAPIGen) {
serveSwaggerUi = true
swaggerUiPath = "/swagger-ui"
}
now you can use http://localhost:8080/swagger-ui/index.html?url=/static/test.json URL to see your file through the swagger UI
Also, you can provide your own route to using redirection
get("/api") {
call.respondRedirect("/swagger-ui/index.html?url=/static/test.json", true)
}
this will allow you to use just http://localhost:8080/api
My problem:
I have a zip file that contains a firmware update for my company's device
I want to be able to access it using react-native-fs with the code below
.
export function readAssetFile(name) {
if(Platform.OS === 'ios') {
return RNFS.readFile(`${RNFS.MainBundlePath}/assets/data/${name}`);
} else {
return RNFS.readFileAssets(`raw/${name}`, 'base64');
}
}
My project structure looks like:
ProjectDir
android
data
image1.png
image2.png
firmwarefile.zip
ios
The android branch works, because I added a build step in my .gradle to copy firmwarefile.zip into ProjectDir/android/app/src/main/assets/raw. So I can call readAssetFile('firmwarefile.zip'), and it returns the data.
On iOS, all the image files (Image1.png, Image2.png) are included in MyProject.app/assets/data/ without me having to do anything, but the zip file that sits beside them is not.
Looking into the actual packager code (from the metro project), it seems (based on metro/src/defaults.js) that zip files aren't included by default by the packager, but the packager can be configured to include other file types. But I can't find any documentation for how I'd go about doing that configuring.
Sorry for what feels like a really simple question, but I've been trying to get this zip included in my bundle for ~4 hours now. I'm resorting to manually putting in console.logs and error-throws to trace things inside metro to try and find where I should be sending in my config.
Versions:
React-native: 0.55.3
Metro: 0.30.2
This is a hack, but it gets it done:
Convert your zip binary to a base64 string
Stick it in a .js file, a la module.exports = "<your base64 data goes here>"
In your file that needs the zip file, use import myZipFileAsBase64 from './hacky-base64-file.js';
Here's a quick script to make your base64 files:
var fs = require('fs');
function prepareZip(file, outJs) {
const b64 = fs.readFileSync(file, 'base64');
fs.writeFileSync(outJs, `module.exports = ${JSON.stringify(b64)};`);
}
prepareZip('./data/myFirmware.zip', './hacky-base64-file.js');
I have a Vue.js + Electron app (electron-vue boilerplate)
What are the best practices of getting and displaying directory's folders and files?
Basically I want it to behave like a File Explorer (Windows) or Finder (Mac). You open a folder you get all the content displayed.
Let's say we have:
the main view called App.vue with a router inside of it.
there's an open folder button in App.vue.
And we also have FileExplorer.vue component that is getting displayed as a route inside that App.vue
How do I make this FileExplorer.vue component to get and display files and folders of, let's say, directory C:\test folder (on Windows) when we hit that open folder button in App.vue?
I know that I should use Node for that, but how exactly? What do I import and how do I use Vue to make it all work together?
All the projects on Github are too complicated for a newbie to understand how they work. For example this one is quite simple looking, but there's so much code in there that you don't even know where to start
Update:
I managed to get the content of a folder doing this:
<v-btn #click="readDirectory"></v-btn>
[...]
const fs = require('fs-extra')
export default {
name: "FileExplorer",
data () {
return {
dir:'C:/test',
files:[],
file:""
}
},
methods: {
readDirectory() {
fs.readdir(this.dir, (err, dir) => {
console.log(dir);
for(let filePath of dir)
console.log(filePath)
this.files = dir
})
},
}
}
And I displayed it like this:
<v-btn v-for="file in files" :key="file.id">
{{file}}
</v-btn>
But it doesn't really behave like a real file explorer...I get the folders and files on button click but I can't do anything with all those folders and files.
How do I make all the folders that it gets on click to behave in a similar way (to get its content) ?
And how do I display folders and files differently?
If you simply want to allow a user to select a folder in Electron I would suggest using the showOpenDialog API.
In the renderer process, you need to use the remote API to access the dialog API.
const { remote } = require('electron')
remote.dialog.showOpenDialog({
properties: ['openDirectory'],
defaultPath: current
}, names => {
console.log('selected directory:' + names[0]);
});
If you want to display the contents of a directory within your app you're going to have to use the node fs module and read the directory contents.
fs.readdir(path[, options], callback)
Will callback with all the file and directory paths which you'll then have to iterate over to get more info or to traverse recursively to get their contents. There are are node modules which make this process a little easier than writing it all yourself.
Once you've got an object tree containing all your files and directories you can use this to create a UI using vue.js.
Project structure:
Webpack is building the app into the public folder
At the same time I have some static assets located there, like:
public/assets/font-awesome-4.7.0/css/font-awesome.css
What I want:
I want to run my express app with the webpack-dev-middleware for the dev purposes
I want that all the requests for the static assets (which are not processed by webpack) were served from the public folder
How I tried to do that:
first attempt
app.use(require('webpack-dev-middleware')(compiler, {
stats: { colors: true }
}));
app.use(require('webpack-hot-middleware')(compiler));
app.use('/', feathers.static(app.get('public'))); // express.static
This works good, until you have index.html in the public folder. If you have it there - the static one would be served, NOT the one which is the actual version according to the webpack-dev-middleware.
second attempt
Then I thought - probably I must use express.static only for the production case, I removed it. Now I was not able to open /assets/font-awesome-4.7.0/css/font-awesome.css
third attempt (hack which works right now)
Finally I made it work, but I'm not satisfied with the current solution. I manually put all the assets directory into the webpack realm by extending the webpack config with this:
new CopyWebpackPlugin([
{ from: 'public/assets/', to: 'assets' },
{ from: 'node_modules/bootstrap/dist/', to: 'vendor/bootstrap/dist' }
]),
however this method assumes that one need to point every static file which he wants to be served by webpack-dev-middleware
Any thoughts are appreciated.
Regards,