How to Install ScandiPWA on Magento Theme

Are you ready to take your Magento store to the next level? If so, ScandiPWA is the way to go! As a fully integrated Progressive Web Application (PWA) platform for Magento stores, it provides an enhanced digital experience that allows businesses to deliver engaging customer experiences while reaping important performance and scalability benefits.

In this blog post, we’ll walk you through ScandiPWA in detail and provide instructions on installing it for your own branded web app.

Regarding Magento ecommerce development Company, ScandiPWA is the way to go.

This platform uses Magento and PWA technology to offer businesses the best of both worlds; a fully integrated Progressive Web Application with enhanced digital experiences for customers.

With ScandiPWA, organizations can enjoy invaluable performance benefits and scalability, all wrapped up in a package that cost-effectively delivers world-class customer engagement.

It’s no wonder why Magento stores are turning to ScandiPWA as their number-one choice for unbeatable customer experiences.

Get ready for improved sales conversions with lightning-fast loading times and optimized navigation – let’s get started!

What is ScandiPWA:

ScandiPWA is the Magento Progressive Web App theme for Magento stores. It is an offline-ready, ultra-fast, open-source PWA solution based on React and Redux.

ScandiPWA Magento 2 leverages technologies like Varnish, GraphQL, and Redis to help improve your PWA site performance.

In this blog, we will learn how to install – Magento progressive web app – 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:

The first step for ScandiPWA installation 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.
While ScandiPWA installation, 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

If you choose start you will need to keep this process running. It will rebuild the theme continuously when the changes are being made.
Now the new theme has been created, but we need to do the installing with Composer.
Navigate to the Magento root folder and enter the following commands.
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.

Flag	Description	Example
–pq-host	Persisted query Redis host	127.0.0.1
–pq-port	Persisted query Redis port	6379
–pq-database	Persisted query Redis database	5
–pq-scheme	Persisted query Redis scheme	tcp
–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.

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.

For more on Magento Progressive Web App, ScandiPWA Magento 2 and ScandiPWA installation reach out to our expert team today!

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.