Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/vuestorefront/magento2

Vue Storefront 2 integration for Magento 2
https://github.com/vuestorefront/magento2
ecommerce hacktoberfest integrations-team javascript magento magento2 vue-storefront vuejs
Last synced: 29 days ago
JSON representation
Vue Storefront 2 integration for Magento 2
Host: GitHub
URL: https://github.com/vuestorefront/magento2
Owner: vuestorefront
License: mit
Created: 2020-12-05T10:49:31.000Z (almost 4 years ago)
Default Branch: main
Last Pushed: 2024-05-22T11:10:14.000Z (6 months ago)
Last Synced: 2024-05-28T16:00:33.755Z (6 months ago)
Topics: ecommerce, hacktoberfest, integrations-team, javascript, magento, magento2, vue-storefront, vuejs
Language: TypeScript
Homepage: https://docs.vuestorefront.io/magento
Size: 16.6 MB
Stars: 167
Watchers: 30
Forks: 117
Open Issues: 66
Metadata Files:
- Readme: README.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project

awesome-vuestorefront - Repository
README

        


    

    


    



### Stay connected

![GitHub Repo stars](https://img.shields.io/github/stars/vuestorefront/vue-storefront?style=social)

![Twitter Follow](https://img.shields.io/twitter/follow/vuestorefront?style=social)

![YouTube Channel Subscribers](https://img.shields.io/youtube/channel/subscribers/UCkm1F3Cglty3CE1QwKQUhhg?style=social)

[![Discord](https://img.shields.io/discord/770285988244750366?label=join%20discord&logo=Discord&logoColor=white)](https://discord.vuestorefront.io)

**This repository contains integration for Magento 2 and Alokai Middleware.**

This integration is framework-agnostic and may be consumed in the framework of your choice.

## Magento 2 integration for Alokai

This project is a Magento 2 integration for Alokai.

 ### Check out [the docs](https://docs.vuestorefront.io/sdk-magento2/)

# Quick start

Your Alokai application has two parts:

1. **Server Middleware** - an Express.js application that can connect to your various third-party services (like Magento).

2. **Front-end application** - any application using JavaScript or TypeScript that can connect to the server middleware. Popular choices include [Nuxt](https://nuxt.com/) and [Next.js](https://nextjs.org/).

In this section, we will explain in a step-by-step guide how to use Magento 2 integration in each part of your Alokai application.

## Prerequisites

- Magento configured - you need a Magento 2 configured

- Install Node.js version >=16.0

## Server Middleware

The first step to setup your integration is to create and configure your server middleware layer to connect to your Magento 2 backend.

Already have the server middleware configured?

If you have the server middleware configured, you can move directly to the sdk preparation section.

1. Install the dependencies needed to create your server middleware and to create a server-to-server connection with the Magento 2 backend and the server middleware.

```bash

yarn add @vue-storefront/middleware @vue-storefront/magento-api

# npm install @vue-storefront/middleware @vue-storefront/magento-api

# pnpm install @vue-storefront/middleware @vue-storefront/magento-api

```

2. Create a file `middleware.config.js` with server middleware configuration.

```javascript

// middleware.config.js

import {config} from "dotenv";

config();

const cookieNames = {

  currencyCookieName: 'vsf-currency',

  countryCookieName: 'vsf-country',

  localeCookieName: 'vsf-locale',

  cartCookieName: 'vsf-cart',

  customerCookieName: 'vsf-customer',

  storeCookieName: 'vsf-store',

  messageCookieName: 'vsf-message'

};

export const integrations = {

  magento: {

      location: '@vue-storefront/magento-api/server',

      configuration: {

        api: process.env.VSF_MAGENTO_GRAPHQL_URL,

        cookies: {

          ...cookieNames,

        },

        cookiesDefaultOpts: {

          httpOnly: process.env.VSF_COOKIE_HTTP_ONLY || false,

          secure: process.env.VSF_COOKIE_SECURE || false,

          sameSite: process.env.VSF_COOKIE_SAME_SITE || 'lax',

          path: process.env.VSF_COOKIE_PATH || '/',

        },

        defaultStore: 'default',

        customApolloHttpLinkOptions: {

          useGETForQueries: true,

        },

        magentoBaseUrl: process.env.VSF_MAGENTO_BASE_URL,

        magentoApiEndpoint: process.env.VSF_MAGENTO_GRAPHQL_URL,

        imageProvider: process.env.NUXT_IMAGE_PROVIDER,

        recaptcha: {

          isEnabled: process.env.VSF_RECAPTCHA_ENABLED === 'true',

          sitekey: process.env.VSF_RECAPTCHA_SITE_KEY,

          secretkey: process.env.VSF_RECAPTCHA_SECRET_KEY,

          version: process.env.VSF_RECAPTCHA_VERSION,

          score: process.env.VSF_RECAPTCHA_MIN_SCORE,

        },

        customer: {

          customer_create_account_confirm: true,

        },

      },

    }

};

```

3. Configure environment variables in your `.env` file.

```

# .env

VSF_NUXT_APP_ENV=production

VSF_NUXT_APP_PORT=3000

VSF_NUXT_APP_HOST=0.0.0.0

VSF_STORE_URL=

API_BASE_URL=

API_SSR_BASE_URL=

VSF_MAGENTO_BASE_URL=

VSF_MAGENTO_GRAPHQL_URL=

NUXT_IMAGE_PROVIDER=ipx

```

4. Create a `middleware.js` file. This script is used to run the server middleware.

```javascript

// middleware.js

import {createServer} from "@vue-storefront/middleware";

import {integrations} from "./middleware.config.js";

import cors from 'cors';

(async () => {

  const app = await createServer({ integrations });

  const host = process.argv[2] ?? "0.0.0.0";

  const port = process.argv[3] ?? 8181;

  const CORS_MIDDLEWARE_NAME = "corsMiddleware";

  const corsMiddleware = app._router.stack.find(

    (middleware) => middleware.name === CORS_MIDDLEWARE_NAME

  );

  corsMiddleware.handle = cors({

    origin: [

      "http://localhost:3000",

      ...(process.env.MIDDLEWARE_ALLOWED_ORIGINS?.split(",") ?? []),

    ],

    credentials: true,

  });

  app.listen(port, host, () => {

    console.log(`Middleware started: ${host}:${port}`);

  });

})();

```

5. Your middleware is ready. You can start it by running `node middleware.js`. Most likely, you'll want to setup this command as a script in your `package.json` file.

```json

{

  // ...

  "scripts": {

    "start": "node middleware.js"

  }

  // ...

}

```

## Configuring the SDK

Now, let's configure the SDK in the frontend part of your application to communicate with the server middleware.

1. Install the SDK package and the Magento 2 module. These packages will allow you to create an instance of the SDK and then extend it with methods to communicate with Magento 2 via your server middleware.

```bash

yarn add @vue-storefront/sdk @vue-storefront/magento-sdk

# npm install @vue-storefront/sdk @vue-storefront/magento-sdk

# pnpm install @vue-storefront/sdk @vue-storefront/magento-sdk

```

2. Initialize the SDK. Configure Magento 2 module with `apiUrl` that points to the server middleware.

```ts

import { buildModule, initSDK } from '@vue-storefront/sdk';

import { magentoModule, MagentoModuleType } from '@vue-storefront/magento-sdk';

const sdkConfig = {

  magento: buildModule(magentoModule, {

    apiUrl: 'http://localhost:8181/magento'

  })

};

export const sdk = initSDK(sdkConfig);

```

3. Your SDK is ready! You can now import it in the different parts of your frontend application and call methods with `sdk.magento.`. To see a full list of methods offered by the Magento 2 module, check out the [API Reference](../reference/api/index.md).

For example, we can call the `products` method to fetch products from Magento 2.

```ts

import { sdk } from './sdk';

const products = await sdk.magento.products({})

// returns ProductInterface[]

```



[![All Contributors](https://img.shields.io/badge/all_contributors-27-orange.svg?style=flat-square)](#contributors-)

## How to start if you want to contribute?

Want to contribute? Ping us on `magento2` channel on [our Discord](http://discord.vuestorefront.io)!

### Requirements:

- NodeJS v16 or later

- Yarn (npm is not supprted yet)

- Magento >= v2.4.3 instance for GraphQL endpoint

- Change Magento GraphQL Query Complexity and Depth values

> Don't forget to change the Magento GraphQL Query Complexity and Depth values

Magento 2 by default has a lower value for the complexity of 300, and a higher value for the depth of 20. [Magento 2 - Issue #32427](https://github.com/magento/magento2/issues/32427#issuecomment-860478483)

>The changes are required, due to the size of the queries and mutations in the `api-client` implementation.

>To do this changes, you can use the [Magento 2 module](https://github.com/caravelx/module-graphql-config), which adds a configuration panel to your admin, or do this changes manually.

To install the Magento 2 GraphQL Config module, on your Magento installation execute:

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

```

Find more information about the module [GraphQl Custom Config](https://github.com/caravelx/module-graphql-config)

### Steps

1. Build dependencies `yarn build`

    ```bash

    yarn build

    ```

8. Run `yarn dev`. You can find other commands in `package.json`

    ```bash

    yarn dev

    ```

## Resources

- [Magento 2 integration Documentation](https://docs.vuestorefront.io/sdk-magento2/)

- [Alokai Documentation](https://docs.vuestorefront.io/v2/)

- [Community Chat](http://discord.vuestorefront.io)

## Support

If you have any questions about this integration we will be happy to answer them on  `magento2-alokai` channel on [our Discord](http://discord.vuestorefront.io).

## Contributors ✨

### Honorable Mentions

- [Caravel x](https://www.caravelx.com/)

- [Cyberfuze](https://cyberfuze.com/)

- [Leonex](https://www.leonex.de/)

Thanks go to these wonderful people 🙌:

  

    
_{Heitor Ramon Ribeiro}
💻 🚧 📖 📆

    
_{Alef Barbeli}
💻 📖

    
_{Henrique Lopes}
💻 📖

    
_{Đại Lộc Lê Quang}
💻

    
_{Bogdan Podlesnii}
💻

  

  

    
_{Patrick Monteiro}
💻

    
_{Kevin Gorjan}
💻 📖

    
_{Bartosz Herba}
💻 📖 🚧 🧑‍🏫 👀

    
_{Marcin Kwiatkowski}
💻 📆 💼 📖 🤔 🚧 🧑‍🏫 👀

    
_{Filip Rakowski}
💬 🧑‍🏫 👀

  

  

    
_{Filip Sobol}
💬 🧑‍🏫 👀 📖

    
_{Patryk Andrzejewski}
💬 🧑‍🏫 👀

    
_{Renan Oliveira}
🔧 🔌

    
_{Dominik Deimel}
💻 📖

    
_{Lior Lindvor}
💻

  

  

    
_{Jonathan Ribas}
💻

    
_{Ali Ghanei}
💻

    
_{Maya Shavin}
📖

    
_{Alexander Devitsky}
💻

  

  

    
_{Diego Alba}
💻

    
_{Abdellatif EL MIZEB}
💻

    
_{Beniamin Sinca}
🐛 💻

    
_maaarghk
💻

    
_{Shankar Konar}
💻

  

  

    
_{Bratuniak Oleg}
🐛

    
_{Drew Michael}
🐛

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!