Building a Project in AEM 6.5 with React Integration | AEM Community Blog Seeding

[kautuk_sahni]

Building a Project in AEM 6.5 with React Integration by Embitel

Abstract

React is the most favorite programming language amongst front-end developers ever since its release in 2015. Adobe Experience Manager (AEM), one of the sought-after Content Management Solutions (CMS), is preferred by most companies across the globe. Imagine the kind of impact it is going to make when both are combined; they will surely bring incredible changes in websites and mobile applications.

Not many know that installing AEM on local and integrating React for the front- end is pretty simple.

Now even AEM as a cloud service has react as inbuilt program into its archetype as part of Adobe’s best practices known to its Headless CMS architecture.

We have come up with a comprehensive step-by-step guide to help you out while working on AEM 6.5 and React integration.

Introduction
AEM has multiple options for defining headless endpoints and delivering its content as JSON. Building a React JS app in a pure Headless scenario.

JavaScript Object Notation (JSON) is strictly a text-based format used to represent structured data and is based on JavaScript object syntax. Its lightweight format enables to store and transport data. It is possible for a JavaScript program to convert JSON data into native JavaScript objects.

Another interesting fact is, JSON data code can be written in any programming language.


Setup
Install Java 1.8+ and setup the environment variable Environment Variable with JAVA_HOME/bin
Install Apache Maven 3.3.39+ and setup the environment variable Environment Variable with MAVEN_HOME/bin
Install Node.js v10+ and npm v6+. For front end, we need Node.js and npm installed. Node comes with npm so once the installation is done, please check if both tools were added to system by running these commands in command line node -v npm -v Which will print the version.
Installation of AEM and React steps explained in upcoming blocks

AEM and React
Install AEM 6.5 locally.
Please have the .jar file and license provided; the package should look like this.
Extract the JAR
Either through double-click on JAR or through command line with command
java -jar aem-author-4502.jar

Read Full Blog

Building a Project in AEM 6.5 with React Integration

Q&A

Please use this thread to ask the related questions.