> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bijection.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Script Tag Quickstart

> Add Bijection to any website

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

<Steps>
  <Step title="Install the Bijection CLI">
    ```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    curl -fsSL https://bijection.com/install.sh | sh
    ```

    See [Install Bijection](/get-started/install) for PATH setup and supported
    platforms.
  </Step>

  <Step title="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.

    ```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    bijection init my-project && cd my-project
    ```
  </Step>

  <Step title="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.

    ```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    bijection login
    bijection dev
    ```

    <Note>
      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:

      ```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
      export BIJECTION_MANAGEMENT_URL=https://<your management service>
      ```
    </Note>
  </Step>

  <Step title="Create sample data for your database">
    In a new terminal window, create a `sampleData.jsonl`
    file with some sample data.

    ```json theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    {"text": "Buy groceries", "isCompleted": true}
    {"text": "Go for a swim", "isCompleted": true}
    {"text": "Integrate Bijection", "isCompleted": false}
    ```
  </Step>

  <Step title="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.

    ```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    bijection import --table tasks sampleData.jsonl
    ```
  </Step>

  <Step title="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.

    ```ts bijection/schema.ts theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    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(),
      }),
    });
    ```
  </Step>

  <Step title="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`.

    ```ts theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    import { query } from "./_generated/server";

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

  <Step title="Copy the deployment URL">
    Open the `.env.local` file and copy the `BIJECTION_URL` of your development
    environment for use in the HTML file.

    <>    </>
  </Step>

  <Step title="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`.

    ```html index.html theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    <!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>
    ```
  </Step>

  <Step title="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:

    ```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    python3 -m http.server 8000
    ```

    Open [http://localhost:8000](http://localhost:8000) and its developer
    console: the task list is logged each time the `tasks` table is modified.
  </Step>
</Steps>

See the complete [Script Tag documentation](/client/javascript/script-tag).