Client

Frontstack’s API Client (also referred to as “Client SDK” or “SDK”) is a type-safe, auto-generated JavaScript library that allows you to interact with your API. It is generated from your API schema (blocks, listings, pages, etc.) using the Frontstack CLI. You don’t have to use the SDK to use Frontstack, but you will miss out on some really nice features, such as:

Types for all API responses and payloads
Autocompletion and type checking for queries and parameters
Dynamic resolving of API endpoints
Authentication and header management
Convenience methods for tracking API usage and monitoring performance
Token management for releases

See how it works

API Schema

Frontstack generates a schema for your API, based on the blocks and pages that you have defined.

openapi.yml

openapi: 3.1.0
  info:
    title: Fetch API Specification (Nexus Project)
    description: 'Release 12/03/2025 20:48'
    version: c0d3d4-flexing-monkey
# ...

The cool part - this schema is a fully compliant OpenAPI 3.1.0 specification, so you can use it with any OpenAPI tooling - for example import it into Postman or generate server stubs in other languages.

Translate into TypeScript definitions

The schema is then transformed into a set of TypeScript interfaces and types that define your API.

.frontstack/generated-types.d.ts

// Extract from the file

export type CategoryDetail {
  id: string
  name: string
  description: string
  products: Product[]
}

export type Responses = {
  CategoryDetail: CategoryDetail
}

Generate client module

A client module is generated that provides convenient, typesafe and annotated methods for interacting with the API.

.frontstack/generated-client.js

// Extract from the file
import type { Blocks, RequestOptions, Responses } from './generated-types';

client = {
  block: <ApiName extends keyof Blocks>(
    name: ApiName,
    key: string,
    config?: RequestOptions
  ) => Promise<Responses[ApiName]>
};

export default client;

Use the client

You can now use the client library in your frontend project

index.ts

import { client } from './.frontstack/generated-client'

const data = await client.block('CategoryDetail', 'running-shoes')

The final user code in your project will look something like this:

const result = await client.listing(
  "ProductList",
  {
    categoryId: "123e4567-e89b-12d3-a456-426614174000",
  },
  {
    query: {
      filter: [
        {
          type: "equals",
          field: "attributes.size",
          value: "10",
          // ^? (property) value: string | undefined
        },
      ],
      sort: {
        field: "name",
        order: "desc",
      },
      // ^? (property) sort: 'label' | 'price' | 'createdAt' | 'updatedAt'
    },
  }
);

console.log(result);
//          ^? const result: ProductList

Prerequisites

In order to complete this guide, you will need:

Node.js installed on your machine
An existing Node.js project (or run pnpm init to create one), ideally with TypeScript
A Frontstack account
The Frontstack CLI installed globally or using npx
We recommend that you use pnpm as your package manager

Before we proceed, we need to open our current project directory in the terminal. It is wherever you have your package.json file. A browser window will open, and you will be prompted to login to your Frontstack account.

# From your project root
frontstack login

> Please continue login in your browser at ...
> [SUCCESS] Login successful

Verify that you are logged in by running the info command:

frontstack info

> Status: No project selected.
>
> Run frontstack project to select a Frontstack project

Finally, you can connect your project using the project command:

frontstack project

> ? Pick a project › - Use arrow-keys. Return to submit.
>   ❯   Nexus Project
>   ❯   Quantum Project
>   ❯   Frontstack Project
>
> Project Nexus Project selected

Done - you will notice that the CLI has created a .frontstack-local directory that contains your project configuration.

We recommend that you add this directory to your .gitignore file, because it contains sensitive information, such as your Frontstack API token.

.gitignore

# Frontstack local configuration
.frontstack-local/

Generate client

Now that you have connected your project, you can generate the client.

frontstack generate

> Javascript client generated for ...

This command will generate four files into a .frontstack directory in your project root:

generated-client.js - The client that you can import into your project
fetch-api.d.t - Type definitions for the client
generated-types.d.ts - Type definitions for the schema
query-types.ts - Type definitions for queries

These files should be committed to your repository, as they represent the API contract between your project and the Frontstack API. In other words - any changes to these files indicate that the API has changed.

Troubleshooting

Use the client

You can now import the client into your project and start using it.

// src/index.ts

import { client } from "./.frontstack/generated-client";

const data = await client.block("CategoryDetail", categoryId);

Domain

Indicate the domain you’re using by passing the config object to all client calls and setting requestUrl to your currently requested URL:

const data = await client.block("CategoryDetail", categoryId, { requestUrl: 'https://my.app.tld/some/page' });

With the given URL, Frontstack will match your call to the correct domain (and thus region and locale configuration) and will return correct links for any Page Route fields. If you’re using a development domain alias, this configuration is essential for correctly accessing any page URLs.

Next Steps

→ Explore Blocks

Getting Started

Essentials

Reference

Integrations

Prerequisites

Generate client

Use the client

Domain

Next Steps

Getting Started

Essentials

Reference

Integrations

​Prerequisites

​Login and connect project

​Generate client

​Use the client

​Domain

​Next Steps

Prerequisites

Login and connect project

Generate client

Use the client

Domain

Next Steps