Development Environment

Development environment

Pinned toolchain

• .NET SDK 10.0.301 with latestFeature roll-forward.
• Target framework net10.0 and C# 14.
• Node.js and npm for Tailwind CSS.
• CSharpier 1.3.0 as the C# formatter.

Docker builds frontend assets with Node 26.5.0; the Nix package and development shell currently use Node 22.

Nix shell

nix develop

The shell contains .NET SDK 10, Node 22, npm, and nixfmt.

Product screenshots and animations

Build the deterministic simulation host, then run each Viset capture directly from the repository root:

dotnet build src/BlokeBot.Simulation/BlokeBot.Simulation.csproj --configuration Release
viset capture capture/screenshots.lua --force
viset capture capture/home-scroll.lua --force
viset capture capture/guessing-workflow.lua --force

The Simulation environment creates a fake signed-in channel with stable sample data, keeps the Twitch runtime offline, and needs no Twitch credentials. The capture scripts start and stop that host and write directly to the Site-owned src/BlokeBot.Site/wwwroot/media/ directory.

The exact generated inventory is:

• 24 PNGs: every combination of device laptop or phone, theme light or dark, and view home, channel-setup, custom-commands, guessing-leaderboard, points-settings, or admin, named {device}-{theme}-{view}.png.
• 8 animated WebPs: every combination of device laptop or phone, theme light or dark, and workflow home-scroll or guessing-workflow, named {device}-{theme}-{workflow}.webp.

These 32 files are the complete generated Site media inventory. Viset replaces them in place; there is no separate points workflow or copy step.

Frontend dependencies

npm ci --prefix src/BlokeBot
npm run css:build --prefix src/BlokeBot

For a live rebuild:

npm run css:watch --prefix src/BlokeBot

The build script compiles Styles/app.css to the minified wwwroot/app.css. The application project also invokes the locked npm install and CSS build during its static-web-assets build.