vite-plugin-cds

v0.1.5

Published

a day ago

Vite plugin for @sap/cds

0High
0Medium
0Low

jvgt

vite plugin cap cds

vite-plugin-cds

A vite plugin for @sap/cds.

Run vite apps via 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.

Run vite apps via `cds watch`

Install vite and the plugin as development dependencies in the root of 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/vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  root: './',
})

<!-- app/my-vite-app/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>My Vite App</title>
</head>
<body>
    <h1>My Vite App</h1>
</body>
</html>

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 frontend vite app, you can now import cds model files.

import cdsModel from './index.cds';

Example App

Build the cds runtime with vite (experimental)

The cds runtime needs Node.js built-in modules which are not available in the browser. This repo contains a plugin with very basic polyfills necessary to run @sap/cds in the browser. For a more complete solution, consider other polyfill libraries.

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

// 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 use parts of 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.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

Due to Node.js dependencies, functionality is limited.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

vite-plugin-cds

Usage

Run vite apps via cds watch

Import cds model files in your vite app

Build the cds runtime with vite (experimental)

Run vite apps via `cds watch`