Simple Web App

This tutorial shows how to build a minimal GreyCat web application with no build tools — just two files and a running server.

Prerequisites

GreyCat installed (instructions)

Project setup

Create a directory and add a project.gcl file:

// project.gcl
@library("std", "0.0.0");
@library("web", "0.0.0");

@expose
fn hello(name: String): String {
  return "Hello, ${name}!";
}

Install dependencies:

greycat install

This downloads the GreyCat runtime and the @greycat/web SDK. The web library is automatically served at /web/ when the server starts.

Frontend

Create a webroot/index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="web/greycat.css" />
    <title>Hello GreyCat</title>
  </head>
  <body>
    <script type="module" src="web/greycat.js"></script>
    <script type="module">
      await gc.sdk.init();

      const el = document.createElement('gui-value');
      el.value = await gc.project.hello('world');
      document.body.appendChild(el);
    </script>
  </body>
</html>

GreyCat serves everything under webroot/ as static files by default.

Run

Start the server:

greycat serve --user=1

--user=1 bypasses authentication for development. See Authentication for production configuration.

Open localhost:8080 — you should see Hello, world! displayed on the page.

How it works

@library("web", ...) installs greycat.js and greycat.css into webroot/web/
Importing web/greycat.js registers all gui-* and sl-* Web Components globally
gc.sdk.init() connects to the GreyCat backend and loads type metadata
gc.project.hello('world') calls the @exposed function on the server via HTTP POST

Next steps

For projects that need TypeScript, JSX, hot-reload, and multiple pages, see the Advanced Web App tutorial which uses the VitePlus+ toolchain.