Installing Dyrected

Use this page when you are ready to add Dyrected to an existing React app and want the quickest path to a working admin. By the end, you should have the Cloud connection values in place, a generated dyrected.config.ts, an admin route mounted in your app, and be ready to move on to Defining a Schema.

For React, this quick start is Cloud-only. The current SPA path connects a React app to Dyrected Cloud and does not support running the full Dyrected backend inside the app itself.

Before you start

Make sure all three of these are true before you run anything:

• you already have a working React app
• Node.js 22 or newer is installed
• you are running the command from the root of the app

Before you run the CLI, open your site in app.dyrected.com and keep these three values nearby:

• Site ID
• Site API key
• Base URL

What this install path does

On the React SPA path, the CLI does not scaffold a local backend, but it does create a local dyrected.config.ts.

Instead, it does four practical things:

• installs the core package and the React integration
• writes a starter dyrected.config.ts
• writes an embedded admin entry file
• writes the Cloud environment variables your app will use

The important mental model is the same as the Next.js and Nuxt Cloud paths: your schema lives in this repo, but the backend itself lives in Dyrected Cloud.

npx dyrected init -y -f react -b cloud -p admin

dyrected.config.ts
src/admin.tsx
.env.example

npm run dyrected:sync-schema

import { BrowserRouter, Routes, Route } from "react-router-dom";
import HomePage from "./HomePage";
import AdminPage from "./admin";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/admin" element={<AdminPage />} />
      </Routes>
    </BrowserRouter>
  );
}

What happens next

After install, the next job is to reshape the generated config so it matches the content your React app actually needs.

The backend still lives in Dyrected Cloud, but the schema is now authored in dyrected.config.ts, just like the other Cloud quick starts.

Troubleshooting

If something goes wrong, check these first:

• if /admin does not load, confirm the route points at the generated admin page
• if the admin cannot connect, re-check VITE_DYRECTED_URL, VITE_DYRECTED_API_KEY, and VITE_DYRECTED_SITE_ID
• if schema changes are not showing up in Cloud, run npm run dyrected:sync-schema
• if the admin page fails to mount, confirm react-router-dom and @tanstack/react-query are installed

For the full troubleshooting guide, see Troubleshooting.

Success check

You are ready for the next page when:

• the app has a working /admin route
• the Cloud credentials are in .env
• dyrected.config.ts exists
• the admin loads against your Dyrected Cloud site

Once those are true, continue to Defining a Schema.