VueJS reference a local JSON file outside of build - javascript

I have some JSON data that I'm working with in a Vue project. In development I'm referencing and using the JSON data as shown below
<script>
import Versions from './../JSONVersionData/versions.json'
export default {
data: function () {
return {
Versions
}
},
}
</script>
My webpack configuration compiles all my Javascript to an app.js file in dist. This means that the JSON files are compiles into this app.js file.
My aim is to allow the versions.json file to manually edited in the dist file so it can be maintained without needing the end user to recompile the JS assets.
Is this possible? Can I make my Javascript look for a local copy of the JSON data file rather than a bundled version of the file?

Related

Using Parcel to generate single JS file from several JS files and keep framework path defaults

I'm working on updating an application so it is more maintainable. This application currently uses a very large JS file with many JS classes. I have separate the code so each JS class is in its own JS file.
I would like to use Parcel to combine all JS files into a single JS file I can link to from my index.html.
I have added export default to each main class. Eg. export default class MyJSClass. Then I import classes as needed from index.js file such as import MyJSClass from './MyJSClass.js';
The application I'm updating uses framework with structure below:
resources
|-Public
|-JS
|-singleHugeJSFile.js
|-Templates
|-index.html
I want to use Parcel and keep the same structure such as
resources
|-Public
|-JS
|-index.js // Entry point JS file
|-MyJSClass.js
|-SomeOtherClass.js
|-AnotherClass.js
...
|-Templates
|-index.html
I have install Parcel on resources dir and run:
parcel build public/js/index.js
However this generate files on dist dir.
How can I generate a single entry JS file containing all the JS using Parcel and keep the same structure of the application so I can continue using default path to link to this JS from index.html?
Parcel doesn't support this feature out of the box, but I've developed a plugin for it. Check it out https://www.npmjs.com/package/parcel-plugin-custom-dist-structure
It is suitable for all types of web/node development projects, it will generate the dist structure you specify while also handle your imports.
In your case, the configuration that you would provide to my plugin would look like this:
"customDistStructure": {
"config": {
".js": "Public/JS",
".html": "Templates"
},
"options": {
"development": true
}
}
Let me know what you think!

How to edit .env file after build completed reactjs

i had build react app web page
with custom environment variables
the problem is when i build the script
and change the .env variables no thing change in the website !
.env file :
REACT_APP_SITENAME=TheSiteName App
After building a react app all code is static and can't be changed. I think the only solution to send some dynamic data to your react app is to either create a special file per system you running your app on and load this directly inside the index.html or create the content of this file on the fly.
So when you're using create-react-app in public/index.html add something like this:
<head>
...
<script src="https://www.example.com/envconfig.js" type="text/javascript">
</script>
...
</head>
This file should contain the environmental config, e.g.:
window.globalConfig = {
siteName: "The Sitename App"
}
The file can also be created on the fly by PHP, Java or any other backend service. Just make sure to answer as valid Javascript.
And in your React app at index.js, App.js or anywhere you can access this variable as it is global:
const appConfig = window.globalConfig || { siteName: process.env.REACT_APP_SITENAME}
With this you've got an fallback to the static env config if globalConfig is not available, likely in development.
Now you can use appConfig in any way and provide it via redux, context or property to your components.
Last thing to mention, you have to make sure that the config-file is loaded before executing all the React code. So the file should be loaded before all the created React files.
Quote from the docs:
The environment variables are embedded during the build time.
It isn't possible to apply environment changes as runtime.
Reference
Here is an example of how to use the environment at runtime:
CodeSandbox
here is an idea:
add a json file (e.a. config.json) with your configuration to the "public" folder. That file will be in the root of the build:
{
"name": "value" }
in your React code, create a static class with the variable you want to configure:
class Config {
static name= "[default value overwritten by the config]"; }
somewhere high in the startup of your React application, read the json and set the static variable:
fetch("config.json") .then((r) => r.json()) .then((data) =>{
Config.name=data.name; })
now you can use that config anywhere you need it :
Config.name
Note that any configuration you make will be vulnerable for public eyes, since the file can be opened directly with a URL. Also note that when deleting that json file, everything will still work with the default value. You could implement some check that the file must exist.

referencing external json files in vue

I'm using webpack template with vue.
In my application I want to reference external .json files (on the same server) that vue application then loops and displays.
The problem is that once I run the build step, the content of these .json files gets embedded in applications javascript so when I replace them (the .json files will be changed several times a day), the code doesn't change.
I've tried putting them in the static folder but this doesn't help.
Currently I'm referencing files like this:
import JsonProd from '../../json/prod.json'
import JsonRelease from '../../json/release.json'
import JsonDevel from '../../json/devel.json'
export default {
data () {
return {
selectedComponent: 'Devel',
activeTab: 1,
devel: JsonDevel,
prod: JsonProd,
release: JsonRelease
}
},

Is there a way to require a typescript file inside a javascript file?

I created a project using ng.
I called ng eject to get a webpack.config.js.
I added pug to the webpack.
I want to pass the data from src/environments/environment.ts to pug but I can't figure out how to require the typescript file from a normal javascript file.
I can always change environment.ts to a json file or javascript file but would like to leave it the way it is.
Here is the environment.ts file
export const environment = {
production: false,
title: 'My App DEV'
};
As long as it is actually valid JavaScript (not TypeScript), as your example is, then yes. You'll just need to include/require it including the extensions:
require('./environment.ts');
// or
import environment from './environment.ts';
If it were to contain TypeScript code, you'd need to transpile it to regular JavaScript at some point. Where/when/how you do that would be up to your build pipeline.

Use local files and qrc

I have all my QML files provided by QRC. I want one js file to be a local file. I create a data.js file
.pragma library
var data = "some data"
The call
import "data.js" as Data
fails, since QML looks for the file in qrc:/ and the file is stored locally.
Can I use the local file from QML without dropping QRC for the rest of the files?

Categories