Create Magento App
Create ScandiPWA AppScandiPWA DocsGitHub
v1
v1
  • Create Magento App
  • Getting started
    • Getting Started
    • Prerequisites
      • Linux requirements
      • MacOS requirements
        • Apple Silicon
      • Windows requirements
    • Available commands
      • Start the application
      • Stop the application
      • Check application status
      • Enter application CLI
      • Explore application logs
      • Execute commands in Docker containers
      • Link a theme
      • Import database dump
      • ⚠️ Uninstall a project
    • Folder structure
    • Updating to New Releases
      • Testing Alpha Releases
    • Configuration File
    • Supported Magento versions
    • How does it work?
    • Limitations
  • Usage guide
    • Using console commands
    • Accessing Docker containers
    • Linking a Scandi Theme
    • Enabling XDebug
    • Enabling SSL
    • Configuring PHP
    • Use custom domain
    • Access on the local network
    • Importing database
      • Importing remote database
    • Using Enterprise Edition
    • Converting legacy Docker setup to CMA
    • Improve Performance
  • Scripts Extensions
    • PHP Extensions
      • ionCube Extension
  • Troubleshooting
    • Common Issues
    • CMA Debugging
    • Uninstall CMA
Powered by GitBook
On this page
  • 1. Install CMA
  • 2. Adjust composer dev packages
  • 3. Adjust theme webpack configuration
  • 4. Run the project and resolve possible issues.
  • [BONUS]
  • Preserve data from the old setup
  • Delete unsed files
  1. Usage guide

Converting legacy Docker setup to CMA

PreviousUsing Enterprise EditionNextImprove Performance

Last updated 2 years ago

We have an older setup for ScandiPWA 1, 2, 3 but since it is not very versatile when it comes to development, you can "upgrade" it to use CMA!

1. Install CMA

Go to src folder and install CMA:

cd ./src

# if npm is not initialized, then run
npm init -y

# then install @scandipwa/magento-scripts package
npm i @scandipwa/magento-scripts@latest

# and make sure your package.json has the following scripts:
{
    ...
    "scripts": {
        "start": "magento-scripts start",
        "stop": "magento-scripts stop",
        "cli": "magento-scripts cli",
        "logs": "magento-scripts logs",
        "link": "magento-scripts link",
        "status": "magento-scripts status",
        "exec": "magento-scripts exec",
        "import-db": "magento-scripts import-db"
    }
    ...
}

2. Adjust composer dev packages

You need to adjust require-dev dependencies, ideally just replace them with the following ones which are shipped in default Magento 2.3 template:

{
    ...
    "require-dev": {
        "allure-framework/allure-phpunit": "~1.2.0",
        "dealerdirect/phpcodesniffer-composer-installer": "^0.5.0",
        "friendsofphp/php-cs-fixer": "~2.14.0",
        "lusitanian/oauth": "~0.8.10",
        "magento/magento-coding-standard": "*",
        "magento/magento2-functional-testing-framework": "~2.6.4",
        "pdepend/pdepend": "2.5.2",
        "phpcompatibility/php-compatibility": "^9.3",
        "phpmd/phpmd": "@stable",
        "phpstan/phpstan": "^0.12.2",
        "phpunit/phpunit": "~6.5.0",
        "sebastian/phpcpd": "~3.0.0",
        "squizlabs/php_codesniffer": "~3.4.0"
    }
    ...
}

3. Adjust theme webpack configuration

Magento does not serve theme files in older ScandiPWA versions so we need to reconfigure webpack devserver.

Go to file app/design/frontend/Scandiweb/pwa/src/config/webpack.development.config.js and your configuration for devServer should look like this:

webpack.development.config.js
{
    devServer: {
        watchContentBase: true,
        publicPath: '/',
        historyApiFallback: true,
        port: 3003,
        https: false,
        overlay: true,
        compress: true,
        inline: true,
        hot: true,
        // comment or remove lines below
    
        // host: '0.0.0.0',
        // public: 'scandipwa.local',
        // allowedHosts: [
        //     '.local'
        // ],
    
        // add this to the config
        // NOTE: to get magento port you can use [npm run status] command
        proxy: {
            '/graphql': 'http://localhost:<your magento port>'
        }
    }
}

Comment or remote host, public and allowedHosts properties and add proxy property with a value of an object with mapping /graphql url to our Magento url.

If you want to use a port other than 3003 for the frontend you can! Just edit port property in this config file.

Note that you cannot use ports below 1024 because it will require root privileges and for your own safety we do not recommend running scripts as root.

4. Run the project and resolve possible issues.

We have adjusted the project configuration enough to start working with CMA itself. Now we can try running the project.

Go to src folder and run:

npm run start

To run frontend you will need to use a command watch:

# go to frontend folder first
cd app/design/frontend/Scandiweb/pwa

npm run watch

In general, that is it!

[BONUS]

Preserve data from the old setup

To preserve data in the database, you will need to do as follows:

  1. After you run magento setup, new MySQL volume will be created. You will need to get old mysql volume name and new one.

    1. To get new mysql volume name, run command:

       docker container inspect <mysql container>

      and here go to the property HostConfig.Mounts and you should see volume name in a Source field.

    2. To get an old mysql volume name you can just use template: <folder name>_mysql-data where folder name is your folder name, you can get it by running basename "$PWD" command.

  2. Now, stop the project and run commands below with replaced <new_volume> name and <old_volume> name values from the steps before.

     npm run stop # to stop the project
    
     docker volume rm <new_volume>
    
     docker volume create --name <new_volume>
    
     docker run --rm -it -v <old_volume>:/from:ro -v <new_volume>:/to alpine \
         ash -c "cd /from ; cp -av . /to"

    That's it! If you want to save some space, you can delete the old volume altogether by running the command: docker volume rm <old_volume>

Delete unsed files

Since we are not using a clean Docker setup anymore, we don't need docker-compose.*.yml files, Dockerfile files as well as build and opt folder.

Go to the root directory of the project and run:

rm ./Makefile ./Dockerfile* ./docker-compose.*

rm -rf ./build ./opt

deploy folder often has some necessary files, like latest.sql , so we can keep it for now.

[NOTE] You can define Magento port using --port option in start command. ()

magento-docker
Docs