docs: refactor the setup guide docs

docs/.vuepress/config.js

@@ -37,6 +37,7 @@ module.exports = {
     '@vuepress/search',
   ],
   themeConfig: {
+    sidebarDepth: 0,
     repo: 'https://github.com/vuestorefront/magento2/',
     editLinks: true,
     docsDir: 'docs',
@@ -46,40 +47,34 @@ module.exports = {
     nav: [
       { text: 'Vue Storefront', link: 'https://vuestorefront.io/' },
       { text: 'Core Documentation', link: 'https://docs.vuestorefront.io/v2/' },
-      { text: 'Demo', link: 'https://demo-magento2.europe-west1.gcp.storefrontcloud.io/' },
-      { text: 'GitHub', link: 'https://github.com/vuestorefront/magento2' },
-      { text: 'Roadmap', link: 'https://docs.vuestorefront.io/magento/guide/roadmap.html' },
-      { text: 'Environments', link: 'https://docs.vuestorefront.io/magento/guide/environments.html' },
     ],
     sidebar: [
       {
-        title: 'Essentials',
+        title: '',
         collapsable: false,
         children: [
           ['/', 'Introduction'],
           ['/guide/environments', 'Demo environments'],
           ['/guide/supported-features', 'Supported features'],
           ['/guide/about', 'About'],
-          ['/guide/roadmap', 'Roadmap'],
         ],
       },
       {
-        title: 'Creating a Storefront',
+        title: 'Getting started',
         collapsable: false,
         children: [
-          ['/guide/creating-a-store', 'Creating a Store'],
-          ['/guide/configuration', 'Configuration'],
-          ['/guide/override-queries', 'Override queries'],
-          ['/guide/testing', 'Testing'],
-          ['/guide/recaptcha', 'ReCaptcha'],
+          ['/getting-started/configure-magento', 'Configuring Magento'],
+          ['/getting-started/configure-integration', 'Configuring Vue Storefront'],
         ],
       },
       {
-        title: 'Performance',
+        title: 'Guides',
         collapsable: false,
         children: [
-          ['/guide/graphql-get', 'Varnish & GET for GraphQL Queries'],
-          ['/guide/ssr', 'Server Side Rendering Cache'],
+          ['/guide/image-optimization', 'Image optimization'],
+          ['/guide/override-queries', 'Override queries'],
+          ['/guide/testing', 'Testing'],
+          ['/guide/recaptcha', 'ReCaptcha'],
         ],
       },
       {

docs/getting-started/configure-integration.md

@@ -0,0 +1,85 @@
+# Configuring Vue Storefront for Magento 2
+
+This guide explains the steps needed to install and set up Vue Storefront for Magento 2.
+
+## Prerequisites
+
+Before you can get started, you need the following:
+
+- **Node.js 16** installed,
+- Magento 2 server configured following the [Configuring Magento](/getting-started/configure-magento.html) guide.
+
+To check the Node version you are using, run the following command:
+
+```bash
+node -v
+```
+
+## Creating the Vue Storefront for Magento 2
+
+To install Vue Storefront, run the command below. It will ask you for the project name and the integration of your choice. Keep in mind that the project name will also be used as the folder name, and be sure to select the Magento 2 integration.
+
+```sh
+npx @vue-storefront/cli init
+```
+
+### 1. Configure environment variables
+
+After installation, the first step is configuring the integration using the environment variables.
+
+1. Go to the root folder of your project.
+2. Make a copy of the `.env.example` file and rename it to `.env`. You can do it manually or use the following command:
+
+    ```sh
+    cp .env.example .env
+    ```
+
+3. Update values in the `.env` file.
+
+### 2. Setup store configuration
+
+The `plugins/storeConfigPlugin.ts` plugin loads store configuration data from Magento and saves it into the Pinia store under the `$state.storeConfig` property. By default, the amount of data loaded from Magento is minimal to avoid over-fetching, but as your application grows, you might need to pull more data.
+
+This plugin loads the store configuration data based on a query in the `plugins/query/StoreConfig.gql.ts` file. You can modify this file to change what data is loaded.
+
+### 3. Configure multistore and localization
+
+Each Magento store view needs a corresponding locale configuration object in the `i18n` object in the `nuxt.config.js` file.
+
+#### 3.1 `i18n.locales`
+
+The `i18n.locales` array contains all supported locales. Each item in this array is an object containing the following properties:
+
+- `code` - unique identifier of the locale corresponding to Magento store view code.
+- `file` - the name of the file containing translations for this locale in the `lang` folder.
+- `iso` - corresponding ISO country code.
+
+For other properties please follow official [nuxt-i18n documentation](https://i18n.nuxtjs.org/options-reference#locales).
+
+In the example configuration below, you need to have two Magento store views with corresponding store codes: `default` and `german`.
+
+```javascript
+// nuxt.config.js
+
+export default {
+  locales: [
+    {
+      code: 'default',
+      file: 'en.js',
+      iso: 'en_US',
+    },
+    {
+      code: 'german',
+      file: 'de.js',
+      iso: 'de_DE',
+    }
+  ]
+};
+```
+
+#### 3.2 Translations
+
+When working with translation in your application, you need to:
+
+1. Add translations in Magento for products and categories.
+2. Update the `i18n.locales` array in the `nuxt.config.js` file and add translations to the corresponding files in the `lang` directory.

docs/getting-started/configure-magento.md

@@ -0,0 +1,137 @@
+# Configuring Magento store
+
+This guide explains the step needed to install and set up Magento 2 store for Vue Storefront.
+
+## Prerequisites
+
+Before you can get started, you need the following:
+
+- **Docker Desktop** to setup Magento 2 locally,
+- **Magento Marketplace account** to download Magento 2. To create it, visit [this page](https://account.magento.com/customer/account/create/).
+
+## Creating the Magento 2 store
+
+We're going to install Magento 2 inside the `server` folder. Run the following commands to create a `server` folder first:
+
+```sh
+mkdir server
+cd server
+```
+
+### 1. Get Magento Marketplace access keys
+
+Registry that stores Magento and other third-party packages require authentication. You'll need to generate access keys in the Magento Marketplace to install them.
+
+Follow the [Get your authentication keys](https://devdocs.magento.com/guides/v2.4/install-gde/prereq/connect-auth.html) guide to generate new access keys.
+
+![Access keys generated in Magento Marketplace](../assets/images/magento-marketplace-access-keys.jpg)
+
+### 2. Install Magento 2 store
+
+To simplify the setup, let's use the [`markshust/docker-magento`](https://github.com/markshust/docker-magento) script.
+
+Run the command below to create the store. It will ask you for the Username and Password. Use your public access key as a username and your private access key as a password from the previous step.
+
+```sh
+curl -s https://raw.githubusercontent.com/markshust/docker-magento/master/lib/onelinesetup | bash -s -- magento.test 2.4.4
+```
+
+### 3. Setup authentication
+
+In the Magento 2 folder, copy the `src/auth.json.sample` file and rename it to `src/auth.json`. You can do it manually or use the following command:
+
+```sh
+cp src/auth.json.sample src/auth.json
+```
+
+Update the username and password values with your Magento public and private keys.
+
+```json
+{
+    "http-basic": {
+        "repo.magento.com": {
+            "username": "a1c69cb…",
+            "password": "af041560…"
+        }
+    }
+}
+```
+
+Finally, copy the file to the container by running the following command:
+
+```sh
+bin/copytocontainer auth.json
+```
+
+### 4. Increase default GraphQL query complexity
+
+For security reasons, Magento 2, by default, allows maximum GraphQL query complexity of 300 and depth of 20. You need to change these values using the [GraphQL CustomConfig module](https://github.com/caravelx/module-graphql-config), which allows configuring these values in the admin panel.
+
+To install the Magento 2 GraphQL Config module, run the following commands on your Magento installation:
+
+```bash
+composer require caravelx/module-graphql-config
+php bin/magento module:enable Caravel_GraphQlConfig
+php bin/magento setup:upgrade
+php bin/magento setup:di:compile
+php bin/magento setup:static-content:deploy
+```
+
+Then go to the admin panel, find the configuration panel of the `GraphQL CustomConfig` module, and set:
+
+- **complexity** to 1500,
+- **depth** to 20.
+
+For more information, see the [GraphQL security configuration](https://devdocs.magento.com/guides/v2.4/graphql/security-configuration.html) page.
+
+### 5. Enable CORS
+
+You may need to enable CORS origins in your Magento store to accept requests from other domains, e.g., `magento.dev`. In the Magento 2 folder, add the package `graycore/magento2-cors` by running the command below:
+
+```sh
+bin/composer require graycore/magento2-cors
+```
+
+Then, add the following configuration at the end of `src/app/etc/env.php`:
+
+```php
+    'system' => [
+        'default' => [
+            'web' => [
+                'graphql' => [
+                    'cors_max_age' => 86400,
+                    'cors_allow_credentials' => 0,
+                    'cors_allowed_methods' => 'POST, OPTIONS, GET',
+                    'cors_allowed_headers' => 'Content-Currency, Store, X-Magento-Cache-Id, X-Captcha, Content-Type, Authorization, DNT, TE',
+                    'cors_allowed_origins' => '*'
+                ]
+            ]
+        ]
+    ]
+```
+
+Enable the graycore cors.
+
+```sh
+bin/magento module:enable Graycore_Cors
+```
+
+Then update the configuration:
+
+```sh
+bin/magento setup:upgrade
+```
+
+### 6. Populate store with sample data (optional)
+
+In the Magento 2 folder, execute the commands below to add sample data to your store.
+
+```sh
+bin/magento sampledata:deploy
+```
+
+Then update the configuration:
+
+```sh
+bin/magento setup:upgrade
+```

docs/guide/about.md

@@ -2,8 +2,9 @@
 
 ## Resources
 
-- [Vue Storefront Documentation](https://docs.vuestorefront.io/v2/)
-- [Magento 2 integration Documentation (WIP)](https://docs.vuestorefront.io/magento)
+- [GitHub repository](https://github.com/vuestorefront/magento2/)
+- [Vue Storefront website](https://www.vuestorefront.io/)
+- [Core Documentation](https://docs.vuestorefront.io/v2/)
 - [Community Chat](https://discord.vuestorefront.io)
 
 ## Support
@@ -13,6 +14,7 @@ If you have any questions about this integration we will be happy to answer them
 ## Contributors ✨
 
 ### Honorable Mentions
+
 - [Cyberfuze](https://cyberfuze.com/)
 - [Leonex](https://www.leonex.de/)