Installation & Configuration

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

Configure

Option A: AirState Cloud

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

Login to the AirState Cloud Console to grab an appId, then call configure with it.

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

1. Separation of dev, staging and production appIds
2. Simpler testing (you can/should use self-hosted server for e2e tests)
3. 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