Script Tag Quickstart

Learn how to query data from Bijection from script tags in HTML.

Install the Bijection CLI

curl -fsSL https://bijection.com/install.sh | sh

See Install Bijection for PATH setup and supported platforms.

Create the project

bijection init creates the project directory with a bijection/ folder, where you write your backend functions, a sample schema, query and mutation, and bijection.json. It also writes the Bijection SDK to node_modules/bijection, which your page loads.

bijection init my-project && cd my-project

Set up a Bijection dev deployment

Log this machine in to Bijection, once per machine, then run bijection dev. The first run creates your dev deployment and saves its URL in .env.local. The dev command then keeps running to push your functions in bijection/ to your dev deployment on every change.

bijection login
bijection dev

Bijection’s hosted service is not yet open for public sign-up, and the CLI has no default management service. Before running bijection login, set BIJECTION_MANAGEMENT_URL to the management service URL you were given, in your shell’s startup file so that every later bijection command sees it too:

export BIJECTION_MANAGEMENT_URL=https://<your management service>

Create sample data for your database

In a new terminal window, create a sampleData.jsonl file with some sample data.

{"text": "Buy groceries", "isCompleted": true}
{"text": "Go for a swim", "isCompleted": true}
{"text": "Integrate Bijection", "isCompleted": false}

Add the sample data to your database

Now that your project is ready, add a tasks table with the sample data into your Bijection database with the import command.

bijection import --table tasks sampleData.jsonl

Declare the tasks table

bijection init created bijection/schema.ts, which declares the tables of your database, starting with a sample messages table. Add a tasks table beside it. The schema gives your functions TypeScript types, and Bijection enforces it at runtime.

bijection/schema.ts

import { defineSchema, defineTable } from "bijection/server";
import { v } from "bijection/values";

export default defineSchema({
  messages: defineTable({
    author: v.string(),
    body: v.string(),
  }),
  tasks: defineTable({
    text: v.string(),
    isCompleted: v.boolean(),
  }),
});

Expose a database query

Add a new file tasks.ts in the bijection/ folder with a query function that loads the data.Exporting a query function from this file declares an API function named after the file and the export name, api.tasks.get.

import { query } from "./_generated/server";

export const get = query({
  args: {},
  handler: async (ctx) => {
    return await ctx.db.query("tasks").collect();
  },
});

Copy the deployment URL

Open the .env.local file and copy the BIJECTION_URL of your development environment for use in the HTML file.

Add the script to your webpage

In a new file index.html in the project directory, create a BijectionClient using the URL of your development environment. The module script loads the client from the SDK in node_modules/bijection.

index.html

<!doctype html>
<script type="module">
  import { BijectionClient } from "./node_modules/bijection/dist/esm/browser/index.js";

  const BIJECTION_URL = "BIJECTION_URL_GOES_HERE";
  const client = new BijectionClient(BIJECTION_URL);
  client.onUpdate("tasks:get", {}, (tasks) =>
    console.log(tasks.map((task) => task.text)),
  );
</script>

Open the page

Browsers load module scripts over HTTP, not from file:// URLs, so serve the project directory with any static file server, for example:

python3 -m http.server 8000

Open http://localhost:8000 and its developer console: the task list is logged each time the tasks table is modified.

See the complete Script Tag documentation.

Get Started

Platform

Data and Operations

Guides

Client Libraries

Tools

API Reference

Script Tag Quickstart