# Project Setup

Tesserae is a UI toolkit for building websites entirely in C#, inspired by Microsoft's Fluent UI toolkit. It uses the h5 C# to JavaScript compiler to provide an easy-to-use, strongly-typed UI development experience.

To start a new project, you need to install the Tesserae NuGet package:

dotnet add package Tesserae

This will also pull in the necessary h5 dependencies to compile your C# code into JavaScript.

A bare-bones Tesserae application consists of an App.cs file with a Main entry point. In this method, you create your UI components and mount them to the browser's DOM.

Here is a simple App.cs that displays "Hello World" on the page:

using static H5.Core.dom;
using static Tesserae.UI;
using Tesserae;

namespace HelloWorld
{
    public class App
    {
        public static void Main()
        {
            // 1. Create a text block component
            var helloWorld = TextBlock("Hello World")
                .Medium()
                .SemiBold()
                .Margin(16.px());

            // 2. Mount the component to the document body
            MountToBody(helloWorld);
        }
    }
}

For development, we recommend installing the dotnet serve global tool to test your site locally.

1. Build your project (e.g., via Visual Studio or dotnet build).
2. Navigate to the output directory where the compiled JavaScript files are located (usually bin/Debug/netstandard2.0/h5/).
3. Run the server:

cd bin/Debug/netstandard2.0/h5/
dotnet serve --port 5000

4. Open your browser and navigate to http://localhost:5000/.

Tesserae projects use an h5.json file to configure the compiler. Reflection should always be enabled to support core features like the Router and automatic sample loading:

{
  "reflection": {
    "disabled": false,
    "target": "inline"
  }
}

To include external resources like JavaScript libraries, CSS files, fonts, or images, you should structure them in an assets/ folder within your output directory (e.g., h5/assets/).

You can then reference these resources in your h5.json file under the resources section to ensure they are correctly copied and included in your generated index.html:

{
  "resources": [
    {
      "name": "images",
      "files": [ "h5/assets/img/*" ],
      "output": "assets/img"
    },
    {
      "name": "custom-styles.css",
      "files": [
        "h5/assets/css/site.css"
      ]
    }
  ]
}