Skip to main content

Interact with your dapp

This guide explains how to send transactions to a blockchain node running Rell and retrieve information from it using the postchain-client library. The postchain-client allows you to connect the frontend of your dapp to the backend. This client tutorial is a continuation of the Rell backend generated from the section Build and run the Hello World dapp with Chromia CLI and guides you through how to set up your client side. You can connect the frontend at a later stage.

Prerequisites​

Create the client project​

Create a separate TypeScript project and initialize it.

mkdir my-rell-client && cd my-rell-client
npm init -y
npm install postchain-client --save
npm install -D typescript @types/node tsx
npx tsc --init
mkdir src

Client setup​

The code establishes the client connections, creates, signs, and posts a transaction to the blockchain node, and retrieves information through a query. For detailed explanation of the code setup, see JavaScript/TypeScript client.

Create my-rell-client/src/index.ts and paste in the code below, replacing <BlockchainRID> with your Blockchain RID obtained from the node output. For information on finding Blockchain RID, see Build and run the Hello World dapp with Chromia CLI.

import { createClient } from "postchain-client";

async function simpleClient() {
  // Key pair (DEV-ONLY, replace for anything beyond localhost)
  const adminPubkey = Buffer.from("031b84c5567b126440995d3ed5aaba0565d71e1834604819ff9c17f5e9d5dd078f", "hex");
  const adminPrivkey = Buffer.from("0101010101010101010101010101010101010101010101010101010101010101", "hex");

  // Connection setup
  const nodeUrl = "http://localhost:7740/"; // Using default postchain node REST API port
  const blockchainRid = "<BlockchainRID>"; // Dapp Blockchain RID
  const client = await createClient({
    nodeUrlPool: [nodeUrl],
    blockchainRid,
  });

  // Transaction
  /*const { status, statusCode, transactionRid } = */ await client.signAndSendUniqueTransaction(
    {
      operations: [
        {
          name: "set_name",
          args: ["Developer"],
        },
      ],
      signers: [adminPubkey],
    },
    { privKey: adminPrivkey, pubKey: adminPubkey }
  );

  // Query
  const result = await client.query("hello_world");
  console.log(result); // Hello Developer!
}

simpleClient().catch((e) => {
  console.error(e);
});
note

This example uses Node's built-in Buffer. In a Node.js environment, no extra configuration is needed. If you run the same code in a browser/bundler (for example Vite or webpack 5), you will hit:

ReferenceError: Buffer is not defined

To fix this, install the buffer package and add at the top of your code:

import { Buffer } from "buffer";
(globalThis as any).Buffer = Buffer;

This makes Buffer available globally, just like in Node.js.

The added client code works with the operation and query specified in the Rell file main.rell, provided in the topic Build and run the Hello World dapp with Chromia CLI. The code in the main.rell file is as follows.

module;

object my_name {
  mutable name = "World";
}

operation set_name(name) {
  my_name.name = name;
}

query hello_world() = "Hello %s!".format(my_name.name);

The project structure for the client setup should be as follows.

my-rell-client
    |--node_modules
    |--src
    |   |--index.ts
    |--package-lock.json
    |--package.json
    |--tsconfig.json

Run client code​

From the project root:

npx tsx src/index.ts

After running the code, you should see:

Hello Developer!

Congratulations! With the help of the postchain-client library, you have successfully sent transactions and retrieved information from a blockchain node running Rell.