Skip to main content
sean12341
Level 3
August 31, 2023
Solved

Use .env variables in ui.frontend on deployed environment

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,
 
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
EstebanBustamante
EstebanBustamanteAccepted solution
Adobe Champion and Community Advisor
September 1, 2023

@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-aem-as-cloud-service-1e9145d78c2c, 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/deploying/configuring-osgi.html?lang=en#when-to-use-secret-environment-specific-configuration-values 

Esteban Bustamante
View in thread

4 replies

EstebanBustamante
Adobe Champion and Community Advisor
EstebanBustamanteAdobe Champion and Community Advisor
Adobe Champion and Community Advisor
August 31, 2023

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

Translate
Esteban Bustamante
    mahi1729
    mahi1729
    Level 4
    August 31, 2023

    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 !

    Translate
      Terms & ConditionsAccessibility statement

      Loading footer...