Existing Magento 2 setup
The ScandiPWA theme integrates seamlessly with Magento
You might want to install ScandiPWA as a Magento theme (without using Create Magento App) – 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. Read how to setup ScandPWA with CMA in minutes!
Prerequisites
Make sure that you have a supported Magento version! Also, make sure your server is configured to point into
<MAGENTO ROOT>/pub directory.Node v14+
1
node -v # should be 14^
Copied!
Varnish v5+
1
varnishd -V # should be 5^
Copied!
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.Redis v2.5+
1
redis-cli -v # should output 2.5^
Copied!
Install the ScandiPWA theme with Composer
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.1
mkdir src/localmodules
2
cd src/localmodules
Copied!
If you're just getting started
If you already have a theme
Simply move your ScandiPWA theme into the
localmodules directory:1
mv ~/Projects/<your-theme> . # path to your theme
2
cd <your-theme>
Copied!
Build or start the application in Magento mode:
yarn (recommended)
npm
1
BUILD_MODE=magento yarn start # or build
Copied!
1
BUILD_MODE=magento npm start # or build
Copied!
If you chose
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. 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:1
composer config repo.theme path localmodules/<your-app-name>
Copied!
Next, we install our theme by using
require. This will resolve the package to the localmodules directory we configured above:1
composer require scandipwa/<your-app-name>
Copied!
Configure persisted-query
For improved ScandiPWA query caching to work, you must configure
scandipwa/persisted-query. For convenience, there are additional flags available for php bin/magento setup:config:set command:Flag
Required?
Description
Example
--pq-hostYes
Persisted query Redis host
127.0.0.1--pq-portYes
Persisted query Redis port
6379--pq-databaseYes
Persisted query Redis database
5--pq-schemeYes
Persisted query Redis database
tcp--pq-passwordNo
Persisted query Redis password
(empty password is not allowed)
empty
Enable the ScandiPWA Theme
Run the
upgrade command and disable full-page caching:1
bin/magento setup:upgrade
2
bin/magento cache:disable full_page
Copied!
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:
1
bin/magento cache:flush
Copied!
The new theme should now be served on the frontend. Congratulations, you now have a ScandiPWA Magento Theme!
Last modified 7mo ago