Convert Figma logo to code with AI

vendure-ecommerce logovendure

The commerce platform with customization in its DNA.

5,565
986
5,565
345
View on GitHubView on NPM

Top Related Projects

medusajs's avatar

medusa

24,996

Building blocks for digital commerce

Sylius's avatar

Sylius

7,840

Open Source eCommerce Framework on Symfony

magento's avatar

magento2

11,507

Prior to making any Submission(s), you must sign an Adobe Contributor License Agreement, available here at: https://opensource.adobe.com/cla.html. All Submissions you make to Adobe Inc. and its affiliates, assigns and subsidiaries (collectively “Adobe”) are subject to the terms of the Adobe Contributor License Agreement.

shopware's avatar

shopware

2,789

Shopware 6 is an open commerce platform based on Symfony Framework and Vue and supported by a worldwide community and more than 1.500 community extensions

woocommerce's avatar

woocommerce

9,389

A customizable, open-source ecommerce platform built on WordPress. Build any commerce solution you can imagine.

Quick Overview

Vendure is an open-source, headless e-commerce framework built on top of Node.js, TypeScript, and GraphQL. It provides a flexible and scalable architecture for building custom e-commerce solutions, allowing developers to create and manage online stores with a focus on performance, extensibility, and developer experience.

Pros

  • Headless Architecture: Vendure separates the front-end and back-end components, allowing for greater flexibility and the ability to build custom user interfaces.
  • GraphQL API: Vendure provides a powerful GraphQL API, enabling efficient data fetching and reducing the need for multiple API calls.
  • Extensibility: Vendure is designed to be highly extensible, with a plugin system that allows developers to add custom functionality and integrate with third-party services.
  • TypeScript: Vendure is written in TypeScript, providing a robust type system and improved developer experience.

Cons

  • Learning Curve: Vendure's headless architecture and use of GraphQL may have a steeper learning curve for developers unfamiliar with these technologies.
  • Complexity: As a feature-rich e-commerce framework, Vendure can be more complex to set up and configure compared to simpler e-commerce solutions.
  • Maturity: Vendure is a relatively new project, and while it is actively developed, it may not have the same level of community support and third-party integrations as more established e-commerce platforms.
  • Performance: Depending on the complexity of the e-commerce application, the GraphQL API and headless architecture may introduce some performance overhead compared to more traditional e-commerce platforms.

Getting Started

To get started with Vendure, follow these steps:

  1. Install Node.js and npm (or yarn) on your system.
  2. Create a new Vendure project using the Vendure CLI: 
    npm install -g @vendure/cli
vendure create my-vendure-project
  3. Navigate to the project directory and start the Vendure server: 
    cd my-vendure-project
npm run start
  4. Open your web browser and visit http://localhost:3000/admin to access the Vendure admin interface.
  5. Follow the on-screen instructions to set up your Vendure store, including creating products, managing orders, and configuring settings.

Vendure also provides a range of plugins and extensions that can be installed to add additional functionality to your e-commerce solution. You can explore the available plugins in the Vendure plugin directory.

Competitor Comparisons

medusajs logo

medusa

24,996

Building blocks for digital commerce

Pros of Medusa

  • More flexible and customizable architecture, allowing for easier extension and modification
  • Better support for headless commerce and multi-channel selling
  • Stronger focus on developer experience with a more modern tech stack

Cons of Medusa

  • Smaller community and ecosystem compared to Vendure
  • Less comprehensive documentation and fewer learning resources
  • Potentially steeper learning curve for developers new to the platform

Code Comparison

Medusa (JavaScript/TypeScript):

const product = await productService.create({
  title: "T-Shirt",
  variants: [
    { title: "Small", prices: [{ amount: 1000, currency_code: "usd" }] },
    { title: "Medium", prices: [{ amount: 1200, currency_code: "usd" }] }
  ]
});

Vendure (TypeScript):

const product = await productService.create({
  translations: [{ languageCode: LanguageCode.en, name: "T-Shirt" }],
  productVariants: [
    { translations: [{ languageCode: LanguageCode.en, name: "Small" }], price: 1000 },
    { translations: [{ languageCode: LanguageCode.en, name: "Medium" }], price: 1200 }
  ]
});

Both examples demonstrate creating a product with variants, but Medusa's approach is more concise and JavaScript-friendly, while Vendure's is more structured and TypeScript-oriented.

Sylius logo

Sylius

7,840

Open Source eCommerce Framework on Symfony

Pros of Sylius

  • More mature and established e-commerce framework with a larger community
  • Built on Symfony, providing a robust and well-documented foundation
  • Offers a wider range of built-in features and integrations out of the box

Cons of Sylius

  • Steeper learning curve due to its complexity and Symfony-based architecture
  • Less flexible for headless commerce scenarios compared to Vendure
  • Potentially heavier and slower performance for simpler e-commerce projects

Code Comparison

Sylius (PHP):

class Product extends BaseProduct
{
    public function __construct()
    {
        parent::__construct();
        $this->initializeTranslationsCollection();
    }
}

Vendure (TypeScript):

@Entity()
export class Product extends VendureEntity {
  @Column()
  name: string;

  @Column()
  slug: string;
}

The code snippets demonstrate the different approaches to defining product entities in Sylius and Vendure. Sylius uses PHP and extends a base product class, while Vendure utilizes TypeScript with decorators for entity definition.

magento logo

magento2

11,507

Prior to making any Submission(s), you must sign an Adobe Contributor License Agreement, available here at: https://opensource.adobe.com/cla.html. All Submissions you make to Adobe Inc. and its affiliates, assigns and subsidiaries (collectively “Adobe”) are subject to the terms of the Adobe Contributor License Agreement.

Pros of Magento 2

  • Extensive ecosystem with a large community and marketplace for extensions
  • Robust enterprise-level features for complex e-commerce requirements
  • Comprehensive documentation and extensive learning resources

Cons of Magento 2

  • Steeper learning curve and more complex architecture
  • Higher resource requirements and potentially slower performance
  • More expensive to develop and maintain, especially for smaller businesses

Code Comparison

Magento 2 (PHP):

<?php
namespace Magento\Catalog\Model;
class Product extends \Magento\Catalog\Model\AbstractModel
{
    public function getName()
    {
        return $this->_getData(self::NAME);
    }
}

Vendure (TypeScript):

import { Product } from '@vendure/core';
import { DeepPartial } from '@vendure/common/lib/shared-types';

export class ProductService {
    async create(input: DeepPartial<Product>): Promise<Product> {
        // Implementation
    }
}

Magento 2 uses a more traditional OOP approach with PHP, while Vendure leverages TypeScript and modern JavaScript practices. Vendure's code tends to be more concise and type-safe, whereas Magento 2's codebase is more extensive and complex due to its broader feature set and legacy considerations.

shopware logo

shopware

2,789

Shopware 6 is an open commerce platform based on Symfony Framework and Vue and supported by a worldwide community and more than 1.500 community extensions

Pros of Shopware

  • More mature and established e-commerce platform with a larger community
  • Offers a user-friendly administration interface out of the box
  • Provides a wide range of built-in features and plugins

Cons of Shopware

  • Less flexible architecture compared to Vendure's headless approach
  • Steeper learning curve due to its monolithic structure
  • Potentially higher resource requirements for hosting and maintenance

Code Comparison

Shopware (PHP):

$product = new ProductEntity();
$product->setName('Example Product');
$product->setPrice(new Price(100, 'EUR'));
$this->productRepository->create([$product], Context::createDefaultContext());

Vendure (TypeScript):

const product = await this.productService.create({
  translations: [{ languageCode: LanguageCode.en, name: 'Example Product' }],
  slug: 'example-product',
  variants: [{ sku: 'EX-001', price: 1000 }],
});

Both examples demonstrate creating a product, but Vendure's approach is more modular and TypeScript-based, while Shopware uses a more traditional PHP object-oriented style.

woocommerce logo

woocommerce

9,389

A customizable, open-source ecommerce platform built on WordPress. Build any commerce solution you can imagine.

Pros of WooCommerce

  • Larger ecosystem with extensive plugins and themes
  • Easier setup for non-technical users
  • Better integration with WordPress

Cons of WooCommerce

  • Less flexible for custom development
  • Performance can be slower for large-scale stores
  • Tighter coupling to WordPress

Code Comparison

WooCommerce (PHP):

add_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
add_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );

Vendure (TypeScript):

import { VendureConfig } from '@vendure/core';

export const config: VendureConfig = {
  apiOptions: {
    port: 3000,
    adminApiPath: 'admin-api',
    shopApiPath: 'shop-api',
  },
  // ...
};

WooCommerce is built on WordPress and uses PHP with hooks and actions for customization. Vendure is a headless e-commerce framework using TypeScript and GraphQL, offering more flexibility for developers but requiring more technical expertise. WooCommerce is easier to set up and has a larger ecosystem, while Vendure provides better performance and scalability for complex, custom e-commerce solutions.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Vendure

An open-source headless commerce platform built on Node.js with GraphQL, Nest & TypeScript, with a focus on developer productivity and ease of customization.

Build Status Publish & Install Lerna

vendure-github-social-banner

www.vendure.io

Branches

  • master - The latest stable release, currently the 2.x series.
  • minor - The next patch release, including new features
  • major - The next major release (v3.0)
  • v2.x - The 2.x line, which will receive critical fixes until the end-of-life on 31.12.2024. The code in this branch is under the MIT license.

Structure

This project is a monorepo managed with Lerna. Several npm packages are published from this repo, which can be found in the packages/ directory.

vendure/
├── docs/           # Documentation source
├── e2e-common/     # Shared config for package e2e tests
├── license/        # License information & CLA signature log
├── packages/       # Source for the Vendure server, admin-ui & core plugin packages
├── scripts/
    ├── changelog/  # Scripts used to generate the changelog based on the git history
    ├── codegen/    # Scripts used to generate TypeScript code from the GraphQL APIs
    ├── docs/       # Scripts used to generate documentation markdown from the source

Development

[!IMPORTANT] The following instructions are for those who want to develop the Vendure core framework or plugins (e.g. if you intend to make a pull request). For instructions on how to build a project using Vendure, please see the Getting Started guide.

1. Install top-level dependencies

npm install

The root directory has a package.json which contains build-related dependencies for tasks including:

  • Building & deploying the docs
  • Generating TypeScript types from the GraphQL schema
  • Linting, formatting & testing tasks to run on git commit & push

2. Build all packages

npm run build

Packages must be built (i.e. TypeScript compiled, admin ui app built, certain assets copied etc.) before being used.

Note that this can take a few minutes.

3. Set up the server

The server requires an SQL database to be available. The simplest option is to use SQLite, but if you have Docker available you can use the dev-server docker-compose file which will start up both MariaDB and Postgres as well as their GUI management tools.

Vendure uses TypeORM, and officially supports MySQL, PostgreSQL and SQLite, though other TypeORM-supported databases may work.

  1. Configure the dev config, making sure the connection settings in the getDbConfig() function are correct for the database type you will be using.
  2. Create the database using your DB admin tool of choice (e.g. phpMyAdmin if you are using the docker image suggested above). Name it according to the getDbConfig() settings. If you are using SQLite, you can skip this step.
  3. Populate mock data: 
     cd packages/dev-server
 DB=<mysql|postgres|sqlite> npm run populate
    If you do not specify the DB variable, it will default to "mysql".

4. Run the dev server

cd packages/dev-server
DB=<mysql|postgres|sqlite> npm run start

Or if you are in the root package

DB=<mysql|postgres|sqlite> npm run dev-server:start

If you do not specify the DB argument, it will default to "mysql".

Testing admin ui changes locally

If you are making changes to the admin ui, you need to start the admin ui independent from the dev-server:

  1. cd packages/admin-ui
  2. npm run start
  3. Go to http://localhost:4200 and log in with "superadmin", "superadmin"

This will auto restart when you make changes to the admin ui. You don't need this step when you just use the admin ui just to test backend changes.

Testing your changes locally

This example shows how to test changes to the payments-plugin package locally, but it will also work for other packages.

  1. Open 2 terminal windows:
  • Terminal 1 for watching and compiling the changes of the package you are developing
  • Terminal 2 for running the dev-server
# Terminal 1
cd packages/payments-plugin
npm run watch

:warning: If you are developing changes for the corepackage, you also need to watch the common package:

# Terminal 1
# Root of the project
npm run watch:core-common
  1. After the changes in your package are compiled you have to stop and restart the dev-server:
# Terminal 2
cd packages/dev-server
DB=sqlite npm run start
  1. The dev-server will now have your local changes from the changed package.

Code generation

graphql-code-generator is used to automatically create TypeScript interfaces for all GraphQL server operations and admin ui queries. These generated interfaces are used in both the admin ui and the server.

Running npm run codegen will generate the following files:

Testing

Server Unit Tests

The core and several other packages have unit tests which are can be run all together by running npm run test from the root directory, or individually by running it from the package directory.

Unit tests are co-located with the files which they test, and have the suffix .spec.ts.

If you're getting Error: Bindings not found., please run npm rebuild @swc/core.

End-to-end Tests

Certain packages have e2e tests, which are located at /packages/<name>/e2e/. All e2e tests can be run by running npm run e2e from the root directory, or individually by running it from the package directory.

e2e tests use the @vendure/testing package. For details of how the setup works, see the Testing docs.

When debugging e2e tests, set an environment variable E2E_DEBUG=true which will increase the global Jest timeout and allow you to step through the e2e tests without the tests automatically failing due to timeout.

Release Process

All packages in this repo are released at every version change (using Lerna's fixed mode). This simplifies both the development (tracking multiple disparate versions is tough) and also the developer experience for users of the framework (it is simple to see that all packages are up-to-date and compatible).

To make a release:

1. npm run publish-release

It will run lerna publish which will prompt for which version to update to. Although we are using conventional commits, the version is not automatically being calculated from the commit messages. Therefore the next version should be manually selected.

Next it will build all packages to ensure the distributed files are up to date.

Finally, the command will create changelog entries for this release.

2. git push origin master --follow-tags

The reason we do not rely on Lerna to push the release to Git is that this repo has a lengthy pre-push hook which runs all tests and builds the admin ui. This long wait then invalidates the npm OTP and the publish will fail. So the solution is to publish first and then push.

License

See LICENSE.md.

NPM DownloadsLast 30 Days