const Dotenv = require("dotenv-webpack");
//...
plugins: [
new Dotenv(),
//...
]
Solved! Go to Solution.
Views
Replies
Total Likes
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.
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
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 !
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...
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.
Views
Likes
Replies
Views
Likes
Replies