Astro, Svelte, Vite

Astro, Svelte, Vite

sigMAXfrontendAstroSvelteViteNginxstatic container

This site uses Astro and Starlight for documentation, Svelte for interactive components, and Vite as the frontend toolchain.

For the static FrontMark container, the build output is prepared as static files and served by Nginx.

Compilation Process

The static container build is a two-stage process. The first stage uses Node to compile the site. The second stage copies only the prepared static output into an Nginx image.

Step	What happens	Main output
Install dependencies	npm ci installs the locked Node dependencies from package-lock.json.	Reproducible build environment.
Resolve build version	The Docker build computes FRONTMARK_COMMIT_COUNT from Git, unless it is passed as a build argument, then appends it to VERSION.	Version metadata available in the generated site.
Build Svelte bundle	npm run svelte:build runs Vite with svelte-components/vite.config.mjs. It compiles Svelte components as an ES module library.	public/svelte/frontmark-svelte-components.js and CSS.
Build tag index	npm run tags scans documentation content and writes the search/tag metadata.	public/search/tags.json.
Optimize images	npm run optimize prepares optimized image variants and a manifest when image optimization is enabled.	public/_optimized/manifest.json and image variants.
Build Astro site	FRONTMARK_RUNTIME=static ... astro build renders Starlight pages, routes, assets and static content. In static mode, the Node adapter is not used.	dist/ with static client assets.
Prepare static runtime	scripts/prepare-static-runtime.mjs copies the Astro client output into dist/static-root, applies the configured base path, and writes an Nginx config.	dist/static-root and dist/nginx.conf.
Assemble runtime image	The final image is based on nginx:1.27-alpine and copies only dist/static-root, dist/nginx.conf and VERSION.	Small static container listening on port 4321.

Static runtime

FRONTMARK_RUNTIME=static makes the site behave as a static build. The generated Nginx configuration serves index.html files with try_files, applies long cache headers to /_astro/ and /_optimized/, and keeps admin configuration files on a revalidation cache policy.

Tool	Precise role in this build
Astro	Converts Markdown/Starlight content and configured routes into static HTML and assets.
Starlight	Provides the documentation shell, navigation, table of contents and docs-oriented rendering.
Svelte	Provides interactive components that are compiled before the Astro build consumes them.
Vite	Bundles the Svelte component library and also powers Astro’s frontend asset pipeline.
Nginx	Serves the prepared static root; no Node server is required in the final image.

Astro

Astro is the site framework used to assemble pages, layouts, content collections and static routes.

In the sigMAX website, Astro is responsible for:

• rendering documentation pages from Markdown and MDX-style content;
• organizing routes such as documentation, tags and product pages;
• integrating Starlight for the documentation experience;
• producing static assets that can be served by Nginx or another web server.

Astro is a good fit when most pages are content-driven and only specific parts of the page need interactivity.

Common alternatives include:

Alternative	Typical use
Next.js	React applications with server rendering, API routes and broad ecosystem support
Nuxt	Vue applications with server rendering and convention-based routing
Eleventy	Static documentation or content sites with a smaller runtime surface
Docusaurus	Documentation portals with React-based customization

Svelte

Svelte is the component framework used when a page needs client-side interaction.

In the sigMAX website, Svelte can be used for:

• interactive widgets;
• generated frontend components;
• local state and user interactions;
• focused UI islands inside mostly static documentation pages.

Svelte compiles components ahead of time, which keeps the browser payload small for interactive areas.

Common alternatives include:

Alternative	Typical use
React	Large component ecosystems and broad team familiarity
Vue	Progressive adoption and template-oriented components
Solid	Fine-grained reactivity with a JSX-oriented model
Web Components	Framework-independent reusable browser components

Vite

Vite is the frontend build tool used by Astro and the local development workflow.

In the sigMAX website, Vite is responsible for:

• fast local development;
• module resolution and dependency handling;
• bundling frontend assets;
• optimizing JavaScript, CSS and imported resources for production.

Vite is not the application framework. It is the build and development layer underneath the frontend stack.

Common alternatives include:

Alternative	Typical use
Webpack	Mature bundling setups with extensive legacy plugin support
Rollup	Library-oriented bundling and fine control over output
esbuild	Very fast low-level JavaScript and TypeScript bundling
Parcel	Zero-config application bundling

https://sigmax.dev/docs/frontend/astro-svelte-vite/