Use .env variables in ui.frontend on deployed environment

[sean12341]

Sorry if this is a basic question, but how do we use .env in `ui.frontend` for a deployed instance?

In my local AEM Cloud project, I have an .env file in my `ui.frontend` module's root folder, and my webpack.common.js file loads that .env file per below, so I can access them in my `ui.frontend` javascript files using `process.env.API_KEY`.

const Dotenv = require("dotenv-webpack");
//...
plugins: [
    new Dotenv(),
    //...
]

Of course, I am not including the .env file when pushing and deploying, so I need to set them in the deployment configuration.

I know I can set the env variables as part of the configuration at per Adobe doc here. But I am not sure how to access it in my ui.frontend javascript as it only mentions accessing it via XML, or if this is the proper way.

Thank you,

[EstebanBustamante]

Hi,

You cannot use environment variables directly in your JS files, you will still have to rely on adding your key in an OSGI config, but you could try something like this:

1. Keep your API Key in an OSGI config and expose it through a SlingModel Then you can append this value directly in your HTML, so you can grab it using JS. 

==== HTL =====
<sly data-sly-use.model="com.myproject.MyModel"/>
<div id="myKey" data-api-key="${model.apiKey @ context='html'}"/>
==== JS (using Jquery) =====
const myApiKey = $(#myKey).data("apiKey");

2. Keep your API Key in an OSGI config and expose it through a SlingModel and then expose the value in a global JS variable,

==== HTL =====
<sly data-sly-use.model="com.myproject.MyModel"/>
<script>
var myApiKey = "${model.apiKey @ context='scriptString'}"
</script>
==== JS  =====
window.myApiKey 

Hope this helps

[mahi1729]

Unsure if your frontend app is just a normal module or an SPA. If its a normal module supporting your sites, I suggest you to rethink the idea of exposing any critical/sensitive information like api keys to the clientside. Instead of it you can have a backend servlet doing secure communication for you by validating the client information. But lets say you are looking for managing some variables for easy access on client side and not necessary sensitive, then use webpack's define plugin. This allows creation of custom variables and you will maintain them in your webpack config file itself.https://webpack.js.org/plugins/define-plugin/ And if this is a SPA and using create react app you can probably create every env variable using REACT_APP_ prefix e.g REACT_APP_EMAIL_API_URL and those will be available for access  in your code as well. You can try if this is the use case. Thanks !

[sean12341]

Thanks @EstebanBustamante , @mahi1729 

If I understand your approach, we will still have to commit the OSGi config into our remote repositories. This would be an issue as we don't want any secret api keys to be exposed at all.

Yes we agree that it is best to store sensitive data in the backend, but our problem is more that we don't want to commit those data to any remote repository at all, thus the use of .env files. Btw I am using a normal ui.frontend module.

Looking at the Adobe doc, I do wonder if there is a way to get the environmental variables from pom.xml files into Sling models...

[EstebanBustamante · Accepted solution]

@sean12341 

I thought it was clear that you must use Cloud Manager variables in the OSGI that you will commit to your git repositories, that way, the API key won't be exposed as I suggested.

Here is an example of what i am explaining https://medium.com/slalom-technology/how-to-use-environment-variables-in-adobe-experience-manager-ae... on top of that, you can follow the approach i suggested to grab the value in JS

You should commit something like this:

{
"apiKey": "$[secret:mycloudmanager-api-key-var]"
}

Hope this makes sense.

 Reference: https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/implementing/deploy...