How to Set Up a Local AEM 6.5 Environment with React

Step-by-step tutorial for integrating a React SPA into AEM 6.5

Photo by Jesus Kiteque on Unsplash

Installing AEM locally and integrating React for front end is actually more straight-forward than described in the official Adobe documentation.

If you tried to follow their guide and got lost in details or errors, the steps below should help. Follow through and if you encounter errors, please add them in the comments section.

For this tutorial I’m installing everything directly in C:\.

What we’ll cover

1. Install Java & set up the environment variable
2. Install Apache Maven
3. Install Node.js and npm
4. Install AEM 6.5 locally
5. Add the adobe-public-profile to your Maven settings.xml file
6. Customize your IDE for AEM work
7. Generate a new project with the AEM archetype
8. Install React with CRA
9. Integrate React into the AEM instance

In part II, we’ll look at how to Install and integrate the AEM SPA Editor JS SDK.

Install Java 1.8+ and set up the environment variable

Download Java 1.8+ here and install it. Open a new command line and check if the installation was performed properly by running this command:

java -version

You should see something like this:

If it doesn’t say Java (TM) SE Runtime Environment, then you don’t have the correct version.

In order to be able to develop on AEM, you need a development tool called JDK (Java Development Kit), which includes the Java Runtime Environment, the Java compiler and the Java APIs.

The latest version of the JDK can be found here.

Next, we need to make sure that JAVA_HOME environment variable is set and points to the JDK installation from above. Here’s how to do it for Windows 10, if you’re using a different OS, please follow the steps here.

1. In the Windows Search bar, type Control Panel and open it, then click…