import environment variable inside html and javascript

Question

I have a maven project with folders like myproject/src/main/resources/public. I am using this maven project just to make a war and deploy my UI code (containing HTML5, JavaScript(with jQuery), CSS etc) to tomcat server and nothing java related.

And inside public folder, I have index.html and builder.js files defined.

index.html which has the following line:

<button type="button" id = "bButton " onclick="location.href='https://myserver-dev.com/Builder/builder.html'">Builder</button>

And another JS file builder.js where I am setting env variable like this:

//  var envURL = "http://localhost:8080";
  var envURL = "https://myserver-dev.com";
  //var envURL = "https://myserver-test.com";

I was thinking of creating a separate JS file, maybe something like properties.js or env.js and put the following in it so that I can just import it in html and js files whenever needed:

//  var envURL = "http://localhost:8080";
  var envURL = "https://myserver-dev.com";
  //var envURL = "https://myserver-test.com";

If I do that what would be the best way to get the envURL inside index.html and builder.js at appropriate places?

I wouldn't call that an "environment variable". It's just a global constant within the javascript on your html page in the browser. — Bergi, Sep 30 '21 at 22:30
@Bergi Yes, I can include the `properties.js` file inside HTML file using — Tan, Sep 30 '21 at 22:37
In the onclick handler you'd just refer to the constant, like `location.href = envUrl + '/Builder/builder.html';`. (However, notice that for this purpose you really should use `` - relative url -, and [writing event handlers in html is considered a bad practice](https://stackoverflow.com/q/6941483/1048572)). — Bergi, Sep 30 '21 at 22:45
In the *builder.js* script, you can either simply refer to the global variable and make sure that your html always includes both scripts in the right order using ` — Bergi, Sep 30 '21 at 22:46
Okay. Thanks. So in the `builder.js` script, I should have access to the global variable by doing something like `console.log(envURL)`if I include `properties.js` in `index.html` and `builder.html` using ` — Tan, Sep 30 '21 at 22:51
Ok, great. And for the `index.html` if I go ahead and use ``. The whole button would be treated as `hyperlink` and I don't need to use` — Tan, Sep 30 '21 at 22:56
Yes, prefer hyperlinks over buttons when possible. If you want to make it look more like a button, use `` and style it with a border using CSS. — Bergi, Sep 30 '21 at 22:58

import environment variable inside html and javascript

0 Answers0