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

This document describes the main authentication mechanism if the ICM server is used as identity provider. If you need an introduction to this topic, read the Authentication Concept first. Login If the user wants to login by clicking a login link or navigating to the /login route, either a popup or a

Intershop Commerce Management supports logging in clients via SSO (see Concept - Single Sign-On (SSO)). The PWA uses the library angular-oauth2-oidc to support an easy configuration for providing access to identity providers. After setting up the ICM side with the identity provider, an implementation

If the ICM is set up with URL Rewriting, further modifications are required to run the deployment with the Hybrid Approach. The examples in this guide follow the default example for ICM URL rewriting. In particular we want to focus on the following two examples: Product Detail Pages of the ICM URLs are

In order to be a Progressive Web Application, the Intershop PWA implements some advanced concepts matching those criteria. Web App Manifest The Web App Manifest enables the PWA to be installable on home screens of mobile devices. The application is easily accessible via a generated link and branding