Skip to main content

Initial Setup

Overview​

Dcupl, crafted in TypeScript, operates seamlessly in any JavaScript/TypeScript environment, both on the client and server side. Effortlessly integrate the dcupl SDK into your existing projects and harness its intuitive and robust API for querying data, computing facets, and aggregating thousands of data points within your frontend application.

Installation​

Simply install the dcupl SDK via npm:

npm i @dcupl/core

Setup​

In this introduction, we are using a simple Stackblitz TypeScript setup. The dcupl SDK code is independent of any JavaScript framework, so you can easily copy and paste the relevant code into your own IDE.

Explanation​

1) Imports​

We import the Dcupl class from @dcupl/core and some mocked products from a static file. The products represent a simple JSON description of imaginary products generated with Chat GPT. It doesn't matter whether you fetch your data from an API or use static data - for the purposes of simplicity, we will import the data from another file, making it easy to get started with the dcupl SDK.

export const products = [
  {
    key: 'p1',
    name: 'Durable Backpack',
    price: 75,
    group: 'Backpacks',
    inStock: true,
  },
  ...
]

2) Create a new dcupl instance​

In most usecases you want to work with a single dcupl instance in your web application, incorporating multiple models and data streams. However, based on your needs, you can initialize as many instances as you want. Multiple dcupl instances do not share any common state and therefore do not interfere with one another.

If you're already familiar with the dcupl Console, you can add a configuration to connect your local instance with the dcupl Console, and subsequently, our CDN.

const dcupl = new Dcupl({
    config: {
        projectId: '...',
        apiKey: '...'
        version: 'draft'
    }
})

3) Add a model​

dcupl models play a crucial role in dcupl, as they describe the data loaded and processed within the SDK. Each entity (e.g., products, orders, receipts) is represented by a model. These models contain properties of various data types for type safety and basic validation, as well as references to other models, which define their relationships.

4) Add products data​

The SDK allows you to set, update, upsert, and delete data individually for each model. There is no specific limit to the amount of data you can add to dcupl. However, when building a data-intensive web application, several factors must be considered. We've written a blog post on this topic to help you determine the right amount of data for your particular use case. Some projects are calculating facets and aggregations using 300k+ datasets in live applications.

5) Init dcupl​

After adding your models and data, the final step in this example is to initialize dcupl. It will then work behind the scenes to create a dependency graph, set up initial data structures, and generate indexes for fast filtering, faceting, and aggregation based on the information provided by the models.