Develop Reference

how to use properties file in vueJs?

hi is there any way to store most usable values and properties in a file like yml - property file and ...
and use them in vueJs components
in java we have spring and it helps us using yml and property file properties in project
is there any thing same in vueJs

In vueJs you can use .env files easily.
In you .env file you can define properties starting with VUE_APP_ and them will be available for you in the whole app.
Ex: .env
VUE_APP_API_URL=http://localhost:5000
To read this property just do it.
process.env.VUE_APP_API_URL
More info here.

you can build an object in a .js file and import that obj as your configuration.
no file system exists in pure front-end
or you can get your configuration from a backend api

You can create a normal JS file and import in the Vue.
Or you might need to read about .env file because between those 2 files you gonna need for constants

next.js dont optimise json data file

I want to pass in a replacement JSON file at the deployment of my application container.
Context
I have a next.js application with a JSON file that contains some data, the file is imported to the classes where needed, all works fine.
After building the JSON file does not exist, it seems to be embedded directly in the classes that it's imported by.
The application is dockerized and the container is deployed via a helm chart, it's at this point when deploying I want to provide a new JSON file but as the file is not in the build files I can't replace it.
Is there a nextjs config that will allow me to keep the JSON file external thus allowing me to replace it when deploying without re-building the container?

during the build process, webpack creates ES modules from the imported JSON files.
you might want to consider one of the following.
try loading the JSON file from an external server. this could be done using a simple fetch. if placed in the getStaticProps or getServerSideProps this request would only be made during the build and on each request respectively.
use the dynamic import feature
import(
'path-to-your-json'
);

Parceljs import javascript file as string

I have a very particular use case. I want to import a javascript file as a string and inject it into html responses at will in a service worker. I can't see how to do this using parceljs beyond hosting the javascript file somewhere and doing fetch at runtime to load the js file into memory. However, I want to do this at build time. How best to do this?
Note: Ideally the dependencies of javascript file I am importing should be bundled into the string.

Seems to be possible in parcel 2 with
import js from "bundle-text:./b.ts";
console.log(js);
https://v2.parceljs.org/configuration/plugin-configuration/#predefined-(offical)-named-pipelines

ReactJS pull config from yml file like with backend java

My team has a full stack multi-microservice application where the backend java components use spring #value annotation to pull config values from a yml file.
This works quite well and even the java side of our UI component uses it. The yml is stored in:
MyUI/src/main/resources/application-ui.yml
That said, is there a way to extend this so that the ReactJS code can also pull config from the same yml file? (E.g. our UI has tables with paging and it wojld be nice to put in config, options for how many records a user can see per page 100,1000,10000)
Our frontend code is stored on the same level as java src i.e.
MyUI/frontend/src/

I'm facing the same requirement for the proj my team's handling and what I have in mind right now is to put a config file in /public folder:
config.js
var Config = {
var1: "value1",
var2: "value2"
}
Then, in /public/index.html file, to add a script call:
index.html
<script src="config.js"></script>
So that we'd be able to call our config variables like so:
Component.js
import React from 'react'
...
const data = window.Config.var1
I think it would work well...

Working with meteor.js and mongoDB on windows

I am taking the first steps in learning how to develop within the meteor.js framework using my Windows 10 PC.
In windows, when creating a new app, the system creates a folder with
separate sub-folders for client and server .js files.
My question is if I define a new Mongo collection inside the server.js file, how can I access that collection from the client.js file?

what you're asking is OS-agnostic.
i think you already know that files within a folder called "server" are not seen by the client, and likewise files within a folder called "client" are not seen by the server.
Meteor will eagerly serve files outside such folders to both the client and the server (unless it's in a folder called "imports", more on that in a moment).
so if your project is set up with top-level folders called "client" and "server", it is common to make a folder called "collections", also at the top-level, to define the collections.
so let's say you have a file called collections/News.js:
News = new Mongo.Collection('news');
when that file is served to the server, it will create that collection in Mongo. when that file is served to the client, it will create a local collection in minimongo and associate it with the real collection. in both instances, "News" is a global variable you can access from anywhere.
so that should answer your question.
going further, MDG is recommending a new directory structure going forward. you can read about it here: https://guide.meteor.com/structure.html
in short, they want us to move to a model where files are not eagerly loaded, but explicitly imported by our code. during the transition period, we are meant to put our files into /imports. files in there are not eagerly loaded.
using the same example above, "News" would probably exist in its own area, as a module, in a file like this:
imports/api/news/News.js
const News = new Mongo.Collection('news');
export {News};
here, the file is not eagerly imported, but whatever code relies on News would have to import that module:
import {News} from '/imports/api/news/News';
that import would work in both client and server code.