Local vs. Cloud Dashboard

Hexclave has two common ways to work with a project:

Option	Best for	How it is configured
Local dashboard	Development	A local `hexclave.config.ts` file plus `hexclave dev --config-file ...`.
Cloud dashboard	Production	A hosted project on app.hexclave.com with project ID and keys in your app environment.

Development Environment

A development environment starts Hexclave for the project you are currently building. It is the recommended default while integrating Hexclave because your project config can live next to your app code in hexclave.config.ts. Use a development environment when you want to:

Keep app setup, auth settings, RBAC permissions, email templates, payment products, and similar config in source control.
Let teammates review config changes in pull requests.
Try Hexclave apps before creating or connecting a cloud project.
Run your app with environment variables provided by the Hexclave CLI.

The usual setup looks like this:

hexclave.config.ts

import type { HexclaveConfig } from "@hexclave/js/config";

export const config: HexclaveConfig = "show-onboarding";

package.json

{
  "scripts": {
    "dev": "hexclave dev --config-file ./hexclave.config.ts -- npm run dev:inner",
    "dev:inner": "<your-existing-dev-script>"
  }
}

For the full config file reference, see hexclave.config.ts. For CLI details, see Hexclave CLI.

Cloud Dashboard

The cloud dashboard is the hosted Hexclave app at app.hexclave.com. Use it for projects that should live in Hexclave Cloud, especially production projects and projects shared with a team. Use the cloud dashboard when you want to:

Manage a real Hexclave Cloud project.
Generate production project keys.
Configure environment-specific settings that should not live in hexclave.config.ts, such as secrets, sender credentials, trusted domains, and payment test mode.
Let non-developers manage project settings through the hosted dashboard.

For a frontend-only app, connect to a cloud project with the project ID:

.env.local

HEXCLAVE_PROJECT_ID=<your-project-id>

For a backend, or an app that has both frontend and backend code, also add a secret server key:

.env.local

HEXCLAVE_PROJECT_ID=<your-project-id>
HEXCLAVE_SECRET_SERVER_KEY=<your-secret-server-key>

You can get these values from the cloud dashboard. The project ID appears in the project URL, and server keys are generated from the Project Keys page.

Moving Between Them

To start with a development environment, run the setup wizard and choose the config-file flow:

Terminal

stack init --mode create

If you already have a config file, link it instead:

Terminal

stack init --mode link-config --config-file ./hexclave.config.ts

To start with a cloud project, create one from the CLI:

Terminal

stack init --mode create-cloud

Or link an existing cloud project:

Terminal

stack init --mode link-cloud --select-project-id <project-id>

You can also copy config between the two styles. Pull cloud branch config into a local config file:

Terminal

stack --project-id <project-id> config pull --config-file ./hexclave.config.ts

Push local config-file changes back to a cloud project:

Terminal

stack --project-id <project-id> config push --config-file ./hexclave.config.ts

config pull requires stack login. config push supports either stack login or HEXCLAVE_SECRET_SERVER_KEY.

For the full setup flow by framework, see Setup.

Getting Started

Going Further

Apps

Integrations

Other

Development Environment

Cloud Dashboard

Moving Between Them

​Development Environment

​Cloud Dashboard

​Moving Between Them

Development Environment

Cloud Dashboard

Moving Between Them