Skip to content

GETTING_STARTED.md

Latest commit

 

History

History
214 lines (145 loc) · 4.72 KB

GETTING_STARTED.md

File metadata and controls

214 lines (145 loc) · 4.72 KB

Getting Started – Build & Run Guide

💡 Tip: Use the walkthrough button below for a guided, step-by-step experience in VS Code.

Source: https://stackoverflow.com/a/76402801 (CC BY-SA 4.0) – Posted by alefragnani

▶ Open Interactive Walkthrough

Welcome! Follow these steps to build and run the .NET 10 Blazor WebAssembly chat application.

Prerequisites

Before you start, ensure you have:

  • .NET 10 SDK installed
  • VS Code with C# extension (ms-dotnettools.csharp)
  • Taskfile (optional, for using task commands)

Step 1: Restore Packages

task restore

or

dotnet restore

This downloads all NuGet dependencies for:

  • androidwasm – Blazor WebAssembly client
  • androidwasm.ChatServer – ASP.NET Core API server

Status: ✅ Completed when you see Restore successful.

Step 2: Build Solution

task build

or

dotnet build -c Debug

Compiles both projects:

  • Client output: bin/Debug/net10.0/wwwroot
  • Server output: bin/Debug/net10.0/androidwasm.ChatServer.dll

Status: ✅ Completed when the build succeeds without errors.

Step 3: Start Chat Server (Terminal 1)

Open a new terminal and run:

task run:server

or

dotnet run --project androidwasm.ChatServer/androidwasm.ChatServer.csproj -c Debug --launch-profile https

Expected output:

info: Microsoft.Hosting.Lifetime[14]
      Now listening on: https://localhost:7121
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.

✅ Keep this terminal open. The server is now listening on https://localhost:7121.

Step 4: Start WASM Client (Terminal 2)

Open a second terminal and run:

task run:client

or

dotnet run --project androidwasm.csproj -c Debug --launch-profile https

Expected output:

info: Microsoft.Hosting.Lifetime[14]
      Now listening on: https://localhost:7218

✅ The client is now listening on https://localhost:7218.

Step 5: Open Chat Room

Navigate to the chat room in your browser:

https://localhost:7218/chat

You should see:

  • Room name input (default: general)
  • Display name input (default: guest)
  • "Join as agent" checkbox
  • Join button
  • Message history panel

Step 6: Join as Agent

  1. Enter a Display name (e.g., alice, agent-001)
  2. Check the "Join as agent" checkbox
  3. Click Join room
  4. Type a test message and press Enter

You should see:

  • System message: [name] joined the room as agent (with agent badge)
  • Your message appears with timestamp and agent badge

Messages are persisted to SQLite:

androidwasm.ChatServer/chat-history.db

Step 7: Test Multi-User Chat

Open a new browser tab or incognito window and:

  1. Go to https://localhost:7218/chat
  2. Enter a different display name (e.g., bob)
  3. Uncheck "Join as agent" to join as a regular user
  4. Send a message

Both users should see each other's messages in real time (polling every 2 seconds).

.NET 10 Features Highlighted

  • File-scoped namespaces – Used throughout for cleaner code
  • Record types – Message DTOs use immutable records
  • Minimal APIs – Chat endpoints with top-level statements
  • EF Core SQLite – Full ORM for persistence
  • Global usings – Reduced boilerplate

See README.md and source code for examples.

Useful Commands

# Format code
task format

# Run linting
task lint

# Clean build artifacts
task clean

# Run tests (when test projects are created)
task test

Troubleshooting

Port already in use

If you get "port already in use" errors:

# Kill processes on specific ports
# Linux/macOS: lsof -i :7121 | kill -9
# Windows: netstat -ano | findstr :7121

SSL certificate warning

The dev certificate may not be trusted. This is normal in development. Click "Proceed" in your browser.

Chat API not responding

Ensure both servers are running in separate terminals. Check that https://localhost:7121/api/rooms/general/messages is accessible.

Next Steps

  • 📖 Read DEVELOPER.md for deployment and advanced setup
  • 🧪 Read TESTS.md to add and run tests
  • 🎯 See agents/plan/ for development milestone tracking
  • 📚 Explore the README.md for links to Wasmtime, wasmCloud, and Taskfile docs

Ready? Start with Step 1 above! 🚀