Getting Started

This page takes you from an empty folder to a running dev server, a production build, and a preview — in a few minutes.

Prerequisites

• Node.js ≥ 20.11, or Bun. Check with node -v.
• Any package manager: npm, pnpm, yarn, or bun.

Install

Add Vantris as a dev dependency:

npm

npm install -D vantris

pnpm

pnpm add -D vantris

yarn

yarn add -D vantris

bun

bun add -d vantris

Create the project

A Vantris project is an index.html with a module-script entry pointing at your source file. The minimum viable app is two files.

my-app/
├── index.html
├── package.json
└── src/
    └── main.ts

index.html (at the project root) — the entry document:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

src/main.ts — your code. TypeScript works with no setup:

const app = document.getElementById("app")!;
app.innerHTML = `<h1>Hello Vantris 👋</h1>`;

Add the scripts

Wire the three commands into your package.json so you can run them with your package manager:

{
  "name": "my-app",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vantris dev",
    "build": "vantris build",
    "preview": "vantris preview"
  },
  "devDependencies": {
    "vantris": "^1.2.0"
  }
}

"type": "module"

Set "type": "module" in package.json so your vantris.config.ts/.js and source files are treated as ES modules. This is the modern default.

Run the dev server

npm run dev

Vantris starts a native dev server (Node.js node:http or Bun.serve) on http://localhost:3000, transpiling TypeScript and JSX on the fly and applying changes through Hot Module Replacement. Save a file and the browser updates without a full reload.

To expose it on your local network, pass --host:

npx vantris dev --host          # all interfaces (0.0.0.0)
npx vantris dev --host 0.0.0.0

Build for production

npm run build

Vantris cleans dist/, analyses index.html for module entries, and bundles everything with Rolldown — tree shaking, minification, code splitting, and content-hashed filenames. Your public/ folder is copied verbatim. See Building for Production for the details.

Preview the build

npm run preview

This serves the finished dist/ exactly as produced — no compilation — on http://localhost:4173. It's the closest local mirror of production. See Preview.

Optional: a config file

Everything above runs with zero configuration. When you need to change a default, create vantris.config.ts at the project root:

import { defineConfig } from "vantris";

export default defineConfig({
  dev: { port: 5173 },
  resolve: {
    alias: { "@": "./src" },
  },
});

defineConfig is a typed identity helper — it gives you autocompletion and validation without changing the object. Every field is optional. See the full Configuration reference.

Adding React

React works out of the box with the automatic JSX runtime — no import React needed. Install the runtime packages and point your entry at a .tsx file:

npm install react react-dom

// src/main.tsx
import { createRoot } from "react-dom/client";

function App() {
  return <h1>Hello Vantris</h1>;
}

createRoot(document.getElementById("app")!).render(<App />);

For stateful Fast Refresh (component state preserved across edits), add the official @vantris/react plugin. See React & JSX for the full story.

Next steps

• Project Structure — what each file and folder does.
• The CLI — every command and flag.
• Configuration — the complete option reference.