Expand my Community achievements bar.

SOLVED

Use .env variables in ui.frontend on deployed environment

Avatar

Level 3
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 hereBut 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,
 
1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@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... 



Esteban Bustamante

View solution in original post

4 Replies

Avatar

Community Advisor

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



Esteban Bustamante

Avatar

Level 5

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 !

Avatar

Level 3

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...

Avatar

Correct answer by
Community Advisor

@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... 



Esteban Bustamante