Build and Optimization

Edit on GitHub

We use Webpack and Oryx for transpiling/building the assets and to optimize the resulting output.

For more on Webpack build process and requirements see:

Learn more about Spryker Oryx frontend helper:

Automatic loading for Webpack Entry Points

Oryx’s globbing system, enables Webpack to automatically find and load entry points.


On a project level, you can pass your own entry points directly in the Webpack configuration. We recommend also using theoryx.find() API to import any Yves related code. This way, you will get every frontend feature developed in the core (for example, payments method UI).

const settings = {
    entry: {
        dirs: [path.resolve('vendor/spryker')],
        patterns: ['**/Yves/**/*.entry.js'],
        defineName: p => path.basename(p, '.entry.js'),
        description: 'looking for entry points...'

const webpackConfiguration = {
    // ...
    entry: oryx.find(settings.entry, {
        'your-entry-name': '/path/to/your/entry/point.js'
    // ...

**/Yves/**/*.entry.js is the default pattern for Yves automatic inclusion: every filename endings with .entry.js and contained in a parent folder called Yves will be included by webpack into the build process.


Zed frontend is fully managed by Oryx for Zed. It relies on the oryx.find() API to automatically globb the entry point files across the project.

To add or change entry points in Zed, extend the Oryx for Zed Webpack configuration.

For more about Zed assets management: