# Project and runtime architecture

> Identify HTML versus Vite output, source versus build artifacts, and the hosted services a frontend may depend on.

[Canonical page](https://rogueon.ai/docs/project-architecture)

## Identify the generated format

Rogue's web output has two artifact paths. A direct HTML page is delivered as index.html with its associated assets. A Vite project has source files and a build step; it can use HTML and TypeScript, a React island, or a React application. Inspect package.json and the actual imports: Vite alone does not imply React. The saved files determine the architecture you received.

|  | Direct HTML | Vite project |
| --- | --- | --- |
| Source | index.html and associated assets. | index.html, source under src/, and assets under public/ according to the saved version. |
| GitHub export | Page, assets, and README. | Source, assets, package.json, Vite/TypeScript configuration, and README. |
| Local build | No required compilation for the page. | package.json scripts; default output in dist/. |
| Runtime | Browser and network services used by the HTML. | Compiled JavaScript/CSS in the browser and network services used by the app. |

## Source is not the deployed bundle

For Vite output, edit the source in your development environment and rebuild; editing dist directly is not a durable source change. Inspect the exported scripts and README for that version. The generated GitHub project adds dev, build, and preview scripts, but it does not recreate Rogue's own server application.

For direct HTML, serve the exported directory to test relative assets and browser behavior. The example below requires Python 3 and serves only on the loopback interface. It verifies static delivery, not the presence of backend services.

**Direct HTML: local static server**

```sh
python3 -m http.server 8000 --bind 127.0.0.1
```

## Map the frontend-to-service boundary

A project can render without a backend, store browser-local state, or depend on managed persistence and authentication. These are different architectures. For a database-backed project, inspect its actual data panel and generated code. Do not infer persistence from a form that merely updates local state.

Managed authentication and provider-key calls can rely on server routing at the page's origin. Copying frontend files to another host does not copy those server implementations, credentials, or origin configuration. Inventory every network dependency before choosing a deployment target.

## Record the deployment contract

- Artifact format, source entry points, assets, build command, and output directory.
- Required runtime URLs, authentication flow, allowed origins, and session assumptions.
- Data owner, schema, migration/export plan, and authorization checks.
- External-service credentials, billing owner, quotas, and failure behavior.
- Exact source revision and validation evidence for the deployed artifact.

## Related guides

- [Export and external development](https://rogueon.ai/docs/exporting)
- [Authentication, data, and permissions](https://rogueon.ai/docs/data-and-permissions)
- [Preview and runtime validation](https://rogueon.ai/docs/preview-and-testing)