Skip to main content

Code Functions in TypeScript

Learn how to develop, integrate, and extend Juno Satellites with serverless functions written in TypeScript.

Quickstart​

Set up your environment to develop and extend a Satellite with custom serverless functions.

First, ensure you have the Juno CLI installed. If you haven't installed it yet, run:

npm i -g @junobuild/cli

At the root of your application, eject the Satellite if you haven't already used a template.

juno dev eject

In a new terminal window, kick off the emulator (requires Docker):

juno dev start --watch

Now, your local development environment is up and running, ready for you to start coding.

Every time you make changes to your code, it will automatically recompile and reload.

Hooks and Data Operations​

Serverless Functions are triggered by hooks, which respond to events occurring in the Satellite, such as setting a document. Before implementing a hook that manipulates data ("backend"), let's first set up a JavaScript function in your ("frontend") dApp.

Define a setter function in your frontend dApp as follows:

interface Example {
  hello: string;
}

let key: string | undefined;

const set = async () => {
  key = crypto.randomUUID();

  const record = await setDoc<Example>({
    collection: "demo",
    doc: {
      key,
      data: {
        hello: "world"
      }
    }
  });

  console.log("Set done", record);
};

This code generates a key and persists a document in a collection of the Datastore named "demo".

Additionally, add a getter to your code:

const get = async () => {
  if (key === undefined) {
    return;
  }

  const record = await getDoc({
    collection: "demo",
    key
  });

  console.log("Get done", record);
};

Without a hook, executing these two operations one after the other would result in a record containing "hello: world".

Now, let's create a hook within src/satellite/index.ts with the following implementation:

import { defineHook, type OnSetDoc } from "@junobuild/functions";
import {
  decodeDocData,
  encodeDocData,
  setDocStore
} from "@junobuild/functions/sdk";

// The data shape stored in the Satellite's Datastore
interface Person {
  hello: string;
}

// We declare a hook that listens to changes in the "demo" collection
export const onSetDoc = defineHook<OnSetDoc>({
  collections: ["demo"],
  run: async (context) => {
    // Decode the document's data (stored as a blob)
    const data = decodeDocData<Person>(context.data.data.after.data);

    // Update the document's data by enhancing the "hello" field
    const updated = {
      hello: `${data.hello} checked`
    };

    // Encode the data back to blob format
    const encoded = encodeDocData(updated);

    // Save the updated document using the same caller, collection, and key
    await setDocStore({
      caller: context.caller,
      collection: context.data.collection,
      key: context.data.key,
      doc: {
        data: encoded,
        description: context.data.data.after.description,
        version: context.data.data.after.version
      }
    });
  }
});

Once saved, your code should be automatically compiled and deployed.

When testing this feature, if you wait a bit before calling the getter, you should now receive the modified "hello: world checked" text set by the hook. This delay occurs because serverless Functions execute fully asynchronously, separate from the request-response cycle between your frontend and the Satellite.