vite-plugin-cds

A vite plugin for @sap/cds.

• vite apps with cds watch
• Import .cds model files in your vite app
• @sap/cds in the browser

Usage

Prerequisite:

• This library has a peer dependency to @sap/cds.

Vite apps with cds watch

Install vite and this plugin as development dependencies in your CAP project.

npm install --save-dev vite vite-plugin-cds

Add a vite.config.js to any frontend application in the app/ folder of your CAP project.

app/
  my-vite-app/
    index.html
    vite-config.js

The index.html is now served automatically via vite when you run:

cds watch

Example App

Import cds model files in your vite app

Add the cds plugin to your vite config.

// vite.config.js
import { defineConfig } from 'vite'
import { cds } from 'vite-plugin-cds'

export default defineConfig({
  plugins: [ cds() ],
  root: './',
})

In your vite app, you can now import cds model files.

import cdsModel from './index.cds';

Example App

cds in the browser

You need the following dependencies for a functional runtime:

npm install --save-dev vite vite-plugin-cds @sap/cds @cap-js/sqlite @sqlite.org/sqlite-wasm express

Configure the plugins in your vite config:

// vite.config.js
import { defineConfig } from 'vite'
import { node, cap } from 'vite-plugin-cds'

export default defineConfig({
  plugins: [ node(), cap() ],
  root: './',
})

In your frontend vite app, you can now compile a model and start the cds runtime:

import cds from '@sap/cds'
import sqlite from 'better-sqlite3'
import express from 'express';

//======= compile a csn model =======
const csn = cds.compile(`
entity my.Books {
  key ID: Integer;
  title: String
}
service CatalogService {
  entity Books as projection on my.Books;
}`);
console.log(csn.definitions)

//======= start a cds server =======
await sqlite.initialized // wait for sqlite3-wasm to be ready (part of polyfill)

cds.model = cds.compile.for.nodejs (csn);
cds.db = await cds.connect.to('db');
await cds.deploy(csn).to(cds.db);

const app = express();
await cds.serve('all').from(csn).in(app);

const response = await app.handle({url: '/odata/v4/catalog/Books'}) // part of polyfill
console.log('response', response);

Example App

Known limitations:

• cds.context is not unique per request / transaction, see asynchronous context tracking