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!
Make sure that you have a supported Magento version! Also, make sure your server is configured to point into
<MAGENTO ROOT>/pub directory.node -v # should be 14^
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.redis-cli -v # should output 2.5^
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'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>
Build or start the application in Magento mode:
yarn (recommended)
npm
BUILD_MODE=magento yarn start # or build
BUILD_MODE=magento npm start # or build
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: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:composer require scandipwa/<your-app-name>
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-host | Yes | Persisted query Redis host | 127.0.0.1 |
--pq-port | Yes | Persisted query Redis port | 6379 |
--pq-database | Yes | Persisted query Redis database | 5 |
--pq-scheme | Yes | Persisted query Redis database | tcp |
--pq-password | No | Persisted query Redis password
(empty password is not allowed) | empty |
Run the
upgrade command and disable full-page caching: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:
bin/magento cache:flush
The new theme should now be served on the frontend. Congratulations, you now have a ScandiPWA Magento Theme!
Last modified 1yr ago