Installation on existing Magento server

The ScandiPWA theme integrates seamlessly with Magento

You might want to install ScandiPWA as a Magento theme – and this is supported out of the box! You can install the theme as a local composer module, continuously build it, and Magento will be able to recognize it as a valid Magento theme. Then, you will be able to select your ScandiPWA-based theme in the Magento configuration.

If you are using Create Magento App you're lucky! It has a built-in ScandiPWA linking function built-in. Refer to it's documentation for more details.

Prerequisites

If you are installing on an existing Magento server, it needs to meet the requirements outlined below. The Docker setup already has these requirements installed.

Make sure your server is running Magento 2.3.3, or 2.3.5. Version 2.3.4 is not supported. Make sure your server is configured to point into <MAGENTO ROOT>/pub directory.

Node v10+

node -v # should be 10^

You can instal Node using nvm (recommended) or the official guide.

Varnish v5+

varnishd -V # should be 5^

In Magento admin go to Stores > Configuration > Advanced > System > Full Page Cache. Make sure the Varnish Cache is selected in the dropdown, varnish configuration has proper values set in it.

If it is not, please follow official documentation to set it up.

Redis v2.5+

redis-cli -v # should output 2.5^

If it is not installed, please follow this guide to obtain it.

Install the Theme as a Local Module

We recommend you keep your theme source in a src/localmodules directory. You will then be able to configure composer to install the theme from here as a local module.

mkdir src/localmodules
cd src/localmodules
If you already have a theme
If you're just getting started
If you already have a theme

Simply move your ScandiPWA theme into the localmodules directory:

mv ~/Projects/<your-theme> . # path to your theme
cd <your-theme>
If you're just getting started

Verify that your system has the required tools installed, and create a new theme!

Run the compilation process in magento mode:

yarn (recommended)
npm
yarn (recommended)
BUILD_MODE=magento yarn start
npm
BUILD_MODE=magento npm start

You will need to keep this process running – it continuously re-builds the theme when changes are made. Open a new terminal tab to enter new commands.

Now the new theme is created, but we need to install it using composer. The changes we need are easiest to make from within the docker container, so start the app and gain bash access to it:

From the project root
dc up -d
inapp bash # to enter the app container

We will install the newly-created theme by taking advantage of Composer's ability to install from local repository sources. First, we add our theme as a local repository source. This will alter composer.json to add a new item in the repositories field:

(from within the app container)
composer config repo.theme path localmodules/<your-app-name>

Next, we install our theme by using require. This will resolve the package to the localmodules directory we configured above:

(from within the app container)
composer require scandipwa/<your-app-name>

Enabling the Theme

Run the upgrade command and disable full-page caching:

(from within the app container)
bin/magento setup:upgrade
bin/magento cache:disable full_page

It is now time to enable the new theme. In the Magento admin panel, navigate to Content > Design > Configuration. Edit the scope you want to change (typically the most general one in the list), and select the new theme. Finally, flush the cache:

(from within the app container)
bin/magento cache:flush

If your theme is not shown, set the type of your theme in the theme Magento table to 4. This is a bug in ScandiPWA that will soon be fixed.

The new theme should now be served on the frontend. Congratulations, you now have a ScandiPWA Magento Theme!