#Getting Started

This page is the shortest path to a working Vext full-stack page with the built-in frontend capability.

#Create the App

npx vextjs create my-app
cd my-app
npm install
npm run dev

The default scaffold is full-stack: backend routes, services, React pages, styles, an initial locale, and public/vext-mark.svg / favicon.svg variants built from the same V geometry are created in one project. Optional asset and convention directories are added only when they contain real application source. API-only projects can still use:

npx vextjs create my-api --template api --frontend none

#Open the First Page

The first browser page follows this chain:

GET / -> src/routes/index.ts -> res.render("index")

src/frontend/pages/index.tsx is the page component. It does not create a URL by itself; the route handler chooses when to render it.

#The Generated Launchpad

The default full-stack template starts with an SSR Vext runtime launchpad instead of a blank demo. Its visible runtime trace follows route → service → res.render() → browser runtime; the greeting and render time remain real server data. src/frontend/components/AppShell.tsx owns the shared navigation and references the transparent public/vext-mark.svg, while public/favicon.svg is its contrast-safe variant with the same V geometry. src/frontend/styles/index.css owns the ink/cyan/green/amber tokens plus CSS-only, reduced-motion-safe effects. Change those files first; there are no generated README placeholders to maintain.

#Change the Home Page

// src/frontend/pages/index.tsx
export default function HomePage(props: { greeting: string }) {
  return <main>{props.greeting}</main>;
}

// src/routes/index.ts
export default (app) => {
  app.get("/", {}, async (req, res) => {
    res.render("index", { greeting: "Hello from Vext" });
  });
};

#Add Another Page

Create the page:

// src/frontend/pages/admin/dashboard.tsx
export default function DashboardPage(props: { totalUsers: number }) {
  return <main>Total users: {props.totalUsers}</main>;
}

Render it from a route:

// src/routes/admin/dashboard.ts
export default (app) => {
  app.get("/admin/dashboard", {}, async (req, res) => {
    const totalUsers = await app.services.users.count();
    res.render("admin/dashboard", { totalUsers });
  });
};

#Add a Component

// src/frontend/components/Stat.tsx
export function Stat(props: { label: string; value: number }) {
  return (
    <section>
      <strong>{props.value}</strong>
      <span>{props.label}</span>
    </section>
  );
}

Use aliases from frontend files:

import { Stat } from "@components/Stat";

#Add Styles

Use plain CSS, CSS Modules, or Vext JSCSS. Component-local dynamic styles can use vextjs/style:

// src/frontend/styles/card.style.ts
import { style } from "vextjs/style";

export const card = style({
  padding: 16,
  borderRadius: 8,
});

For the first recipe, variants, CSS variables, and build output, follow Vext JSCSS.

#If Something Fails

Next, read Project Structure and Routing and Pages.