Web App Deployment

Overview

Architecture guide and technical overview for building and hosting static frontend Single Page Applications directly inside a Kodall instance.

Welcome to the Web App Deployment guide. Kodall provides an integrated, zero-server hosting architecture that allows developers to serve modern Single Page Applications (SPAs) directly through a Kodall instance without provisioning external web servers (Nginx, Apache) or managing cloud storage buckets (S3, CloudFront).

Core Concept & Architecture

In traditional enterprise architectures, frontend SPAs and backend APIs run on separate origins (e.g. https://app.company.com and https://api.company.com). This requires configuring CORS policies, managing cross-site authentication cookies, and orchestrating separate deployment pipelines.

Kodall eliminates this complexity by hosting your compiled static web bundle directly inside the Kodall Storage Engine and routing requests through its high-performance internal HTTP gateway via the web_app entity model:

Rendering diagram...

When a user requests a route assigned to a web_app, Kodall's gateway streams the requested static asset directly from storage. If the route does not match a physical asset file, the gateway automatically falls back to index.html to enable client-side SPA routing (HTML5 History Mode).

Key Advantages of Same-Origin Hosting

Hosting your frontend web application directly inside Kodall provides significant developer and operational benefits:

Zero CORS Configuration:
- Because the frontend runs on the exact same origin (domain and port) as the backend API, browser requests never trigger CORS preflight OPTIONS requests or encounter cross-origin blocking.
Automatic Session & CSRF Cookie Propagation:
- Authentication cookies (one.erp.rest.auth.token) and CSRF tokens (one.erp.rest.csrf.token) are handled automatically by the browser with HttpOnly and SameSite protection.
Zero-Configuration Client Initialization:
- In production, @kodall/kodall-client automatically resolves API endpoints against the current origin with zero hardcoded URLs:
app.ts
```
import { KodallClient } from '@kodall/kodall-client'

// In production: targets same-origin root '/' automatically
const client = new KodallClient()
```
Multi-Environment Support:
- Deploy identical code bundles across dev, staging, and prod instances using environment-specific routes and configurations.
Instant Rollback & Deployment History:
- Every build is archived in Kodall storage, enabling instant one-click or CLI rollbacks to any prior release without rebuilding.

Universal Static Web Hosting & Popular Framework Integrations

Kodall is completely framework-agnostic. The internal storage engine and HTTP gateway serve any static web application bundle (HTML, JavaScript, CSS, WebAssembly, and static assets) compiled by any build tool or static site generator (Astro, Remix, Svelte, Nuxt, Next.js, Vite, Webpack, Parcel, Rollup, or Vanilla HTML/JS).

The integration guides listed below serve as concrete reference implementations demonstrating how to configure development proxies, manage runtime client state, and deploy bundles using @kodall/kodall-deploy:

Framework	Build Command	Output Directory (`dist_path`)	Local Dev Proxy File	Guide
Nuxt 3/4	`nuxt generate`	`./.output/public`	`nuxt.config.ts` (`nitro.devProxy`)	Nuxt Guide
Vue 3 (Vite)	`vite build`	`./dist`	`vite.config.ts` (`server.proxy`)	Vue 3 Guide
React (Vite)	`vite build`	`./dist`	`vite.config.ts` (`server.proxy`)	React Guide
Next.js (Static)	`next build`	`./out`	`next.config.mjs` (`rewrites`)	Next.js Guide
Angular (17+)	`ng build`	`./dist/<app>/browser`	`proxy.conf.json` (`angular.json`)	Angular Guide
SvelteKit	`vite build`	`./build`	`vite.config.ts` (`server.proxy`)	SvelteKit Guide
SolidJS	`vite build`	`./dist`	`vite.config.ts` (`server.proxy`)	SolidJS Guide

Deployment Tooling

Deployments, local dev proxying, and CI/CD pipelines are managed via the @kodall/kodall-deploy developer toolkit:

kodall-deploy Tooling & CLI

Command-line deployment tool, configuration schema (kodall-webapp.config.json), environment switcher (use), and CLI flags reference.

Local Dev Proxy Suite

Native development proxy helpers for Vite, Nuxt, Next.js, and Angular with automatic instance resolution and custom proxy paths.

CI/CD & Automation

Automated CI/CD pipeline generation (--init-ci), live health checks, instant rollbacks, and the Programmatic TypeScript API.

Getting Started Workflow

Follow the Framework Guide

Choose your framework from the reference integrations below (e.g. Nuxt, Vue 3, React, Next.js, Angular, SvelteKit, or SolidJS).

Configure Development Proxy

Set up your framework's local dev proxy to forward /auth, /rest, and /storage requests to your target Kodall instance during development. For comprehensive options, explore the Local Dev Proxy Suite.

Initialize & Deploy

Generate your configuration and deploy your compiled application bundle:

BASH

# Initialize deployment configuration
npx kodall-deploy --init

# Build and deploy
npm run build
npx kodall-deploy -e dev

.NET SDK

Integrate .NET and C# backend applications with Kodall platform entity services, authentication, and workflows.

kodall-deploy Tooling & CLI

Developer deployment tooling and CLI reference for hosting static Single Page Applications in Kodall with multi-environment management, auto-detection, and configuration schema.