AEM-REACT SETUP INSTRUCTIONS
Required software
• AEM
• Java (1.8)
• Apache Maven (3.3.9 or newer)
• [Link] (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 [Link]:maven-archetype-plugin:3.2.1:generate -D
archetypeGroupId=[Link] -D archetypeArtifactId=aem-project-archetype -D
archetypeVersion=35 -D appTitle="WKND SPA React" -D appId="wknd-spa-react" -D
artifactId="[Link]" -D groupId="[Link]" -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 [Link] 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 [Link] folder
2. In the [Link] module, beneath [Link]/src/components create a new folder named
Header, inside create a file named [Link] 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 [Link]/src/[Link] 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. {[Link]}
12. {[Link]}
13. </div>
4. Right click on [Link] 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 [Link] 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 [Link] and add the following line to reference [Link]
//[Link]
import React, {Component} from 'react';
+ require('./[Link]');
8. Open the file [Link] at [Link]/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
([Link]) 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
