> For the complete documentation index, see [llms.txt](https://docs.scandipwa.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.scandipwa.com/getting-started-1/magento-theme-mode.md).

# Magento Mode Setup

This guide requires 5 steps to be completed in sequence:

1. [Create a new Create Magento App](/getting-started-1/magento-theme-mode.md#create-a-new-create-magento-app)
2. [Create a new Create Scandipwa App](/getting-started-1/magento-theme-mode.md#create-a-new-create-scandipwa-app)
3. [Link Magento App with ScandiPWA App](/getting-started-1/magento-theme-mode.md#link-magento-app-with-scandipwa-app)
4. [Run ScandiPWA App in Magento mode](/getting-started-1/magento-theme-mode.md#4-run-scandipwa-app-in-magento-mode)
5. [Change Magento theme to ScandiPWA](/getting-started-1/magento-theme-mode.md#5-change-magento-theme-to-scandipwa)

## 1. Create a new Create Magento App

### Install dependencies

Before setting up, make sure you have installed the **libraries required to build the PHP**. The list of these libraries can be found here: for [Linux](https://docs.create-magento-app.com/getting-started/prerequisites/installation-on-linux) and [macOS](https://docs.create-magento-app.com/getting-started/prerequisites/installation-on-macos).

Also, make sure to install **Docker** and **PHPBrew** in your system.

### Quick Start

```bash
# make sure dependencies are installed !!!
npx create-magento-app my-app
cd my-app
npm start
```

This command will start Docker services, start PHP and open your favorite browser with Magento 2 store.

Create Magento App choose an available port for Magento 2 so it can vary. By default, it will use port 80 so the URL for the store will be [http://localhost:80/](http://localhost/).

### Creating a Magento App

{% hint style="warning" %}

### **Make sure your Node version is up to date!**

**You’ll need to have Node >= 12 on your local development machine** (but it’s not required on the server). You can use [n](https://www.npmjs.com/package/n) (macOS, Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to switch Node versions between different projects.
{% endhint %}

To create a new app, you may choose one of the following methods:

{% tabs %}
{% tab title="NPX" %}

```bash
npx create-magento-app my-app
```

{% endtab %}

{% tab title="NPM" %}

```
npm init magento-app my-app
```

{% endtab %}

{% tab title="Yarn" %}

```
yarn create magento-app my-app
```

{% endtab %}
{% endtabs %}

### Output

Running any of these commands will create a directory called `my-app` inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies. Learn more in [the folder structure guide](https://docs.create-magento-app.com/getting-started/folder-structure).

{% hint style="info" %}
**In case of issues** - please refer to [Create Magento App FAQ.](https://docs.create-magento-app.com/troubleshooting/common-issues)
{% endhint %}

## 2. Create a new Create Scandipwa App

The ScandiPWA App creation very similar to Storefront mode, however, **the Magento 2 server configuration is not required** as we will install our ScandiPWA as composer dependency for our newly created Magento 2 server, later in this guide.

{% content-ref url="/pages/-MUxW5d\_bCOq1\_Inrj1D" %}
[Storefront Mode Setup](/getting-started-1/storefront-mode.md)
{% endcontent-ref %}

## 3. Link Magento App with ScandiPWA App

The Create Magento App (CMA) comes with a built-in mechanism for ScandiPWA theme linking. In order to link a ScandiPWA theme with CMA project, execute the following command from CMA project root:

{% tabs %}
{% tab title="NPM" %}

```bash
npm run link -- ./path/to/your/scandipwa-app
```

{% endtab %}

{% tab title="Yarn" %}

```
yarn run link ./path/to/your/scandipwa-app
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
This command will link your ScandiPWA theme from your selected path as a symbolic link and will [disable the "Full Page" cache](https://docs.magento.com/user-guide/system/cache-full-page.html).
{% endhint %}

## 4. Run ScandiPWA App in Magento mode

Run the command below from your ScandiPWA App directory:

{% tabs %}
{% tab title="Mac, Linux" %}

```bash
BUILD_MODE=magento npm run start
```

{% endtab %}

{% tab title="Windows" %}

```bash
set BUILD_MODE=magento && npm run start & set BUILD_MODE=
```

{% endtab %}
{% endtabs %}

This command will now watch the files and put their compiled versions into the `magento/Magento_Theme` folder.

## 5. Change Magento theme to ScandiPWA

Go to your Magento Admin panel (by default it can be accessed on `/admin`), **Content > Configuration**, choose a website that you want to apply theme on, click **Edit** and select your theme, click **Save**!

Open your store URL and the ScandiPWA theme should be online.

## What's next?

Learn what features and why we added on-top-of React + Redux stack:

{% content-ref url="/pages/-MVVgnQHeo0DBRZnPZN8" %}
[Introduction to the Stack](/introduction.md)
{% endcontent-ref %}