> ## Documentation Index
> Fetch the complete documentation index at: https://docs.revolte.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Web App

> Configure repository preferences and environment settings for a frontend application.

This guide explains how to configure a Web App as your next service in Revolte, covering both Repo Preference and Environment Settings. Visual references are provided for each step.

<Steps>
  <Step title="Choose a Preset">
    <img src="https://mintcdn.com/poddle-54594c3d/q0Rk3K5lGk3vHIWm/image-v2/guides/web-app/web-app-1.png?fit=max&auto=format&n=q0Rk3K5lGk3vHIWm&q=85&s=1cf38d709822496efe09e81b82a81c7a" alt="Choose Web App Preset" width="2748" height="1462" data-path="image-v2/guides/web-app/web-app-1.png" />

    The preset chooser shows a grid of service options. The **Webapp** tile is highlighted, described as a standard service for frontend applications (React, Next.js, Vite, etc.). Click **Web App** to continue.
  </Step>

  <Step title="Repo Preference">
    The Repo Preference tab is identical across all service presets. See [Repository Preference](/yaml/repo-preferences/overview) for a full walkthrough of each setting.
  </Step>

  <Step title="Web App — Environment Settings">
    <img src="https://mintcdn.com/poddle-54594c3d/q0Rk3K5lGk3vHIWm/image-v2/guides/web-app/web-app-2.png?fit=max&auto=format&n=q0Rk3K5lGk3vHIWm&q=85&s=e2df00d0a0e9a79a8ee1452d674d8b48" alt="Web App tab — QA environment" width="2766" height="1448" data-path="image-v2/guides/web-app/web-app-2.png" />

    The **QA** environment tab is selected. You can define independent resource properties for **Preview**, **QA**, **Staging**, and **Production**.

    The center panel shows the Web App form for the active environment:

    * **Service Name** — Enter a unique identifier for this service (e.g., `frontend_app`).
    * **Entry Point** — The main file that starts the service (e.g., `index.js`).
    * **Properties**
      * **Index Page** — The default page served for the root path (e.g., `index.html`).
      * **Error Page** — The page served for 404 or other errors (e.g., `index.html` for SPAs).
      * **Enable CDN** — Toggle to serve assets via Revolte's global edge network for faster delivery.
  </Step>

  <Step title="Variables & Secrets">
    Configure environment variables and encrypted secrets for your web application. See [Variables & Secrets](/yaml/environment-settings/resource-specifications/variables) for a detailed guide on managing environment-specific configurations.
  </Step>

  <Step title="Commit">
    At the bottom of the panel, fill in the **Commit Details**:

    * **File Name** — The configuration file to create or update in your repository (e.g., `revolte.yml`).
    * **Commit Message** — A short description of what you configured (e.g., `Add web app`).
    * **Choose Branch** — The branch where the configuration file will be committed.

    Click **Commit** to save the configuration to your repository, or **Skip & deploy** to deploy immediately without committing.
  </Step>
</Steps>

> **Tip:** For Single Page Applications (SPAs), set the **Error Page** to `index.html` to ensure your frontend router handles all paths correctly.