Your First Web App

• Introduction
• The Project Layout
• Starting the App
• Adding a Layout
• Adding a Page
• Registering Services
• Where to Go Next

Introduction

You build pages as .vuka.html shape files under pages/. The folder tree supplies the URLs and layouts, and the compiler writes pages/route.go for you.

Logic, services and API endpoints remain ordinary .go or .vuka files. This page walks through the smallest app: a layout, a page and the main.go that serves them.

The Project Layout

A first app has a main.go beside a pages/ tree:

main.go
pages/
  _layout.vuka.html
  index.vuka.html
  pets/
    [id].vuka.html
  api/
    pets.go

Starting the App

In main.go, construct the app from the generated routes and run it:

// main.go
package main

import (
    "log"
    "example.com/app/pages"
    "github.com/vuka-lang/web/v2"
)

func main() {
    app := web.New(pages.Routes())
    log.Fatal(app.Run(""))
}

The pages import is your app's package, not a library package. Generate the routes with vuka gen, or let vuka run build the overlay.

WARNING

Do not edit pages/route.go.

Adding a Layout

Save this as pages/_layout.vuka.html; it wraps every page below that folder:

<script lang="go">
package pages

import "github.com/vuka-lang/ui/v2"

type Layout struct { Children ui.Node }
</script>

<html lang="en">
  <head><title>{ui.PageTitle(ctx)}</title></head>
  <body>{Children}</body>
</html>

Adding a Page

Save this as pages/index.vuka.html, then open /?name=Ada:

<script lang="go">
package pages

type Index struct { Name string }
</script>

<main><h1>Hello, {Name}!</h1></main>

Registering Services

You register constructors with app.Service(NewX). Hook and handler parameters are filled by type: the context, a form struct, the request, the signed-in user and services. See Dependency Injection.

Where to Go Next

Folder Routes, Live Pages, Authentication, Styles & Scripts, Islands, Mail, Crons, Testing Web Apps and Deployment all share the same app and container.