Skip to main content

Building For Web

Use the Web target for the fastest Hosanna development loop and for browser-delivered releases. Web is also the best place to validate shared AppConfig, fragments, focus, input adapters, networking, and visual layout before moving to device targets.

Prerequisites​

  • Node.js and project dependencies installed from the lockfile with npm ci.
  • Access to the licensed Hosanna framework sources and tooling for the project.
  • Browser DevTools, Hosanna DevTools, and MCP debugger access for deeper runtime inspection.

Run Locally​

Use Hosanna Tools from the terminal. hst run web dev browser resolves the Web build config, starts or reuses Vite and generator/debugger services, and opens the browser for interactive runs.

npx hst run web dev browser

The current sample repository wraps this as npm run dev:server. To choose a port explicitly:

npx hst run web dev browser --vitePort 5175

Production Build​

Web delivery lane from Hosanna generation and Vite output through the application hosting pipelineWeb delivery lane from Hosanna generation and Vite output through the application hosting pipeline

Build production Web assets with the project release script. In the sample repository, npm run build runs generation, resolves production build config, type-checks the Web project, runs Vite, and copies runtime assets.

npm run build

Validate the generated assets, AppConfig loading, routes, fonts, images, environment variables, and deployment base path before release.

Debugging​

  • Use browser DevTools for rendering, network, performance, and console output.
  • Use Hosanna DevTools and the MCP debugger for app state, focus, input, logs, screenshots, and runtime tree inspection.
  • Validate keyboard, pointer, touch, remote emulation, DPI, and design-resolution behavior.

See Web and Web Expression, DPI, and Touch Input for Web-specific runtime notes.

Talk to us