mowmitaahmed/vendure-plugin-pages

Add vendure.io plugin "blueprint" to manage some static pages CMS like within the vendure Admin.io

vendure-plugin-pages

A vendure.io plugin for creating/editing multi-lingual html pages to be used by your front end. Not a CMS, but may save you from needing one.

It's more of a proof of concept than an "out-of-the-box" solution (for now, at least, I don't plan to publish it as npm package, but the skeleton would be here). But will others help others in getting up to speed.

To use: get the code and move the code from the src folder and put it into a src/plugins/pages folder. Also add the PagesPlugin to your src/vendure-config.ts config.

import { PagesPlugin } from './plugins/pages/pages-plugin'

export const config: VendureConfig = {
    //...
    plugins: [
      //...
      PagesPlugin,
    ]
}

Also add PagesPlugin.ui to the extensions in compileUiExtensions in the AdminUiPlugin.init section

import { PagesPlugin } from './plugins/pages/pages-plugin'
//...
export const config: VendureConfig = {
    //...
    plugins: [
        //...
        AdminUiPlugin.init({
            port: 3002,
            route: 'admin',
            app: compileUiExtensions({
                outputPath: path.join(__dirname, '../admin-ui'),
                extensions: [PagesPlugin.ui],
            }),
        }),
    ]
}

And then generate some migrations for it. yarn migration:generate pages should do it for you (untested...)

Querying pages

To get a page in your frontend, you can do a GraphQL request to the shop API like this

query {
  pageBySlug(slug:"uber-uns", languageCode:de) {
    slug
    text
    title
   
  }
}

To get all pages for a section (make sure, the endpoint uses the correct languageCode parameter, eg: `https://localhost:3000/shop-api?languageCode=de)

query {
  pagesBySection(section:"footer") {
    slug
    text
    title
   
  }
}

GraphQL Codegen

This repository can automatically generate GraphQL types for use in the plugin code (see src/e2e/plugin.e2e-spec.ts). To generate the types, ensure the development server is running, and use the command:

yarn dev:generate-types

Linting

This repository uses eslint & Prettier for finding and fixing common code issues and formatting your code in a standard way. To identify and fix issues, use the command:

yarn lint:fix

Development Server

A development server is configured in the dev-server folder, using Docker and Docker Compose to spin up a Postgres database, as well as a server and worker. This is used to test the plugin during development.

To start the server, run:

yarn dev:run

To populate or reset the database, run the following command:

yarn dev:populate

To restart the server (only) after a change, use the following command:

yarn dev:restart

Note: The Docker containers must be rebuilt when updating dependencies. Use the following command:

yarn dev:rebuild