🔥 Blazor Server Sample Application

A sample Blazor Server application built with .NET 10 demonstrating modern web development with C# and Blazor.

🚀 What is Blazor?

Blazor is a framework for building interactive web UIs using C# instead of JavaScript. With Blazor Server, your app runs on the server, and UI updates are sent to the browser over a SignalR connection.

Benefits:

• ✅ Write full-stack web apps in C#
• ✅ Share code between client and server
• ✅ Rich .NET ecosystem and tooling
• ✅ Real-time updates via SignalR
• ✅ No JavaScript required (though you can use it)

📋 Prerequisites

• .NET 10 SDK
• JetBrains Rider (optional, but recommended)
• Or Visual Studio 2025 / VS Code

🏃 Quick Start

1. Clone the Repository

git clone https://github.com/WolfBot2026/blazor-server-sample.git
cd blazor-server-sample

2. Restore Dependencies

dotnet restore

3. Run the Application

dotnet run

The app will start at:

• HTTP: http://localhost:5000
• HTTPS: https://localhost:5001

4. Open in Browser

Navigate to: https://localhost:5001

You should see the Blazor app with:

• Home page
• Counter page (interactive example)
• Weather forecast page (data example)

📁 Project Structure

blazor-server-sample/
├── Components/           # Blazor components
│   ├── Layout/          # Layout components (MainLayout, NavMenu)
│   ├── Pages/           # Page components (Home, Counter, Weather)
│   └── App.razor        # Root component
├── wwwroot/             # Static files (CSS, JS, images)
├── Properties/          # Launch settings
├── appsettings.json     # App configuration
└── Program.cs           # App entry point

🎨 Key Features Demonstrated

1. Component-Based Architecture

Blazor uses reusable components with .razor files that combine HTML and C#.

2. Event Handling

See Counter.razor for button click event handling:

<button @onclick="IncrementCount">Click me</button>

3. Data Binding

Two-way data binding example in forms and inputs.

4. Routing

Client-side routing with @page directive:

@page "/counter"

5. Dependency Injection

Services are injected into components:

@inject WeatherForecastService ForecastService

🛠️ Development

Build the Project

dotnet build

Run with Hot Reload

dotnet watch run

Changes to .razor files will automatically reload in the browser!

Run Tests (if any)

dotnet test

🚀 Deployment

Publish for Production

dotnet publish -c Release -o ./publish

Deploy Options

• Azure App Service: Easy deploy with built-in support
• Docker: Create a Dockerfile and containerize
• IIS: Publish and host on Windows Server
• Linux: Use Kestrel with reverse proxy (nginx, Apache)

📚 Learn More

• Blazor Documentation
• Blazor Tutorial
• Awesome Blazor - Curated resources

🎯 Next Steps

Want to extend this app? Try:

• Add a form - Create a contact form with validation
• Use a database - Connect to SQL Server or SQLite
• Add authentication - Implement user login with Identity
• Create an API - Add RESTful endpoints
• Use Tailwind CSS - Modernize the UI styling
• Add real-time features - Use SignalR for chat or notifications
• Progressive Web App (PWA) - Make it installable

🐛 Troubleshooting

Port Already in Use

If ports 5000/5001 are taken, edit Properties/launchSettings.json to use different ports.

HTTPS Certificate Issues

Trust the development certificate:

dotnet dev-certs https --trust

Hot Reload Not Working

Make sure you're using dotnet watch run and the SDK supports hot reload (10.0+).

📝 Notes

• Created: 2026-01-29
• Framework: .NET 10.0
• Template: Blazor Web App (Server interactivity)
• IDE: JetBrains Rider 2025.3.1

📄 License

MIT License - See LICENSE file for details.

---

Built by WolfBot 🐺 • Demonstrating the power of Blazor Server with .NET 10!