The compose project is designed as the base for all AEM Design components, functionality, and behaviour. It encapsulates static assets, JavaScript, CSS and a styleguide project within that controls the DLS (Design Language System).
- Content generator - for generating content for AEM using YAML
- ITCSS Sass structure
- TypeScript driven JavaScript
- Vue.js components as widgets
Getting going is pretty simple, you will, however, need to make sure you have the below installed first to ensure a smooth and consistent experience with other developers.
- Node >= 10 (required)
- Yarn >= 1.10.0 (version required for hash compatibility)
- TypeScript enabled IDE (VS Code or an IDE plugin)
- ESLint (required)
- Stylelint (required)
- EditorConfig (required)
- An AEM instance that has project installed (required)
Once you have met the requirements above, install the npm packages by simply running:
yarn
Run ./deploy-local and the Compose module will installed into your local AEM instance. If you like sourcemaps and debugging you can run ./deploy-local-dev which is a non-production build.
All local development uses webpack-dev-server which proxies to your local AEM instance and provides real time updates without needing to constantly deploy manually. The beneift to manual deployments is that we get:
- HMR support
- Real time change support
- Proper debugging via an IDE
- True sourcemaps
Visit http://localhost:4504 in your browser once webpack-dev-server has started.
NOTE: You can only run one project at a time!
yarn serve:core
The DLS is its own project to remove any duplicate/irrelevant code from the final website builds. This allows us to have specific deployments for DLS while maintaining a clean codebase for other projects.
yarn serve:dls
All code in the project is linted both in your IDE (where supported) and during compilation. This is to ensure that bugs and issues can be fixed before going out and ensures consistency between developers. ESLint is used across all projects.