Skip to main content

Web

This backend uses better-absurd-sql.

yarn add @kikko-land/sql.js @kikko-land/absurd-web-backend

Then configure Kikko:

import { absurdWebBackend } from "@kikko-land/absurd-web-backend";
// For Vite:
import sqlWasmUrl from "@kikko-land/sql.js/dist/sql-wasm.wasm?url";
// For CRA:
// import sqlWasmUrl from "@kikko-land/sql.js/dist/sql-wasm.wasm";

const config: IInitDbClientConfig = {
  dbName: "db-name",
  dbBackend: absurdWebBackend({
    wasmUrl: sqlWasmUrl,
  }),
  plugins: [migrationsPlugin({ migrations: [] }), reactiveQueriesPlugin()],
};

It uses migration plugin. Is is useful when you need to run queries(like table creation) on app start and only once.

Configuration and usage with Vite​

For vite add this to vite config:

export default defineConfig({
  server: {
    headers: {
      "Cross-Origin-Embedder-Policy": "require-corp",
      "Cross-Origin-Opener-Policy": "same-origin",
    },
  },
});

Also to import wasm use this code:

import sqlWasmUrl from "@kikko-land/sql.js/dist/sql-wasm.wasm?url";

Code example for react + vite: https://github.com/kikko-land/kikko/tree/main/packages/vite-react-example

Code example for vue + tauri + vite: https://github.com/kikko-land/kikko/tree/main/packages/vite-react-example

Configuration and usage with create-react-app​

Create src/setupProxy.js:

module.exports = function (app) {
  app.use(function (req, res, next) {
    res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
    res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
    next();
  });
};

Also to import wasm use this code:

import sqlWasmUrl from "@kikko-land/sql.js/dist/sql-wasm.wasm";

Code example: https://github.com/kikko-land/kikko-cra-example