There is a discussion here on using a hidden field to make the "runmode" available to client-side JS widgets. I want to do the same as the OP.
Jorg Hoh said
"You should not expose the concept of runmodes to your frontend. Instead you should define a marker which is queried by your frontend; and this marker might be rendered directly into the page or queried via JSON. And the presence of the marker in the markup (or JSON) is controlled by an OSGI configuration which can be set via runmode-based OSGI configuration.
Otherwise you need to have knowledge in your frontend about backend specifics."
Just looking for clarification on the 1st point made, does Jorg mean to derive a value from the runmode and put that on the page ?
Yes it is indeed best practice to abstract this run mode concept and not expose it in your front end logic. And for abstraction you can set a data attribute in your HTML and the value of which can be set based on an OSGI Configuration. The OSGI configs are read based on the runmodes automatically by the system.
So you just have to keep different values of the data attribute in OSGI configuration for each run mode. The system will return you the value based on the current AEM running mode and thereby you don't have to worry about run modes in your front end code.