Guide on how to pass server variables to a JavaScript/HTML file on the client side

How can a JavaScript variable set on a server (via properties file) be injected into an AngularJS/JavaScript app?

I am working with a Java Jersey application that contains client files (js, HTML, CSS, etc.) located in the /src/main/webapp folder. There is a JavaScript variable that I need to set before it is served to the client. For example:

    <script type="text/javascript">
        var serverHost = "<%serverHost%>";
    </script>

Is there a way to substitute the value of "<%serverHost%>" with a dynamic value that will be evaluated at runtime? Ideally, this would be done using properties.

The purpose of this is for the client to make REST calls with full URLs as opposed to relative ones. The application will be accessed through a middleman server, requiring the rest calls to reach the originating host server. The use of a properties file is necessary to ensure the application can function across different environments without modification.

Any suggestions or ideas would be greatly appreciated.

Thank you

Answer №1

To address the challenge at hand, server side rendering is essential. For instance, one approach could involve fetching the host URL from a properties file on the server side, passing it to the view via the controller, and dynamically setting the serverHost variable in the HTML using JSP tags.

HOWEVER....

It's worth noting that utilizing AngularJS introduces a different perspective, as this kind of rendering conflicts with Angular's principles.

An alternative solution would be to define a constant in Angular,


angular.module('myApp').constant('SERVER_URL', 'http://localhost:8000/');
This constant value can be configured during the build process.

Alternatively,

You could establish a basic API to fetch the host url value from a properties file, ideally in JSON format, enabling you to easily update this constant value by calling the API.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The persistent issue with the Angular localStorage array resetting upon refreshing the page

My Goal: I am aiming to have the localStorage cached answers array populated by the contents of a specific 4 object array called 'questions' only upon initial loading. Subsequent page refreshes should load the modified answers array from localSt ...

Is it possible to include additional information when initiating a WebSocket connection?

Is there a method to transmit a distinct identifier to the server upon initiating a WebSocket connection? One possible approach could involve sending a handshake message post-connection establishment. However, it would be more convenient if it were feasib ...

A guide to fetching MongoDB data and presenting it in a table with ReactJS

I’m currently facing an issue while trying to display data from my MongoDB database in a table using ReactJS. Instead of getting the expected outcome, all I see is an empty result on the webpage along with some errors shown in the browser console. https ...

I possess an assortment of objects and I must retrieve specific information about them based on two data points

Managing a collection of items can be challenging, especially when filtering based on specific data points. For example, let's say we have a collection of action objects like {name: Detail}, {name: Spec}... and two data points determining which action ...

Attempting to establish a connection with a MySQL database through the utilization of Node.js in combination with the mysql javascript client

Recently, I've been facing a challenge connecting to a MySQL database from my electron app: <script> var mysql = require('mysql'); var connection = mysql.createConnection({ host : '*********', ...

Utilizing Knockout to Render JSON List Items

Utilizing Knockout.js to dynamically update a view from JSON response has been my current focus. The structure of the JSON is as follows: var data = { "Properties": { "Engine Capacity": "1499cc", "Doors": 3, "Extras": [ "LED lights", ...

Interactive image popups with JavaScript

Seeking assistance in generating a popup when selecting an area on an image map using Javascript. As a novice in JS, I have successfully implemented popups for buttons before but encountered issues with this code within the image map - the popup appears br ...

Include a lower border on the webview that's being shown

Currently, the webview I'm working with has horizontal scrolling similar to a book layout for displaying HTML content. To achieve this effect, I am utilizing the scroll function. My inquiry revolves around implementing a bottom border on each page usi ...

What is the outcome of using VueUse.useMouse() if it is not made reactive?

Whenever I use VueUse.useMouse(), the results in console.log() change as I move the mouse. However, the results within <span></span> always remain 0. This is quite confusing to me, can someone please explain why this is happening? ...

'Without the need to refresh the page, assign a JavaScript variable from JSP on the server side.'

I'm looking for a way to assign a JavaScript variable from JSP without triggering a full page reload. While my current code successfully sets the variable, it also causes the entire page to refresh as a side effect. Here's an example in the exam ...

Clustered Discord.js bot delivering multiple responses

I have developed a Discord bot using discord.js and integrated cluster on it. However, I am facing an issue where the bot is responding multiple times. Can anyone offer assistance with this problem? ...

Unable to make sequential HTTP calls work in Angular 7 using pipe and map operations

I've been searching high and low but still can't find a solution to this issue :-(. I have a feeling ConcatMap or something similar might be the key, but it's really confusing me. Here's the code snippet in question: login(email: str ...

Guide on how to submit x-editable input data in a Razor page

When the submit button is clicked, I would like the form to be sent using the post method. Thank you for your assistance. Here is the HTML code: <form method="post" class="form-horizontal editor-horizont ...

I must address the drag-and-drop problem in reverse scenarios

I am currently utilizing react-dnd for drag and drop feature in my color-coding system. The implementation works flawlessly when I move a color forward, but encounters an issue when moving backward. Specifically, the problem arises when shifting a color ...

OpenLayers: Issue with OSM visibility within div

I am facing an issue with loading the map content from OpenStreetMaps into a div within my hybrid mobile app. Here is the code snippet I am using: -JS: .controller('myCtrl', function($scope, $state, $ionicPopup, $cordovaGeolocation, Util) ...

A Guide to Integrating Cloudinary Upload Widget in React

I am encountering an issue with the Cloudinary Upload Widget in my React App. The problem arises when I open and close the widget multiple times, causing the app to crash and display the error message: widget.open() is not a function Note: Despite this ...

Creating a Java interface to interact with Open MPI

I am currently in the process of constructing the Java interface for Open MPI, following the instructions provided on this particular page. After extracting and navigating to the directory named openmpi-1.8.7, I executed ./configure --enable-mpi-java Th ...

The React className attribute has surpassed the maximum line length of 120 characters, causing an error

Here's the element in question: <div className={`my_container ${theme} ${isSpanishLanguage && 'spanishLanguage'} ${isEnglishLanguage && 'englishLanguage'}`}></div> I am encountering an error due to the line being too l ...

Tips for uploading map data as a form-data-type by using Postman

I am attempting to post a Map data as an ArrayList. I have tried sending it as Raw body, but now I need to send it as Form-Data. I have attempted various methods but have not achieved the desired result yet. If anyone knows how to solve this issue, please ...

Trouble with activating dropdown toggle feature in Bootstrap 5

I recently upgraded to Bootstrap 5 and now my code is not functioning properly. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria- controls="navbarCollaps ...