AEM React vite

This is a project template for react AEM applications using vite.

Modules

The main parts of the template are:

• core: Java bundle containing all core functionality like OSGi services, listeners or schedulers, as well as component-related Java code such as servlets or request filters.
• it.tests: Java based integration tests
• ui.apps: contains the /apps (and /etc) parts of the project, ie JS&CSS clientlibs, components, and templates
• ui.content: contains sample content using the components from the ui.apps
• ui.config: contains runmode specific OSGi configs for the project
• ui.frontend: an optional dedicated front-end build mechanism (Angular, React or general Webpack project)
• all: a single content package that embeds all of the compiled modules (bundles and content packages) including any vendor dependencies
• analyse: this module runs analysis on the project which provides additional validation for deploying into AEMaaCS

Local Development

• Clone the repository

  git clone https://github.com/andraan/aem-react-vite.git

• Navigate to ui.frontend and execute npm install. The project uses Nodejs v16.

• Go to vite.config.js and comment the plugin viteForAem and then execute npm run dev.

• Note: If you want to directly open it in AEM, don't comment the line of code and open localhost:yourAEMport/content/react-vite/us/en/home.html

• Open localhost: 3000

How to build

To build all the modules run in the project root directory the following command with Maven 3:

mvn clean install

To build all the modules and deploy the all package to a local instance of AEM, run in the project root directory the following command:

mvn clean install -PautoInstallSinglePackage

Or to deploy it to a publish instance, run

mvn clean install -PautoInstallSinglePackagePublish

Or alternatively

mvn clean install -PautoInstallSinglePackage -Daem.port=4503

Or to deploy only the bundle to the author, run

mvn clean install -PautoInstallBundle

Or to deploy only a single content package, run in the sub-module directory (i.e ui.apps)

mvn clean install -PautoInstallPackage

ClientLibs

The frontend module is made available using an AEM ClientLib. When executing the NPM build script, the app is built and the aem-clientlib-generator package takes the resulting build output and transforms it into such a ClientLib.

A ClientLib will consist of the following files and directories:

• css/: CSS files which can be requested in the HTML
• css.txt (tells AEM the order and names of files in css/ so they can be merged)
• js/: JavaScript files which can be requested in the HTML
• js.txt (tells AEM the order and names of files in js/ so they can be merged
• resources/: Source maps, non-entrypoint code chunks (resulting from code splitting), static assets (e.g. icons), etc.

Maven settings

The project comes with the auto-public repository configured. To setup the repository in your Maven settings, refer to:

http://helpx.adobe.com/experience-manager/kb/SetUpTheAdobeMavenRepository.html