Building the Merchant Portal frontend

This document provides details about building the frontend part of the Merchant Portal.

Spryker uses webpack to build frontend. At its core, webpack is a static module bundler for modern JavaScript applications. As webpack processes an application, it builds an internal dependency graph that maps every module that the project requires and generates one or more bundles.

• All related configs are located in the /frontend/merchant-portal folder.
• The built-in frontend stuff (css, fonts, images, js) is in the /public/MerchantPortal/assets folder.

Modules for Merchant Portal are split into composer modules, and each module has its own application in the form of an Angular Module with Angular+Web Components. Every module has an entry point called entry.ts that is collected during the build as webpack entries and included in the Merchant Portal build as a chunk. Those chunk names are taken from the module name and then transformed into a kebab-case.

General structure of the frontend modules in the Spryker Marketplace can be found in the Module structure.

The frontend of the Merchant Portal is built using the following commands:

• default build

  npm run mp:build
  

• build in the watch mode

  npm run mp:build:watch
  

• production build

  npm run mp:build:production