Magento theme

ScandiPWA theme is capable of being bundled into the valid Magento theme. However, in order to do it, the theme must have the @scandipwa/m2-theme extension installed.

Heads up!

The @scandipwa/m2-theme extension is bundled by default with @scandipwa/scandipwa starting from version 2.3.5 and onward. You do not need to install this extension separately if your parent theme is set to@scandipwa/scandipwa.

In order to install this extension, run ScandiPWA CLI command from the theme root:

scandipwa extension install @scandipwa/m2-theme

Enabling this extension will allow your ScandiPWA to behave just like the valid Magento 2 theme. If you set the environment variable BUILD_MODE equal to magento the behavior of the npm run start and npm run build will change.

npm run start or yarn start

BUILD_MODE=magento npm run start # Mac, Linux
set BUILD_MODE=magento && npm run start & set BUILD_MODE= # Windows

This command will now watch the files and put their compiled versions into the magento/Magento_Theme folder.

npm run build or yarn build

BUILD_MODE=magento npm run build # Mac, Linux
set BUILD_MODE=magento && npm run build & set BUILD_MODE= # Windows

This command will now create the production build of the application in magento/Magento_Theme folder.

Composer dependencies validation

Additionally, the validation of composer.json in the theme root will be activated. The extension will make sure the composer packages specified in the scandipwa.composer filed of your parent themes and extensions package.json files are reflected in your theme's composer.json. This is required when connecting to Magento 2 instances.

Deploying from local composer repository

To deploy ScandiPWA as Magento 2 theme, you will need a running Magento 2 instance. Copy your ScandiPWA theme with @scandipwa/m2-theme extension installed to your Magento 2 server.

1. Build ScandiPWA into Magento theme using the npm run build command with BUILD_MODE environment variable equal to magento. You must do it from the ScandiPWA theme root.

2. From the Magento theme root, add the path to your theme root as a local composer repository. You can use the following command: composer config repo.theme path <path to scandipwa root>

3. Now require your theme composer package using the composer require <composer package name>. The name of your composer package is defined in name field of the composer.json file.

Developing from local composer repository

You can also develop ScandiPWA in the Magento theme mode, in order to do that:

1. Disable Magento 2 full-page cache: bin/magento cache:disable full_page

2. Start ScandiPWA in development mode using the npm run start command with BUILD_MODE environment variable equal to magento. You must do it from the ScandiPWA theme root.

3. From the Magento theme root, add the path to your theme root as a local composer repository. You can use the following command: composer config repo.theme path <path to scandipwa root>

4. Now require your theme composer package using the composer require <composer package name>. The name of your composer package is defined in name field of the composer.json file.