Real World Vendure

This project demonstrates a real-world Vendure server setup. It was generated with @vendure/create, but adds extra tooling and includes some example real-world plugins.

Getting Started

1. Clone this repo
2. npm install to install dependencies
3. npm run populate to populate the database with some sample data
4. In the root dir, run npm run build to build the application
5. Run npm run start to start the Vendure server
6. Login to http://localhost:3000/admin/login with the default @vendure/create credentials (username superadmin, password superadmin).

Tooling

eslint & Prettier

These are tools for finding and fixing common code issues and formatting your code in a standard way. Run npm run lint:fix to lint and format your code.

vitest

Vitest is a testing framework used in the plugin end-to-end tests. Testing in Vendure is covered in our testing guide.

End-to-end tests for the reviews plugin are run with npm run e2e:reviews

graphql-code-generator

This is used to generate TypeScript types based on the Vendure server's GraphQL APIs. It is used to automatically generate correct types for plugin resolvers and plugin e2e tests. This ensures that whenever a schema is changed or a CustomField added, new typings can be generated to make sure your resolvers and tests are correct.

Whenever a change to the GraphQL API is made either by a plugin schema extension or by the definition of CustomFields, run yarn codegen to update the TypeScript definitions (make sure the server is running locally at the same time).

Plugins

Reviews Plugin

This plugin adds the capability for customers to create product reviews which can then be used to display product ratings.

The plugin showcases several advanced capabilities of the Vendure plugin system. See the reviews plugin readme for more information.

UI Extensions

This repo also demonstrates approaches to extending the Admin UI:

• Angular-based ui extensions in the reviews plugin
• A Vue-based, uncompiled ui extension

Directory structure

• /src contains the source code of your Vendure server. All your custom code and plugins should reside here.
• /static contains static (non-code) files such as assets (e.g. uploaded images) and email templates.
• /migrations contains database migration scripts (see migrations section below).

Development

npm run start

will start the Vendure server and worker processes from the src directory. Note - the first time you run this the custom UI extensions of the reviews plugin will be compiled which may take a few minutes. Subsequent runs will be much faster (providing the UI extensions of the reviews plugin do not change).

Build & deploy

npm run build

will compile the TypeScript sources into the /dist directory and compile the custom Admin UI app into the /admin-ui directory.

Then to run in production, the files /dist/index.js & /dist/index-worker.js should be run in Node.

Migrations

Migrations allow safe updates to the database schema.

To create a new migration, run:

npx vendure migrate