The Storefront component, conceptually like the Administration sits on top of the Core. Contrary to the Administration the Storefront is a SalesChannel and executes in the same process as the Core. It is architecturally in part a Backend for Frontends and a classical PHP application with HTML rendering, JavaScrip enhancements (along the lines of gracefull degragation) and SASS styling as an extension of the Bootstrap Framework.

Building Blocks

The Storefront is the least fancy of the components of Shopware 6. If you did some backend development in PHP in the last few years you should find yourself instantly familiar with its structure. The Storefronts main concerns are:

Composite Data Loading (Page, Pagelet)
Contrary to API calls that result in single resource data, a whole page in Storefront displays multiple different data sets on a single page.
Mapping Requests to the Core (Pagecontroller, PageletController)
The Storefront uses the SalesChannel API internally and forwards possibly slightly changed requests to the core.
Rendering templates (page templates)
Contrary to the core that can almost completely omit templating in favor JSON responses, the Storefront contains a rich set of Twig templates to display a fully functional shop.
Theming (styles)
The Storefront not just contains static templates but also inhibits a theming engine to modify the rendered templates or change the default layout programmatically.

These concerns are mapped to a Web-MVC structure:

components storefront

The Core in this case acts as if it were the domain model wrapping all the sales channel logic. The Page and Pagelet represent the read model, the PageController and PageletController work directly on core services and are the write model.

The Template

Contrary to the core that just contains php logic the storefronts template represents a vast part of the functionality of the component. It is worth looking a little deeper into the /Resources directory to gain a deeper understanding how the storefront works. When opening the directory you find these subfolders.

└── assets
└── build
└── config
└── src
    └── script
    └── style
└── tests
└── views
└── .babelrc.js
└── .browserlistrc
└── .eslintignore
└── .eslintrc.js
└── .gitignore
└── jest.config.js
└── package-lock.json
└── package.json
└── postcss.config.js
└── stylelint.config.js
└── webpack.config.js

It is a node application, but for build purposes only! Again long time webdevelopers find a familiar structure, with assets (Static images and icons), views (Twig) and src (JavaScript asn SCSS) among a few internally important files. The storefronts template is based on the Bootstrap toolkit and therefore fully skinable.