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
  • Before You Start
  • Creating the New Setup
  • Switching to the New Setup
  • Migrating the Code
  • Extension mechanism changes

Was this helpful?

  1. Setting up Scandi
  2. Docker Setup [deprecated]

Migrating to CMA & CSA

If you have already set up ScandiPWA with docker, you can upgrade to the new setup

PreviousDocker Setup [deprecated]NextOverride Mechanism

Last updated 4 years ago

Was this helpful?

Previously, ScandiPWA used a . This configuration is now considered legacy, and you can easily upgrade to the new create-scandipwa-app setup.

Before You Start

Before migrating, make sure that you have backed up the current state of the project, preferrably with a version control system such as Git. Verify that your system meets the .

Creating the New Setup

In the new setup, the theme is developed in the localmodules directory. If it does not exist yet, create it in your project's source directory:

mkdir src/localmodules
cd src/localmodules

Now, using the new create-scandipwa-app script, you can re-create the theme (replace <your-app-name>):

Using Yarn (recommended):

yarn create scandipwa-app <your-app-name>

Using npx (if you don't have yarn):

npx create-scandipwa-app <your-app-name>

It will take a few minutes for the script to download the required packages and initialize the theme. When it completes, navigate to the newly-created theme:

cd <your-app-name>

Clone the ScandiPWA repo in localmodules:

git clone https://github.com/scandipwa/scandipwa
cd scandipwa

Install dependencies:

yarn

In the instructions below, <your-app-name> will be "scandipwa".

Run the compilation process in magento mode:

BUILD_MODE=magento yarn start
cd <your-app-name>
BUILD_MODE=magento npm 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.

Switching to the New Setup

Now the new theme is created, but we need to reconfigure the project to use it instead of the old theme. The changes we need are easiest to make from within the docker container, so start the app and gain bash access to it:

From the project root
dc up -d
inapp bash # to enter the app container

Removing the Old Setup

Previously, our theme was installed via the scandipwa/installer package, but we no longer require it. To clean up and avoid confusion, remove it:

(from within the app container)
composer remove scandipwa/installer

Adding the New Setup

(from within the app container)
composer config repo.theme path localmodules/<your-app-name>
(from within the app container)
composer config repo.theme path localmodules/scandipwa/packages/scandipwa

Next, we install our theme by using require. This will resolve the package to the localmodules directory we configured above:

(from within the app container)
composer require scandipwa/<your-app-name>
(from within the app container)
composer require scandipwa/scandipwa

Making the Switch

Run the upgrade command and disable full-page caching:

(from within the app container)
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:

(from within the app container)
bin/magento cache:flush

The new theme should now be served on the frontend! For now, it will be the default ScandiPWA theme, because we haven't migrated the cusomized code yet.

Heads up!

Migrating the Code

You can now copy the code from your old theme into the new setup. However, note that the file structure has changed to improve organization, and you will need to make adjustments:

Old Path

Changes

etc

registration.php

theme.xml

<any other Magento-specific file you have created>

Magento files now moved under a new magento directory for better organization. The new paths are magento/etc, magento/registration.php, etc.

src/public

Now moved outside src, the new path is public.

The file index.production.phtml is renamed to index.php, and index.development.html is renamed to index.html.

src/config

Removed. The webpack configuration now lives in the

@scandipwa/scandipwa-scripts package. To modify this configuration, use build configuration plugins.

src/app

Now the contents of app are moved to src, and app no longer exists. The new path is src. This was done to create a more shallow and easy to navigate file structure.

Once your code has been copied, you can delete the old location of your theme. Your app should now work as expected with the new setup!

Extension mechanism changes

The extensions are no longer Composer packages, but NPM packages. Thus, the frontend and backend (Magento 2) extension are now separated. Internal file structure is also different. Previously, the extensions had to be created under then scandipwa/app folder of the composer package, now, you can simply put your code into extension's src folder. Inside of this folder, the file-structure is unchanged.

We will install the newly-created theme by taking advantage of Composer's ability to install from . First, we add our theme as a local repository source. This will alter composer.json to add a new item in the repositories field:

The "" feature only works in insecure HTTP mode of your Magento 2 server.

You can read more about new extension registration sytax , it replaces the legacy scandipwa.json file.

A tool for automated extension transformation from the old to the new format is available for use .

local repository sources
hot-reload
here
on GitHub
docker setup
requirements