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...
Related
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'
);
I am trying add a config.json file to the public folder, that can be used to change the IP of the backend system.
The config.json files looks like this
{
"graphEndpoint" : "http://10.1.1.177:5000"
}
Currently I am importing it in the components that requires it as such
import graphConfig from '../../public/config.json'
However, the issue is after building the application to static files changing the configuration does not have any effect on the application.
I tried the first two solutions from -> Vue js with an external configuration file
However, it error out, possibly due my application being in TypeScript.
I want to know where I should write my js files in Laravel 5.4 for compiling after this files.
Example:
I want to create a test.js file with a console.log('Hello World). Where I create this file ? Have I put it in the resources/assets/js/app.js folder ?
My example code:
Folder resources/assets/js/app.js :
require('./bootstrap');
require('./normalscripts/test');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
In resources/assets/js/normalscripts/test I put console.log('WORKS');
And in the view I loaded app.js from public folder
Other question I have is, if I want to load some differents scripts depending of the html view that I am using, how can I can configure them in the app.js for this ?
Example:
I have test1.js and test2.js. I want to load in the view1.html the test1.js and in the view2.html the test2.js. How could I do this ?
Thanks
The Documentation answers your question:
By default, the Laravel webpack.mix.js file compiles your SASS and the resources/assets/js/app.js file. Within the app.js file you may register your Vue components or, if you prefer a different framework, configure your own JavaScript application. Your compiled JavaScript will typically be placed in the public/js directory.
As docs says: https://laravel.com/docs/5.4/structure
The Public Directory
The public directory contains the index.php file, which is the entry
point for all requests entering your application. This directory also
houses your assets such as images, JavaScript, and CSS.
Javascript files must be stored on the public directory, after knowing this, one of the possible correct path would be:
app/public/js/compiled/app.js
And you can include to the JavaScript file on your views like this:
<script type="text/javascript" src="{{ asset('js/compiled/app.js') }}"></script>
Laravel 5.4 is prepared to work with Vue.js, by default you need to have your js files on your assets folder, after compiling them they will be outputted at the public folder.
In case you are using another JS framework you need to indicate the path for the compiled JS files, it should be pointing to the public folder.
Attempting to wrap my head around Ember.js.
Seems I understand the complex things, but miss out on the little things.
How would one go about adding an example.js file?
For simplicity, let's say the example.js file only contains:
(function(){
console.log("example is alive in console");
})(window);
This should display "example is alive in console" within the browser console.
I have tried:
adding app.import('vendor/javascripts/example.js'); within ember-cli-build.js and adding <script src="{{rootURL}}vendor/javascripts/example.js"></script> to index.html
Console is showing
ⓧ GET http://localhost:4200/vendor/javascripts/example.js
DEBUG: -------------------------------
DEBUG: Ember : 2.11.3
DEBUG: Ember Data : 2.12.1
DEBUG: jQuery : 3.2.1
DEBUG: -------------------------------
ⓧ GET http://localhost:4200/vendor/javascripts/example.js
All of the answers I have found stated that just adding custom.js to vendor file works. Sadly, I am missing something.
When modifying ember-cli-build.js you MUST RESTART the ember server manually. The livereload server will not pick up the changes.
This works for me when I don't nest assets in the /vendor directory. The ember-cli build process bundles JS files in /vendor into a single vendor.js file, which you can see linked in app/index.html. So place your example.js file at the root of /vendor, and then add the import to ember-cli-build.js:
app.import('vendor/example.js`);
Now when you start the server, your code from example.js should execute, since it will be included in assets/vendor.js.
Firstly, Ember.js has Convention Over Configuration approach, and your URL can do a lot of things than a normal HTML website.
Whatever you may want to do with your custom.js file it is not ember way of having it as a path. You need routes for navigation across the app. Although routes do much more than navigation. You specify the structure of your app that a user can browse through using Router's map function in app/router.js file.
However if you want to include custome.js file in your app, and have custom.js do some set of tasks for your app. You can simply go ahead and create a directory with any name, javascript for instance inside app directory. Have your javascript files placed inside it. Then you can import these files as simply as referencing any other files in ember:
import customObject from 'yourApp/javascript/custom.js';
Here, your custom.js should be exporting customObject.
Do read the guides if you want to learn more. And the API docs if you actually want to learn more.
Note: At the time of writing this answer current ember-cli version is #2.12.0
I have a json file in my react-native project how do I access it in one of my components?
The structure of the project
It has index.js and App on the same level
Then it has components on the next level
In components it has databases and Main.js
In databases it has database.json
I want to use information held in database.json inside Main.js, I can also change the file structure not sure what is the best way to do this.
Thanks for any help
You can just require your JSON file like any regular javascript file.
let data = require('../../database.json')