AEM-REACT SETUP INSTRUCTIONS

Required software

• AEM
• Java (1.8)
• Apache Maven (3.3.9 or newer)
• Node.js (16.16.0 version – not working with 17+ !)
• Visual Studio Code IDE
Create SPA archetype project
1. Open cmd (run as administrator!!!)
2. Enter this command (in case of using AEM 6.5.5+, replace aemVersion="cloud" with
aemVersion="6.5.5", but you probably already have cloud version of AEM)
mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate -D
archetypeGroupId=com.adobe.aem -D archetypeArtifactId=aem-project-archetype -D
archetypeVersion=35 -D appTitle="WKND SPA React" -D appId="wknd-spa-react" -D
artifactId="aem-guides-wknd-spa.react" -D groupId="com.adobe.aem.guides.wkndspa.react" -D
frontendModule="react" -D aemVersion="cloud" -D includeDispatcherConfig="n"
Deploy and build the project
1. Ensure an instance of AEM is running locally on port 4502
2. From the command line navigate into the aem-guides-wknd-spa.react project directory.

3. Run the following command to build and deploy the entire project to AEM:

mvn clean install -PautoInstallSinglePackage

- the build will take a few minutes and should end with the following message:

4. Navigate to the Sites console.

5. Open the us > en > WKND SPA React Home Page page by selecting the page and clicking
the Edit button in the menu bar. You should see this:
-In case there is no components shown – you did not choose the right version of AEM during project
creation. Delete the entire project (from windows folder + from AEM instance + packages from
Package Manager), return to the Create SPA archetype project and create it again, but change
aemVersion=" " to the right one!

Add a static SPA component

1. In the Visual Studio Code open your AEM Project, and find ui.frontend folder
 2. In the ui.frontend module, beneath ui.frontend/src/components create a new folder named
Header, inside create a file named Header.js and populate it with the following:

import React, {Component} from 'react';

export default class Header extends Component {
render() {
return (
<header className="Header">
<div className="Header-container">
<h1>WKND</h1>
</div>
</header>
);
}
}

3. Open the file ui.frontend/src/App.js and import Header component

1. import { Page, withModel } from '@adobe/aem-react-editable-

components';
2. import React from 'react';
3. + import Header from './components/Header/Header';
4.
5. // This component is the application entry point
6. class App extends Page {
7. render() {
8. return (
9. <div>
10. + <Header />
11. {this.childComponents}
12. {this.childPages}
13. </div>

4. Right click on ui.frontend and choose Open in Integrated Terminal

5. Run the command to start webpack dev server on localhost:3000 (server for developing
React apps):

npm start

-new window should open in browser:

 6. Return to the IDE and create a file named Header.css in the src/components/Header
folder and populate it with following:

.Header {
background-color: #FFEA00;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.24);
}

.Header-container {
display: flex;
max-width: 1024px;
margin: 0 auto;
padding: 12px;
}

.Header-container h1 {
letter-spacing: 0;
font-size: 48px;
}

7. Re-open Header.js and add the following line to reference Header.css

//Header.js
import React, {Component} from 'react';
+ require('./Header.css');

8. Open the file Page.css at ui.frontend/src/components/Page. Make the following changes to

fix the padding:

.page {
max-width: 1024px;
margin: 0 auto;
padding: 12px;
padding-top: 50px;
}
-if everything is fine, chages should be visible on page on localhost:3000 window immediately

- The changes made to the Header are currently only visible through the webpack-dev-server. Deploy
the updated SPA to AEM to see the changes
9. Deploy SPA updates to AEM – Back to the IDE, right click on base folder of the project
(aem-guides-wknd-spa.react) and choose Open in Integrated Terminal. Run the following
command:
mvn clean install -PautoInstallSinglePackage

-now changes should be visible on AEM as well:

IMPORTANT!!!

New changes would not transfer to the AEM automatically, you need to deploy it every time with
mvn clean install -PautoInstallSinglePackage command (see above).

Once you run webpack dev server with npm start command, you do not need to do it again until
server on localhost:3000 is down.

Server on localhost:3000 can be put down from the console (one where you started it with npm
start) with CTRL + C command. In case you closed that specific console, you can put it down by
running the following command in cmd:

npx kill-port 3000