Connect Your Storefront to Aiminaabee

In this guide, you’ll learn how to send requests from your storefront application to the Aiminaabee application.

For the recommended Next.js file layout, cookies, and store-code rules, see Build a Next.js Storefront.

Connect to the Aiminaabee Application

To send requests from the storefront to the Aiminaabee application’s Store API Routes, you have two options:

• For JavaScript frameworks: use Aiminaabee’s JS SDK. All Storefront Development guides use the JS SDK.
• For other frontend technologies: send requests to the Store REST APIs directly.

Set Up the JS SDK

Install the SDK and types:

1npm install @aiminaabeejs/js-sdk@latest @aiminaabeejs/types@latest

Create a single client module. In the Next.js template this is src/lib/config.ts:

1import Aiminaabee from "@aiminaabeejs/js-sdk"
2
3let AIMINAABEE_BACKEND_URL = "http://localhost:3000"
4
5if (process.env.AIMINAABEE_BACKEND_URL) {
6  AIMINAABEE_BACKEND_URL = process.env.AIMINAABEE_BACKEND_URL
7}
8
9export const sdk = new Aiminaabee({
10  baseUrl: AIMINAABEE_BACKEND_URL,
11  debug: process.env.NODE_ENV === "development",
12  publishableKey: process.env.NEXT_PUBLIC_AIMINAABEE_PUBLISHABLE_KEY,
13})

Where:

• AIMINAABEE_BACKEND_URL is the Aiminaabee API origin on the server. It does not need a NEXT_PUBLIC_ prefix. Default is http://localhost:3000.
• NEXT_PUBLIC_AIMINAABEE_PUBLISHABLE_KEY is the storefront publishable API key. See Publishable API Keys.

Also set NEXT_PUBLIC_DEFAULT_STORE_CODE to the store slug (for example us). Read it through a small helper (getStoreCode()). Never use a country code as the store code.

Then call Store methods with that store code first:

1import { sdk } from "@lib/config"
2import { getStoreCode } from "@lib/store-code"
3
4const storeCode = getStoreCode()
5
6sdk.store.product.list(storeCode).then(({ products }) => {
7  console.log(products)
8})

On Next.js App Router, put this kind of call in src/lib/data/*.ts with "use server" and invoke it from a page or server action — not from a client useEffect.

Refer to the Getting started guide to learn more about using the SDK.

Allow the storefront origin

Browsers only send Store API requests if your Aiminaabee API allows the storefront origin (CORS). In local development that is often a storefront on http://localhost:8000 (or 3003) calling the API on http://localhost:3000.

Configure allowed store origins on your Aiminaabee backend so the publishable API key and customer cookies work from the storefront domain.