How to implement translations i18n on AEM 6.5 SPA (React) Application

Avatar

Avatar
Boost 1
Level 1
Monica_A
Level 1

Like

1 like

Total Posts

2 posts

Correct reply

0 solutions
Top badges earned
Boost 1
View profile

Avatar
Boost 1
Level 1
Monica_A
Level 1

Like

1 like

Total Posts

2 posts

Correct reply

0 solutions
Top badges earned
Boost 1
View profile
Monica_A
Level 1

06-04-2021

Hello All,

 

We are building SPA site using react framework. We want to leverage Adobe Granite i18n dictionary for translations.

 

The issue is since SPA will be out side of AEM first before building it as AEM clientlib, we are getting compilation errors while referring to Granite i18n api (as Granite reference is not available to react during compilation)

 

As an option we are planning to expose dictionary as REST service (servlet) to React application (ui.frontend). Because of this approach there will be huge load on the page when the json grows more.

Instead is there any other way to avoid these compilation errors in react and use client side Granite i18n api in SPA?

Or do we have to follow any different way of implementing i18n for SPA website in AEM 6.5? 

 

Any pointers would be of great help. Please advise. Thank you.

 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Boost 100
Level 7
rush_pawan
Level 7

Likes

124 likes

Total Posts

192 posts

Correct reply

79 solutions
Top badges earned
Boost 100
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Boost 100
Level 7
rush_pawan
Level 7

Likes

124 likes

Total Posts

192 posts

Correct reply

79 solutions
Top badges earned
Boost 100
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile
rush_pawan
Level 7

06-04-2021

Why don't you consider creating your data dictionary inside /etc area and access it through client side because you will not be enforced for security of accessing resources if creates under /apps (similar pattern we are following in those specific use cases)

 

There are OOTB AEM Client Side HTTP call API to access such resources

 

as an example:

 

var pagePath = CQ.WCM.getPagePath();

//page locale can be received other way also, its just an example
var pageResponse = CQ.utils.HTTP.get(pagePath + '/jcr:content.1.json');
eval('var pageData=' + pageResponse.responseText);
var pageLocale = pageData['jcr:language'];


if (Granite.I18n) {
Granite.I18n.setLocale(pageLocale);
Granite.I18n.setUrlPrefix("/etc/yourprojectpath/i18n/");
Granite.I18n.setUrlSuffix(".1.json");
propName ="keyname";
propValue = Granite.I18n.get(keyNames[i])['sling:message'];
}

 

earlier the library path located at /etc/clientlibs/granite/utils but later it replaced with /libs/clientlibs/granite/utils and showing as deprecated but not sure its hanging from long time.

 

Please check and explore this category " granite.utils" as we have customized and created our own based on need.

 

but yeah, its another way of looking at solving dictionary issue if you dont want to take server route everytime.

 

(you can call your library directly through path rather depending on category as needed, depend on use case again)

 

hope it helps!!

Answers (0)