ScandiPWA
Create Magento AppCreate ScandiPWA AppUser ManualGitHub
  • Why Scandi
  • πŸš€Quick-start Guide
  • πŸ—ΊοΈRoadmap
  • Introduction to the Stack
    • CMA, CSA, and ScandiPWA
    • Challenges
  • Setting up Scandi
    • Storefront Mode Setup
      • Proxying requests to server
    • Magento Mode Setup
    • Existing Magento 2 setup
    • Magento Commerce Cloud setup
    • Updating to new releases
      • Storefront mode upgrade
      • Magento mode upgrade
      • CMA upgrade
      • CSA upgrade
      • Custom ScandiPWA composer dependency update
      • Local ScandiPWA Composer Package Setup
    • Docker Setup [deprecated]
      • Legacy Docker setup
      • Migrating to CMA & CSA
  • Developing with Scandi
    • Override Mechanism
      • Overriding JavaScript
        • Overriding classes
        • Overriding non-classes
      • Overriding Styles
      • Overriding the HTML / PHP
      • Parent Themes
    • Extensions
      • Creating an extension
      • Installing an extension
      • Migrating from 3.x to 4.x
      • Publishing an extension
      • Extension Terminology
    • Working With Magento
      • Magento troubleshooting
      • Working with Magento modules
      • Working with GraphQL
      • GraphQL Security
      • Working with "granular cache"
    • Developer Tools
      • Debugging in VSCode
      • ScandiPWA CLI
      • Configuring ESLint
      • CSA Commands
    • Deploying Your App
      • Build & Deploy Android app
      • Build & Deploy iOS app
  • Structure
    • Directory Structure
    • Building Blocks
      • Components
        • Styling Components
      • Routes
      • Redux Stores
      • GraphQL Queries
      • Global Styles
      • The Util Directory
      • Type Checking
    • Application assets
    • Code Style
      • JavaScript Code Style
      • SCSS Code Style
  • Tutorials
    • Customizing Your Theme
      • Styling
        • Customizing the Global Styles
        • Adding a New Font
        • Overriding a Components Styles
        • Extending a Component's Styles
      • Customizing JavaScript
        • Customizing the Footer Copyright
        • Adding a New Page
        • Adding a Section in My Account
        • Adding a Tab on the Product Page
        • Creating a New Redux Store
    • Payment Method Integration
      • Setting Up for Development
      • Redirecting to the Payment Provider
      • Handling the Customer's Return
    • Creating a Custom Widget
      • Scandi CMS System Overview
      • Creating a Magento Widget
      • Implementing the Rendering
    • Video Tutorials
      • #1 Setting up and talking theory
      • #2 Templating in React
      • #3 Overriding a file
      • #4 Styling the application
      • #5 Patterns of ScandiPWA
    • Dark Mode Extension
    • Deploying Native Apps
    • Product 3D Model Extension
      • Part 1: Magento 3D Model Uploads
      • Part 2: GraphQL API
      • Part 3: Scandi Frontend
    • Social Share, Full Extension Development
      • STEP-1 and 2 Creating Magento 2 Module
      • STEP-3 Backend Configurations Settings
      • STEP-4 Simple GraphQl and Resolver
      • STEP-5 Creating Extension, Base Redux Store
      • STEP-6 Extension plugins
      • STEP-7 GraphQL types, Helpers
      • STEP-8 Query Field and FieldList
      • STEP-9 render Plugins and MSTP Plugin, Component creation
      • STEP-10 SocialShare Component Development
      • STEP-11 SocialShare for CategoryPage
      • TASK-1 Changing LinkedIn to Twitter
      • STEP-12 Comments for Admin Users
      • STEP-13 Final, bugfixes
    • Accessing Magento 2 Controllers
      • STEP-1 Creating Magento 2 Module
      • STEP-2 - Create Magento 2 Frontend Route and Basic Controller
      • STEP-3 Accessing Magento 2 Controller, Bypassing ScandiPWA frontend
      • STEP-4 Creating ScandiPWA Extension with additional dependencies
      • STEP-5 Creating Plugin and Axios request
  • About
    • Support
    • Release notes
    • Technical Information
    • Data Analytics
    • Contributing
      • Installation from Fork
      • Repository structure
      • Code contribution process
      • Submitting an Issue
      • Publishing ScandiPWA
Powered by GitBook
On this page
  • Prerequisites
  • Install the ScandiPWA theme with Composer
  • Configure persisted-query
  • Enable the ScandiPWA Theme

Was this helpful?

  1. Setting up Scandi

Existing Magento 2 setup

The ScandiPWA theme integrates seamlessly with Magento

PreviousMagento Mode SetupNextMagento Commerce Cloud setup

Last updated 3 years ago

Was this helpful?

You might want to install ScandiPWA as a Magento theme (without using ) – 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 usingyou're lucky! It has a built-in ScandiPWA linking function built-in. Read how to in minutes!

Prerequisites

Make sure that you have a ! Also, make sure your server is configured to point into <MAGENTO ROOT>/pub directory.

Node v14+

node -v # should be 14^

You can instal Node using (recommended) or the .

Varnish v5+

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 to set it up.

Redis v2.5+

redis-cli -v # should output 2.5^

If it is not installed, please follow to obtain it.

Install the ScandiPWA theme with Composer

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

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:

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.

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>

Configure persisted-query

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

Enable the ScandiPWA Theme

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!

Verify that your system has the installed, and !

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 .

Create Magento App
Create Magento App
setup ScandPWA with CMA
supported Magento version
nvm
official guide
official documentation
this guide
local repository sources
required tools
create a new theme