Aiminaabee

5. Initialize JS SDK

Create the Aiminaabee JS SDK client with store code and auth storage.

On this page

In this step, you'll set up Aiminaabee's JS SDK in your Expo app. You'll use the SDK to interact with the Aiminaabee backend.

To initialize the SDK, create the file lib/sdk.ts in your Expo project with the following content:

ts

tsCopy
import Aiminaabee from "@aiminaabeejs/js-sdk"
import AsyncStorage from "@react-native-async-storage/async-storage"
import Constants from "expo-constants"


const AIMINAABEE_BACKEND_URL =
  Constants.expoConfig?.extra?.EXPO_PUBLIC_AIMINAABEE_BACKEND_URL ||
  process.env.EXPO_PUBLIC_AIMINAABEE_BACKEND_URL ||
  "http://localhost:3000"


const AIMINAABEE_PUBLISHABLE_API_KEY =
  Constants.expoConfig?.extra?.EXPO_PUBLIC_AIMINAABEE_PUBLISHABLE_KEY ||
  process.env.EXPO_PUBLIC_AIMINAABEE_PUBLISHABLE_KEY ||
  ""


export const sdk = new Aiminaabee({
  baseUrl: AIMINAABEE_BACKEND_URL,
  debug: __DEV__,
  auth: {
    type: "jwt",
    jwtTokenStorageMethod: "custom",
    storage: AsyncStorage,
  },
  publishableKey: AIMINAABEE_PUBLISHABLE_API_KEY,
})

You configure the SDK with the:

  • Aiminaabee backend URL, which is read from the environment variable EXPO_PUBLIC_AIMINAABEE_BACKEND_URL. If the variable is not set, it defaults to http://localhost:3000.
  • Publishable API key, which is required to retrieve products in the associated sales channel. It is read from the environment variable EXPO_PUBLIC_AIMINAABEE_PUBLISHABLE_KEY.

You also customize the JWT token storage method of the JS SDK to use AsyncStorage, which is suitable for React Native apps.

Refer to the Getting started guide for more configuration options.

Set Environment Variables

Next, you'll set the environment variables in your Expo project. Before you do that, you need to retrieve the Aiminaabee backend URL and the Publishable API key.

The Aiminaabee backend URL is the URL where your Aiminaabee server is running. If you're running the Aiminaabee server locally, it should be the IP address of your machine at the port 3000. For example, http://192.168.1.100:3000.

You can find your machine's local IP address by running the following command in your terminal:

macOS

bash

bashCopy
ipconfig getifaddr en0

Linux

bash

bashCopy
ip addr

Windows

bash

bashCopy
ipconfig

Next, to get the Publishable API key, start the Aiminaabee application by running the following command in its directory:

bash

bashCopy
npm run dev

Then:

  1. Open the Aiminaabee vendor dashboard at http://localhost:3000/app and log in.
  2. Go to Settings > Publishable API Keys.
  3. Either copy the key of an existing Publishable API key, or create a new one by clicking on the Create Publishable API Key button.

Once you have the Aiminaabee backend URL and the Publishable API key, create the file .env in the root directory of your Expo project with the following content:

shell

shellCopy
EXPO_PUBLIC_AIMINAABEE_BACKEND_URL=http://192.168.1.100:3000
EXPO_PUBLIC_AIMINAABEE_PUBLISHABLE_KEY=your_publishable_api_key

Make sure to replace the values with your actual Aiminaabee backend URL and Publishable API key.

Optional: Update CORS in Aiminaabee

If you plan to test the Expo app in a web browser, you'll need to update the CORS settings in the Aiminaabee backend to allow requests from the Expo development server.

In your Aiminaabee application's directory, add the Expo development server URL to the STORE_CORS and AUTH_CORS environment variables in the .env file:

env

envCopy
STORE_CORS=previous_values...,http://localhost:8081
AUTH_CORS=previous_values...,http://localhost:8081

Append ,http://localhost:8081 to the existing values of STORE_CORS and AUTH_CORS, which is the default URL for the Expo development server.

Make sure to restart the Aiminaabee server after making changes to the .env file.

Next: 6. Region selector