Home

Objective

This fork extended the tutorial that Adobe created for myself and others to use. I created this fork so that I remember the core concepts that I may need in the future for my team.

Additional Tutorial

Additional tutorial branch that I created:

• react/chapter-4/custom-component: Illustrate a simple Alert component using React Bootstrap to help understand how custom component work in AEM-React. See the Wiki Page for certain aspects of the code
• react/chapter-6/dynamic-container: Illustrate the use of parsys to add other components into Accordion dynamically. Again, key concepts are explained in the following Wiki Page

Building the application

To build any of the branch, I kept the same command line as the original tutorial:

mvn -PautoInstallPackage -Padobe-public clean install

In my case, sometimes, I just want to send a build package containing the page with components to test to the testing team without the AEM connection. To do so, I have done the following:

1. Use serve to serve the build file
2. Configuring serve to do SPA
3. Populate the JSON for testing

Included in serve.json, I've included the following:

{
  "rewrites": [
  	{ "source": "content/**/*.jpeg", "destination": "/images/mock-image.jpeg" },
  	{ "source": "content/**/*.json", "destination": "/mock.model.json" },
    { "source": "content/**", "destination": "/index.html" }
  ],
  "cleanUrls": false
}

Where we redirect all images/json to redirect to mock images and redirect the page routing to index.html. In my case, the clean URLs are disabled so that the .html is not stripped from the URL Path. If you use any other web server, the react app documentation covers the necessary setup for those web servers (Apache, Tomcat)