AEM Cloud Service - Url Shortening of React SPA | AEM Community Blog Seeding

[kautuk_sahni]

AEM Cloud Service - Url Shortening of React SPA by Sreekanth Choudry Nalabotu

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

AEM Cloud Service - Url Shortening of React SPA

Q&A

Please use this thread to ask the related questions.

[Yonit]

is this applicable to non-spa react components?