Marketplace frontend project and module structure

Edit on GitHub

This document explains the structure of the frontend project in the Spryker Marketplace.


Use the alias @mp/spryker-module-name with the proper Spryker module name to import vendor Angular components, modules or services into .js files, for example, import { registerNgModule } from '@mp/zed-ui'.

Module structure

Below you can find a general structure of every frontend module in the Spryker Marketplace:

    • src/Spryker/Zed/MODULE_NAME
      • Presentation—this is the namespace where the marketplace frontend-related files are located.
        • Components—all Angular files are located here.
          • entry.ts—registers all Angular NgModules via registerNgModule from @mp/zed-ui/app/registry
          • app—contains Angular components and services.
            • components.module.ts—an Angular NgModule with components, such as web components (extends CustomElementModule from @spryker/web-components).
          • public-api—exports all public components / modules / services / types / tokens.
        • TWIG_FOLDER—a folder with twig view.
    • mp.public-api.ts—exports the public-api file.
    • package.json—adds MODULE_NAME specific packages.

Main entry points

The following entry points are needed for the Angular config to build the frontend project.

  • ZedUi (Project)
    • Presentation
      • Components
        • app
          • app.module.ts—a module with the default configuration modules and bootstrap for the web-components.
        • assets—all assets are located here.
        • environment—this folder contains the base configuration file, environment.ts.
        • index.html—entry for html file in the angular.json (not used for Spryker needs, exists for configuration only).
        • main.ts—compiles the web-app and bootstraps the AppModule to run in the browser.
        • polyfills.ts—used to provide modern functionality for older browsers that do not natively support it.
        • styles.less—extends global styles.