How to install ScandiPWA

Key takeaways

• ScandiPWA is a React-based PWA for Magento 2.
• It can work as a Magento 2 theme.
• Installation requires Composer, Node, Magento compatibility, and cache setup.
• After installation, test pages, cart, checkout, cache, and mobile.

Given the rise of PWA for Magento 2 and following our last how-to guide, in this article we will go over the installation process of ScandiPWA, a different, React-based PWA implementation for Magento 2.

ScandiPWA can be installed as a Magento 2 theme for an existing Magento store. That makes the setup different from some PWA approaches because it doesn’t fully replace the Magento frontend or require a separate frontend app to run continuously on the server.

What is ScandiPWA?

ScandiPWA is a PWA storefront that works with Magento as the backend and gives shoppers a faster, app-like experience.

Because ScandiPWA can be applied through Magento’s theme system, it can be a simpler path for developers and merchants who want a PWA storefront on an existing Magento 2 site.

ScandiPWA installation options

There are two common ways to get started with ScandiPWA. You can use a standalone or Docker-based setup, or you can install ScandiPWA as a theme for an existing Magento 2 site. This guide focuses on the existing Magento 2 theme integration method.

Before you install ScandiPWA

Before starting, confirm your Magento environment is ready.

You will need:

• Magento 2.4.1 or higher
• Composer installed
• Node.js installed
• Yarn or npm installed
• SSH access
• Magento Admin access
• Redis and Varnish available or planned for production
• A backup or staging environment before changing a live store

ScandiPWA requirements can vary by version, so check the ScandiPWA documentation for the version you plan to install.

8 steps to install ScandiPWA for Magento 2

Once your Magento environment and build tools are ready, you can install ScandiPWA from the Magento root directory. These steps follow the existing Magento 2 theme integration approach, where ScandiPWA gets built and recognized by Magento as a theme.

Step 1: Create the local modules directory

From the Magento root directory, create the local modules directory:

This keeps the ScandiPWA theme source inside your Magento project.

Step 2: Create the ScandiPWA app

From the src/localmodules directory, create the ScandiPWA app:

Use the package manager and ScandiPWA version that fit your environment. Some setups may use npm instead of Yarn.

Step 3: Build the frontend assets

Build the ScandiPWA app in Magento mode:

Magento mode builds the ScandiPWA project so Magento can use it as a theme.

Step 4: Add ScandiPWA to Composer

Return to the Magento root directory and configure Composer to recognize the new theme as a local repository:

The package name should match the app or theme name created in your project.

Step 5: Run Magento setup commands

From the Magento root directory, run:

The setup command updates Magento so it recognizes the theme. Disabling full-page cache during setup can help you avoid stale storefront output while testing.

Step 6: Configure persisted query and caching settings

Configure the persisted query module by running:

Use the persisted query Redis settings required by your environment:

• –pq-host: persisted query Redis host
• –pq-port: persisted query Redis port, often 6379
• –pq-database: persisted query Redis database, often 5
• –pq-scheme: persisted query Redis scheme, often tcp

Alternatively, set those configurations directly in app/etc/env.php under cache key:

ScandiPWA performance depends on more than installing files. Redis, Varnish, full-page cache, and persisted query behavior can all affect how the storefront performs.

Step 7: Activate the ScandiPWA theme in Magento Admin

To activate the theme:

1. Log in to Magento Admin.
2. Go to Content > Design > Configuration.
3. Find the row for the website, store, or store view where ScandiPWA should apply.
4. Click Edit.
5. Select the newly created ScandiPWA theme under Applied Theme.
6. Click Save Configuration.

Step 8: Clear cache and test the storefront

Clear cache and switch to production mode before testing.

Post-install testing checklist

After installing ScandiPWA, test the storefront before treating the setup as complete.

Check that:

• The homepage loads
• Category pages load
• Product pages load
• Cart works
• Checkout works
• Customer login works
• Search works
• GraphQL responses work
• Redis, Varnish, and cache behavior work as expected
• The ScandiPWA theme appears in Magento Admin
• The mobile experience works
• The browser console does not show major frontend errors

Common ScandiPWA installation issues

A few common issues can prevent ScandiPWA from appearing or working correctly.

The theme does not appear in Magento Admin

If the theme doesn’t appear in Magento Admin after running in production mode, run:

You may also need to confirm the Composer package was added correctly, setup:upgrade ran successfully, and cache was flushed.

The build fails

Build errors can happen because of the wrong Node version, missing dependencies, package manager issues, or ScandiPWA version mismatch. Confirm your environment matches the version you are installing.

The storefront still shows the old theme

Flush Magento cache, check full-page cache, confirm the theme is assigned under Content > Design > Configuration, and make sure you selected the correct website, store, or store view.

GraphQL or frontend features do not work

ScandiPWA relies on Magento backend data and GraphQL. If product pages, category pages, cart, checkout, or search fail, review GraphQL responses, cache configuration, extension compatibility, and browser console errors.

The console blinks during bootstrap or build

A blinking console during bootstrap or build is typically a styling issue and doesn’t affect the underlying process.

ScandiPWA extension compatibility

Magento extensions do not always work automatically with ScandiPWA. Because ScandiPWA uses a React-based frontend and relies on GraphQL, some extensions may need frontend compatibility work.

Before relying on an extension with ScandiPWA, check whether it supports GraphQL, cart and checkout behavior, customer account pages, product pages, and any custom frontend components.

Performance and hosting considerations

Installing ScandiPWA is not only a frontend task. It depends on a Magento-ready hosting environment with Composer, Node or build tools, Redis, Varnish, GraphQL, persisted queries, cache configuration, production builds, and enough server resources.

A stable hosting environment can make ScandiPWA installation, testing, and long-term maintenance easier to manage.

ScandiPWA FAQs

Getting started with ScandiPWA

ScandiPWA can be installed as a Magento 2 theme when the environment supports the required tools, caching, and Magento configuration.

Start by confirming prerequisites first. Then create the app, build it in Magento mode, add it with Composer, run setup, and enable the theme in Magento Admin.

ScandiPWA depends on a Magento-ready hosting environment with the right resources, caching, build tools, and support. Liquid Web Magento hosting gives store owners the infrastructure they need to manage modern Magento storefronts with confidence. Explore Liquid Web Magento hosting to find the right fit.

Miguel Balparda