> For the complete documentation index, see [llms.txt](https://docs.riff.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.riff.ai/archive/features-legacy-databutton-web-app-builder/riff-environment.md).

# Riff Environment

## Architecture at a glance

Riff apps are **React frontends + Python backends** running on Riff’s production-grade infrastructure. The Agent plans tasks, edits code, runs tests, and deploys in one workspace.

**Frontend**: React pages and components.\
**Backend**: FastAPI endpoints plus reusable libs.<br>

**Where things live**:

* `frontend/src/pages/*` (routes)
* `frontend/src/components/*` (UI)
* `backend/app/apis/*` (POST/GET endpoints)
* `backend/app/libs/*` (helpers)

### Environments & Deploys

* **Dev vs Prod**: Build and test in the workspace ([Preview](/archive/features-legacy-databutton-web-app-builder/workspace-features/preview.md)). Deploy to make changes live.
* **Rollbacks & logs**: Use Preview logs while developing; schedule runs include execution history.

### Authentication & Access

* **Built-in auth** ([Stack Auth](/archive/features-legacy-databutton-web-app-builder/native-authentication.md)): sign-in/out, sessions, protected routes.
* **Protecting endpoints**: toggle page/API auth (shield icon) from the Code Editor / Access.

### Data: Database vs Storage

* **Database (**[**Postgres**](/archive/features-legacy-databutton-web-app-builder/native-database.md)**)**: versioned migrations, separate dev/prod DBs, query in-app.
* **Storage (**[**files, dataframes**](/archive/features-legacy-databutton-web-app-builder/workspace-features/storage.md)**)**: persistent, backend-only; ideal for CSVs, images, PDFs.
* **Rule of thumb**: structured data → [DB](/archive/features-legacy-databutton-web-app-builder/workspace-features/database-and-users.md); large/binary files → [Storage](/archive/features-legacy-databutton-web-app-builder/workspace-features/storage.md).

### Secrets & Configuration

* Store API keys and credentials in [**Secrets** ](/archive/features-legacy-databutton-web-app-builder/workspace-features/secrets.md)(never in code).
* Access via environment variables in backend; scope to dev/prod as needed.

### Scheduling & Background Work

* Create cron [schedules ](/archive/features-legacy-databutton-web-app-builder/workspace-features/schedules.md)that **POST backend endpoints**; choose dev or prod runtime; monitor history and pause/resume.

### Integrations & Webhooks

* [**Native integrations**](/archive/integrations-legacy-saas-connectors/native-integrations.md): OAuth once, agent verifies scopes and runs a test call.
* [**Custom APIs**](/archive/integrations-legacy-saas-connectors/custom-integrations.md): the agent defines endpoints, handles pagination/retries, sets webhooks, and verifies signatures.
* **Webhooks**: ensure target endpoints are public (auth gate off if required) and **deployed** when testing third-party callbacks.

### Packages & SDKs

* The agent installs npm/pip packages as needed; view versions in [**Packages**](/archive/features-legacy-databutton-web-app-builder/workspace-features/packages.md).
* Frontend packages are for React only; Python packages for backend only.

### Observability & Troubleshooting

* **Preview logs** and **schedule run logs** for quick diagnosis.
* Use [**Tasks** ](/archive/features-legacy-databutton-web-app-builder/workspace-features/tasks.md)history to see agent reasoning, diffs, and decisions.

### Limits & Best Practices

* Keep long-running or sensitive work in backend APIs.
* Avoid storing secrets in frontend; prefer server-side calls for third-party APIs.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.riff.ai/archive/features-legacy-databutton-web-app-builder/riff-environment.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.