Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Vue configs in AEM

sateeshk9319722
Level 2
Level 2

Hello all,

We have created the config folder in vue project the hierarchy is something like this :

-config

 -dev.env.js

-prod.env.js

and how the configurations will pick when this bundle has deployed into AEM.

Or need some assistance on how to manage such things based on the environment in Vue+AEM.

 

Many Thanks,

 

1 Accepted Solution
BrianKasingli
Correct answer by
Community Advisor
Community Advisor

@sateeshk9319722

You can integrate build scripts in the package.json where a specific build script will build the environment variables into the bundle.js during webpack or gulp JavaScript compilation.

Take example: https://github.com/adobe/aem-project-archetype/blob/master/src/main/archetype/ui.frontend.angular/pa...

Or if your environment values are stored in the AEM server as JSON, you can utilise run modes, and OSGI configurations, to render the path of the configuration apart of the HTML page, then use JavaScript to make an XHR (request) to the request from the path.

 

<div class="global-config" data-global-config="/en-gb.global.json"></div>

 

View solution in original post

1 Reply
BrianKasingli
Correct answer by
Community Advisor
Community Advisor

@sateeshk9319722

You can integrate build scripts in the package.json where a specific build script will build the environment variables into the bundle.js during webpack or gulp JavaScript compilation.

Take example: https://github.com/adobe/aem-project-archetype/blob/master/src/main/archetype/ui.frontend.angular/pa...

Or if your environment values are stored in the AEM server as JSON, you can utilise run modes, and OSGI configurations, to render the path of the configuration apart of the HTML page, then use JavaScript to make an XHR (request) to the request from the path.

 

<div class="global-config" data-global-config="/en-gb.global.json"></div>

 

View solution in original post