Step 3: Connect to RelayX

Create dashboard/src/relayx.js to hold the shared RelayApp instance:

import { RelayApp } from "@relay-x/app-sdk";

export const app = new RelayApp({
  api_key: import.meta.env.VITE_RELAYX_API_KEY,
  secret: import.meta.env.VITE_RELAYX_SECRET,
  mode: import.meta.env.VITE_RELAYX_MODE || "production",
});

export const DEVICE_IDENT = import.meta.env.VITE_DEVICE_IDENT;

Wrap the app tree in RelayProvider. Edit dashboard/src/main.jsx:

import React from "react";
import ReactDOM from "react-dom/client";
import { RelayProvider } from "@relay-x/ui";
import "@relay-x/ui/styles.css";

import { app } from "./relayx";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RelayProvider app={app}>
      <App />
    </RelayProvider>
  </React.StrictMode>,
);

Every hook and component inside RelayProvider has access to RelayX with no further wiring.

Test it

Start the dev server:

npm run dev

Open http://localhost:5173. The page loads without errors. Open the browser console and verify there are no authentication or connection errors.

Test it​

Test it