> 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.