ScandiPWA is developed by Scandiweb as a replacement for the Magento 2 SSR front-end. It implements a presentation for most features of Magento 2 and covers most entities.

How does ScandiPWA interact with Magento?

The ScandiPWA stack was built to support two modes of interaction with Magento:

• Magento theme mode - In Magento theme mode, the Magento is responsible for request routing. This means Magento Controllers (What is Controller?) and Magento URL rewrites (What are URL rewrites?) could be used. This allows the implementation of advanced SEO patterns.

  Magento Mode Setup

  <aside> ➡️ In production, ScandiPWA is typically used in Magento theme mode.

  </aside>

• Storefront mode - As you may see, in storefront mode, ScandiPWA and Magento are hosted separately. This means that in storefront mode, ScandiPWA has SEO issues because URL rewrites are not properly handled (What are URL rewrites?). The storefront mode is generally used for local development. It allows the use of remote Magento instances as a data source.

  Storefront Mode Setup

ScandiPWA, being a SPA (single-page application), requires an API for data retrieval. This is achieved in both modes using Magento 2 to provide the GraphQL API for this purpose.

How to work with requests?

What technologies are used to simplify the integration?

To make the development in both modes easier, we introduced multiple toolchains to streamline the setup process:

• Create Magento App (CMA) – a toolchain that allows you to setup Magento 2 applications on your computer or server in a single command.
• Create ScandiPWA App (CSA) – a toolchain that implements the Override Mechanism, application plugins, and both building modes. It allows the creation of ScandiPWA applications in a single command.

It is common to install both ScandiPWA and Magento on the local machine to develop efficiently. The following open-source technologies are made by the ScandiPWA team:

What is the Create ScandiPWA App(CSA)?

Create ScandiPWA App is an officially supported way to create ScandiPWA applications. It offers a modern build setup with no configuration.

• With a CRACO (Create React App Configuration Override) plugin on top, we can use all Create React App features and still be able to customize ESLint, Babel, and other configurations.
• Create ScandiPWA App implements Override and Plugin mechanisms on top of CRACO. It can be used to develop React applications while enjoying an enhanced development experience.

What is the Create Magento App(CMA)?

When it comes to the back-end development, we introduce you to the Create Magento App - the fastest way of setting up Magento locally. This deployment technology combines two powerful approaches of containerization and Infrastructure as code to provision you with a Magento 2 instance in minutes.

With just one command line, you can link your Create Magento App together with your Create ScandiPWA App, and build your Magento 2 PWA store locally.