How to install ScandiPWA – the Progressive Web App theme for your Magento stores

What is ScandiPWA:

ScandiPWA is the Progressive Web App theme for Magento stores. It is an offline-ready, ultra-fast, open-source PWA solution based on React and Redux. ScandiPWA leverages technologies like Varnish, GraphQL, and Redis to help improve your PWA site performance. In this blog, we will learn how to install the ScandiPWA theme on your Magento store.

Here are the prerequisites:

  • Magento Version: 2.4.1 or Higher.
  • Node: v14+
  • Varnish: v5+
  • Redis: v2.5+

Install ScandiPWA Theme:

1. The first step is to go to the Magento admin and then go to Stores > Configuration > Advanced > System > Full Page Cache. Ensure that the Varnish Cache is selected from the dropdown list. Varnish configuration has got proper values set in it.

2. We recommend you to keep your ScandiPWA theme source files in a src/localmodules on your magento root directory. Then you will be able to configure the composer to install the theme from here.

mkdir src/localmodules
cd src/localmodules
yarn create scandipwa-app my-app
cd my-app
BUILD_MODE=magento yarn start (or) BUILD_MODE=magento yarn build

4. If you choose start you will need to keep this process running. It will rebuild the theme continuously when the changes are being made.

5. Now the new theme has been created, but we need to do the installing with Composer.

6. Navigate to the magento root folder and enter the following commands.

7. Add the scandiPWA theme as a local repository source to make changes to composer.json so as to add a new item in the repositories field.

composer config repo.theme path localmodules/my-app

8. Next, we install our theme by using the require keyword. This will resolve the package to the local modules directory we configured above.

composer require scandipwa/my-app

Configure persisted-query:

1. You must configure scandipwa/persisted-query for improved ScandiPWA query caching to work.

FlagDescriptionExample
–pq-hostPersisted query Redis host127.0.0.1
–pq-portPersisted query Redis port6379
–pq-databasePersisted query Redis database5
–pq-schemePersisted query Redis schemetcp
–pq-password (Optional)Persisted query Redis password
(Note: empty password is not allowed here)
empty

Syntax:

php bin/magento setup:config:set

Example Command:

php bin/magento setup:config:set –pq-host=127.0.0.1 –pq-port=6379 –pq-scheme=”tcp” –pq-database=5

2. Alternatively you can also set those configurations directly in app/etc/env.php under cache key:

‘cache’ => [
‘persisted-query’ => [
‘redis’ => [
‘host’ => ‘‘,
‘scheme’ => ‘tcp’,
‘port’ => ‘

‘database’ => ‘5’
]
]
]

Enable the ScandiPWA Theme:

1. Run the upgrade command and then disable full-page caching.

bin/magento setup:upgrade
bin/magento cache:disable full_page

2. It is time to enable the new scandiPWA theme. Go to the Magento admin panel and then navigate to Content > Design > Configuration. Edit the scope you want to change (typically the most general one in the list), and select the my-app theme.

Enable the ScandiPWA Theme

3. Finally, flush the magento cache.

bin/magento cache:flush

4. Refresh the page and the scandipwa theme is successfully enabled and displayed on the store frontend.

About Author

JeyaMurugan – Jeyamurugan, Software Engineer, is very passionate about solving eCommerce problems that are challenging and loves to explore new technologies. He enjoys traveling in his free time.