Existing Magento 2 setup
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 your server is running Magento 2.4.1.
node -v # should be 12^
You can instal Node using nvm (recommended) or the official guide.
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-cli -v # should output 2.5^
If it is not installed, please follow this guide to obtain it.
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/localmodulescd src/localmodules
Verify that your system has the required tools installed, and create a new theme!
Simply move your ScandiPWA theme into the localmodules directory:
mv ~/Projects/<your-theme> . # path to your themecd <your-theme>
Build or start the application in Magento mode:
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 |
| Yes | Persisted query Redis host |
|
| Yes | Persisted query Redis port |
|
| Yes | Persisted query Redis database |
|
| Yes | Persisted query Redis database |
|
| No | Persisted query Redis password (empty password is not allowed) | empty |
Run the upgrade command and disable full-page caching:
bin/magento setup:upgradebin/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!
