# Converting legacy Docker setup to CMA

We have an older [magento-docker](https://github.com/scandipwa/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:

```bash
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:

```javascript
{
    ...
    "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:

{% code title="webpack.development.config.js" %}

```javascript
{
    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>'
        }
    }
}
```

{% endcode %}

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](https://docs.create-magento-app.com/v1/getting-started/available-commands/start#p-port))

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:

```bash
npm run start
```

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

```bash
# 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:

      ```bash
       docker container inspect <mysql container>
      ```

      &#x20;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.

   ```bash
    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:

```bash
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.