Intershop Commerce Management (ICM) The Intershop Commerce Management (ICM) provides the necessary data for running the default Intershop PWA deployment via a REST API. Since release 0.23, it uses the new headless application type (see Migrations / From 0.22 to 0.23). Using another backend is also possible

Different Levels of Testing Testing the PWA follows the basic principle of the test pyramid (https://martinfowler.com/bliki/TestPyramid.html). Unit Most of the testing should be done in low-level unit tests if possible. These tests concern themselves with the behavior of a single unit of code, be it

Declare Components in the Right NgModule Angular requires you to declare a component in one and only one NgModule. Find the right one in the following order: Your Component is used only on one page? - Add it to the declarations of the corresponding page.module. Your Component is used among multiple pages

Building To simply build the Intershop PWA in server-side rendering mode, you can use the package.json script npm run build , which builds the Intershop PWA with the production configuration of the angular.json with the default theme. Afterwards you can start the application with npm run serve (or do

Quick Start Before working with this project, download and install Node.js with the included npm package manager. Currently Node.js 18.16.0 LTS with the corresponding npm 9.5.1 is used for development. The project uses Angular CLI which has to be installed globally. Run npm install -g @angular/cli once

File Name Conventions In accordance with the Angular Style Guide and the Angular CLI convention of naming generated elements in the file system, all file and folder names should use a hyphenated, lowercase structure (kebab-case). camelCase should not be used, especially since it can lead to problems

Accessibility General Attributes and Roles Titles instead of ARIA-Attributes Usage of native HTML-Elements ESLint Rules Accessibility Plugin Additional Rules Project specific Applications How to fix click-events-have-key-events problems Form Submission using the key "Enter" Form submission in dialogs

Forms File and Naming Conventions Reusable Form Components Page Specific Form Components Data Models Services Extensions Form Behavior General Rules Usage of Formly, Template Driven and Reactive Forms Validators Keep Templates Simple Further References The Intershop PWA has switched to using formly

Introduction Several ICM REST operations require an authenticated user. Authentication also assures enterprise information security. In the PWA a user can be verified with the help of an identity provider. An identity provider (IdP) is a service that stores and manages digital identities. The following

Introduction The Intershop REST API contains resources reflecting the aspects of Intershop's integrated Content Management System (CMS), i.e. Pagelets, Includes, Pages. Calling the /cms resource will list the available CMS sub resources for the different CMS artifacts. { "elements": [ { "type": "Link"

NGINX Optimizations The NGINX building block applies: Compression of responses ngx_brotli is used to compress files on NGINX because Brotli has a better compression ratio compared to gzip. The configuration of the module is described in Guide - Building and Running NGINX. Note Brotli compression is typically

This concept documents our approach for search engine optimization for the Intershop Progressive Web App. Server Side Rendering The PWA uses Universal for pre-rendering complete pages to tackle SEO concerns. An Angular application without Universal support will not respond to web crawlers with complete

This section provides an overview of required continuous integration steps to verify the validity of code contributions. All mentioned tools provide feedback on success or failure via exit code. Code Integrity Since Angular projects are JavaScript-based, even though they use TypeScript-based code, everything

For our Intershop Progressive Web App, Compodoc is used as documentation package. For documentation, the tsconfig.doc.json file is used as configuration file. The output folder for the documentation is set to /docs/compodoc. We use an own styling theme based on the theme 'readthedocs' provided by Compodoc

The PWA uses ESLint for static code analysis and to enforce best practices. In order to use ESLint with Angular, we use the typescript-eslint and angular-eslint packages extensively. The PWA's ruleset is configured in .eslintrc.json and includes base rulesets to extend from, plugins with additional rules

This document describes the authentication mechanism if punchout is used as identity provider. If you need an introduction to this topic, read the Authentication Concept first. Configuration The PWA must be configured in a specific way to use punchout as an identity provider. Apart from the enabled punchout

When to Write Cypress Tests? With Angular most of the functionality of simple components or artifacts of the state management can be tested with Unit Tests. However, when testing multiple artifacts at once, the TestBed definition can take a big amount of work. Also considering, that not the real runtime

The visual design (styling) and the interaction design (behavior) of the Intershop Progressive Web App is derived from the Responsive Starter Store with some changes (e.g., the header) to improve and modernize the customer experience and to provide an easy optical distinction between the two Intershop

Developers Getting Started Architecture Concept - Software Architecture Concept - Project Structure Concept - State Management Guide - State Management Guide - Product Context Concept - CMS Integration Concept - Configuration Guide - Propagating Environment Variables Concept - Localization Concept -

Thank you for your interest in the Intershop PWA project. We look forward for any kind of contribution. Code of Conduct We have adopted the Contributor Covenants Code of Conduct and we expect project participants to adhere to it. Please read and follow our Code of Conduct. Non-Code Contributions You