Web

Web is in alpha. To add it to your organization, email [email protected].

A Web app runs in a Chrome session that Revyl streams to your browser, at a desktop or mobile-sized viewport. Revyl either serves a bundle built from your recipe or opens a preview deployment you already host. Web builds covers both in detail; this page sets up a project and shows recipes for Next.js and static Vite.

Set up the project

revyl init creates the project config but doesn’t detect Web frameworks, package managers, or preview hosts, and it doesn’t create a Web app. Create the app and add a profile yourself:

revyl init -y
revyl app create --name "My Web App" --platform web

build:
  profiles:
    preview:
      web:
        app_id: <web-app-id>

This app-ID-only profile is enough to register preview URLs and start sessions. To have Revyl build a bundle, add your own setup commands, build commands, and output directory, as in the examples below. A Web recipe can sit beside ios and android recipes in the same profile without changing mobile setup. If your app already deploys previews, keep that deploy and register each preview’s HTTPS URL after it succeeds:

revyl build upload --platform web --url "$PREVIEW_URL" --app <web-app-id>
revyl device start --platform web --app <web-app-id>

Next.js

This example assumes npm and output: "standalone" in your Next config; adapt the commands to your workspace and lockfile. It packages the standalone server, .next/static, and public (when present) into dist-revyl, and signs in through a test-only route:

build:
  profiles:
    preview:
      web:
        app_id: <web-app-id>
        setup_commands: [npm ci]
        build_commands:
          - npm run build
          - rm -rf dist-revyl && mkdir -p dist-revyl/.next
          - cp -RL .next/standalone/. dist-revyl/
          - cp -R .next/static dist-revyl/.next/static
          - if [ ! -d public ]; then exit 0; fi; cp -R public dist-revyl/public
        output_path: dist-revyl
        run:
          start: HOSTNAME=0.0.0.0 node server.js
          port: 3000
          secret_names: [REVYL_SIGN_IN_SECRET]
session:
  auth_bypass:
    sign_in:
      path: /revyl-login
      secret: REVYL_SIGN_IN_SECRET

The server must listen on 0.0.0.0 at the configured port. REVYL_SIGN_IN_SECRET is the name of an encrypted organization launch variable, never its value. Add the /revyl-login route only to test deployments, and have it issue a session the way your app normally does. In the App Router, use app/revyl-login/route.ts (or src/app/...). Folders that start with an underscore, such as app/__e2e__/login, are private and don’t become routes. Keep the secret out of NEXT_PUBLIC_* variables and browser code. The code the route must verify is described in Web sign-in links.

Static Vite

For an npm site whose build writes dist/index.html:

build:
  profiles:
    preview:
      web:
        app_id: <web-app-id>
        setup_commands: [npm ci]
        build_commands: [npm run build]
        output_path: dist

No run block is needed: Revyl serves static output, and client-side routes load on reload or deep link. Don’t add a signing secret to a static frontend. If the site needs sign-in, add the test-only route to its backend or use a hosted preview.

Build and open a session

revyl build --profile preview --platform web
revyl device start --platform web

revyl build runs on Revyl’s build runners by default; add --local to build with your own toolchain and upload the result. Check a screenshot and the signed-in account, then stop the session with revyl device stop --session-id <session-id>. Web starts don’t run session.before_script. If a session needs test data, seed it before you start, for example from the preview’s own deploy.

Next steps

Web builds: bundle limits, server apps, and registering previews from CI
Sessions: start a Web session from the dashboard
Proof of changes: have an agent exercise each pull request in a Web session

Get started

Atlas

Agents

Runtime

Tests

Builds

Frameworks

Integrations

Partners

Security and network

Set up the project

Next.js

Static Vite

Build and open a session

Next steps

​Set up the project

​Next.js

​Static Vite

​Build and open a session

​Next steps

Set up the project

Next.js

Static Vite

Build and open a session

Next steps