Your first full-stack application

This walkthrough uses the project generated by meeko init-framework. By the end, you will have a server-rendered page, a button that hydrates in the browser and type checking. You do not need to configure a database to follow along.

Create and run#

You need Node.js 24 or later. In a folder where you want to create the project, run:

pnpm exec meeko init-framework my-app
cd my-app
npm install
npm run dev

Open http://localhost:4173. The starter creates app/pages/index.meeko, app/app.meeko, app/layouts/default.meeko and meeko.config.ts. Each file in app/pages is a route; the layout keeps the header in place during navigation.

Read the first page#

Open app/pages/index.meeko, which the starter has already created. It has three parts:

1. <script server lang="ts"> declares the route with definePage({ render: "prerender" }). This page is generated as HTML during the build.
2. <script lang="ts"> creates a count signal for interaction. The component runs during SSR and connects to the HTML in the browser.
3. <template> displays the counter and uses on:click to increment it.

Change the <h1> text and check the result in the browser. Then press the button: the value changes without reloading the page. You can find the exact example generated by the CLI in the starter.

Check and build#

npm run check
npm run build
npm start

check generates project declarations and checks TypeScript contracts. build generates the client, the Node server and prerendered pages in .meeko/output/node/. start serves the build with SSR. For a real deployment, configure the public origin and sessions according to the deployment guide.

Next step: data and components#

When the page needs initial data, use the page's server code or a loader in definePage. For a query initiated by a component, use useApi or useRpcQuery. The Choosing an approach guide explains when each option applies and how to display loading and errors.

To create reusable components, place them in app/components. Read auto-imports and component registration for names, props and loading by name. If a syntax decision is unclear, consult the component reference and return to the walkthrough.