BB BlazorBlog
Login

Integration Guide

Learn how to integrate and customize the BlazorBlog platform for your needs.

Getting Started

BlazorBlog is a modern, full-featured blog platform built with .NET 9 and Blazor Server. This guide will help you understand how to integrate and customize the platform.

Prerequisites

  • .NET 9 SDK
  • SQL Server (or SQL Server LocalDB)
  • Node.js (for Tailwind CSS compilation)
  • Visual Studio 2022 or VS Code

Installation Steps

  1. Clone the Repository 
    git clone https://github.com/unrealbg/BlazorBlog.git
cd BlazorBlog
  2. Install Dependencies 
    dotnet restore
npm install
  3. Configure Database

    Update the connection string in appsettings.json:

    {
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=BlazorBlogDb;Trusted_Connection=true;MultipleActiveResultSets=true"
  }
}
  4. Run Database Migrations 
    dotnet ef database update
  5. Build Tailwind CSS 
    npm run build:css
  6. Run the Application 
    dotnet run

Architecture Overview

BlazorBlog follows Clean Architecture principles with clear separation of concerns:

  • BlazorBlog.Domain - Core business entities and domain logic
  • BlazorBlog.Application - Application services and business logic
  • BlazorBlog.Infrastructure - Data access, external services
  • BlazorBlog - Web UI layer with Blazor components

Key Features

  • 🔐 Authentication & Authorization - Built-in user management
  • 📝 Rich Text Editor - Quill.js integration for content creation
  • 🎨 Modern UI - Tailwind CSS with dark mode support
  • 📱 Responsive Design - Mobile-first approach
  • 🔍 SEO Optimized - Clean URLs and metadata
  • ⚡ High Performance - Entity Framework Core with caching

Customization

Styling

The platform uses Tailwind CSS for styling. To customize the appearance:

  1. Modify tailwind.config.js to change colors, fonts, or spacing
  2. Update components in Components/ directory
  3. Run npm run build:css to rebuild the CSS

Adding New Features

To add new functionality:

  1. Create domain entities in BlazorBlog.Domain
  2. Add application services in BlazorBlog.Application
  3. Implement data access in BlazorBlog.Infrastructure
  4. Create Blazor components in the main project

Development Workflow

Working with Tailwind CSS

During development, you can watch for CSS changes:

npm run dev:css

Database Changes

When modifying entities, create and apply migrations:

dotnet ef migrations add YourMigrationName
dotnet ef database update

Deployment

The application can be deployed to various hosting platforms:

  • Azure App Service - Recommended for production
  • IIS - For on-premises hosting
  • Docker - Containerized deployment

Support

For questions, issues, or contributions: