Abstract
Goal
Adobe Experience Manager 2021.10.5933.20211012T154732Z-210900 (Oct 12, 2021)
This post is on making necessary changes in React SPA generated by the maven archetype (https://github.com/adobe/aem-project-archetype) to shorten the URLs eg. /content/eaem-spa-short-urls/us/en/home.html to /us/en/home.html
Solution
1) Create the React SPA maven project using following command...
mvn -B archetype:generate -D archetypeGroupId=com.adobe.aem -D archetypeArtifactId=aem-project-archetype -D archetypeVersion=31 -D aemVersion=cloud -D appTitle="Experience AEM Short URLs" -D appId="eaem-spa-short-urls" -D groupId="apps.experienceaem.sites" -D frontendModule=react -D includeExamples=n -D includeDispatcherConfig=n
2) Create script eaem-spa-short-urls\ui.frontend\src\components\appConstants.js with the following code to give App root url...
?
1
export const PROJECT_URL_ROOT = "/content/eaem-spa-short-urls";
3) Adjust Router code to add the shortened URL in eaem-spa-short-urls\ui.frontend\src\components\RouteHelper\RouteHelper.js
import React, {Component} from 'react';
import {Route} from 'react-router-dom';
import {AuthoringUtils} from "@adobe/aem-spa-page-model-manager";
import {PROJECT_URL_ROOT} from "../appConstants";
export const withRoute = (WrappedComponent, extension) => {
return class CompositeRoute extends Component {
render() {
let routePath = this.props.cqPath;
if (!routePath) {
return ;
}
extension = extension || 'html';
let paths = ['(.*)' + routePath + '(.' + extension + ')?'];
if (!AuthoringUtils.isInEditor() && routePath.startsWith(PROJECT_URL_ROOT)) {
paths.push(routePath.substring(PROJECT_URL_ROOT.length) + ".html");
}
console.log(paths);
// Context path + route path + extension
return (
{
return ;
}}
/>
);
}
};
};
Read Full Blog
Q&A
Please use this thread to ask the related questions.
Kautuk Sahni