Converting legacy Docker setup to CMA

We have an older magento-docker 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.

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

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

magento-scripts will do this automatically!

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.