Install & Configure — AirState Docs

Install

The React integration is actually a wrapper around AirState's vanilla JS client, which is why we'll install both @airstate/client and @airstate/react

npm install --save-exact @airstate/client @airstate/react

It is advisable to use --save-exact or --exact

This to avoid accidentally introducing inconsistencies due to minor / patch updates. (We always update @airstate/client and @airstate/react to be the same version)

Configure

Option A: AirState Cloud

This is the simplest to get started and we highly recommend this to test out AirState.

import { configure } from '@airstate/client';

configure({
    appId: '[YOUR CLOUD APP ID]',
});

Option B: Self Hosted Server

If you already have a self-hosted AirState instance running, you can call configure with its address.

import { configure } from '@airstate/client';

configure({
    server: 'wss://airstate.your-server.com/ws', // <-- required for self-hosting
});

If you have a multitenant setup in for your AirState, you can opt to also include the appId

configure({
    appId: '[APP ID]',
    server: 'wss://airstate.your-server.com/ws',
});

Config Best Practice

AirState appIds are public-safe information, but we recommend reading environment variables for appId and/or server instead of baking it into the codebase.

You get benefits like

Separation of dev, staging and production appIds
Simpler testing (you can/should use self-hosted server for e2e tests)
You get open-source your tool too

Vite / Astro

Read import.meta.env.* for environment variables.

Prefix your environment variables with VITE_ to make them available to your frontend.

configure({
    appId: import.meta.env.VITE_AIRSTATE_APP_ID,
    server: import.meta.env.VITE_AIRSTATE_SERVER,
});

Read the environment variables doc for Vite or Astro to explore this further.

NextJS

Read process.env.* for environment variables.

Prefix your environment variables with NEXT_PUBLIC_ to make them available to your frontend.

configure({
    appId: process.env.NEXT_PUBLIC_AIRSTATE_APP_ID,
    server: process.env.NEXT_PUBLIC_AIRSTATE_SERVER,
});

NextJS: Environment Variables Guide

Installation & Configuration