Vendure E-Commerce Plugin Template

This is a template repository for creating Vendure e-commerce plugins. It comes pre-configured with the following features:

🛒 Vendure version 2.1.1
🧹 ESLint and Prettier for code linting and formatting
🧪 Vitest for testing
🐶 Husky as pre-commit hook
🚀 GraphQL Code Generation for Vendure admin GraphQL types

Getting Started

To create your own Vendure e-commerce plugin based on this template, follow these steps:

1. Click the "Use this template" button at the top of the GitHub repository page.

2. Clone your new repository to your local development environment.

   git clone https://github.com/your-username/your-plugin-repo.git
   cd your-plugin-repo

3. Install the project dependencies.

   yarn install

4. Configure Vendure to use your plugin. You can do this in your Vendure project's vendure-config.ts file.

   import { YourPlugin } from 'your-plugin-repo';
   
   const config: VendureConfig = {
   	// ... other config options
   	plugins: [
   		YourPlugin,
   		// ... other plugins,
   		AdminUiPlugin.init({
   			port: 3002,
   			route: 'admin',
   			app: compileUiExtensions({
   				outputPath: path.join(__dirname, '__admin-ui'),
   				extensions: [
   					YourPlugin.ui // ... plugin UI if needed
   				]
   			})
   		})
   	]
   };

5. You can now start building your custom functionality for Vendure by adding your code to the appropriate files in the src directory.

Development

This template ships a development ready Vendure server found under dev folder.
In order to setup this server:

1. Create a .env file at the root of this repo with the following content:

   SUPERADMIN_USERNAME=<database-username>
   SUPERADMIN_PASSWORD=<database-password>
   COOKIE_SECRET=<any-random-string>

2. Generate a migration file and run it:

   yarn dev:migration:generate init
   yarn dev:migration:run

3. Populate Vendure with initial data. We use the @vendure/create initial data:

   yarn dev:populate

4. And run the Vendure server:

   yarn dev:start

Formatting

We use Pretier to ensure consistent code styling. Feel free to modify Prettier rules in .prettierrc.cjs.

You can run Prettier style checks with:

yarn format

You can also fix the style errors running:

yarn format:fix

Linting

We use ESLint to ensure consistent code quality. Feel free to modify ESLint rules in .eslintrc.cjs.

You can run ESLint checks with the following command:

yarn lint

You can also fix the style errors running:

yarn lint:fix

Testing

We use Vitest to run tests.

By default, we use SQLJS database for testing population, as a wrapper for SQLite.
View more database initializers here.

The test server is populated with the data found under test/fixtures.

By default there is only one test 'Server started successfully' and can be run with:

yarn test

Graphql Types Generation

We use GraphQL Code Generator to extract the graphql types from Vendure.
By default, we create types in two places:

• src/generated-types.ts: admin-api types to use in your custom backend plugins.
• src/ui/generated-types.ts: admin-api types to use in your custom UI plugins.

If you want to extend the types, you can create files *.graphql.ts or .gql.ts where you define custom GraphQL types, queries, mutations wrapped by graphql-tag.

import gql from 'graphql-tag';

export const ExampleType = gql`
	type Example implements Node {
		id: ID!
		createdAt: DateTime!
		updatedAt: DateTime!
		title: String!
	}
`;

Feel free to modify GraphQL Code Generator configuration in codegen.ts.

You can run GraphQL Code Generator with the following command:

yarn generate-types

Note: you have to start the vendure server before running this command.