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
See how it works
API Schema
Frontstack generates a schema for your API, based on the blocks and pages that you have defined.
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.
Generate client module
A client module is generated that provides convenient, typesafe and annotated methods for interacting with the API.
Use the client
You can now use the client library in your frontend project
The final user code in your project will look something like this:
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
Login and connect project
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.
Verify that you are logged in by running the info
command:
Finally, you can connect your project using the project
command:
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.
Generate client
Now that you have connected your project, you can generate the client.
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 projectfetch-api.d.t
- Type definitions for the clientgenerated-types.d.ts
- Type definitions for the schemaquery-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
Troubleshooting
In case you get an error, you can try to delete the .frontstack-local
directory and run the login
and project
commands again.
If you are using the frontstack
command, make sure that it is installed globally and updated to the latest version (run pnpm add -g @frontstackdev/cli
).
Check that you are using the latest version using frontstack --version
or npx @frontstackdev/cli --version
.
Use the client
You can now import the client into your project and start using it.