Skip to content

Latest commit

 

History

History
277 lines (189 loc) · 12.5 KB

README.md

File metadata and controls

277 lines (189 loc) · 12.5 KB
Raw

Clean Architecture With Blazor Server

Build CodeQL Nuget Docker Image CI Nuget

This repository hosts a Blazor Server application designed using Clean Architecture principles, featuring a sophisticated user interface and an efficient code generator. Blazor Server combines the power of C# with a modern web development experience, eliminating the need to switch between languages like JavaScript and C#. This setup not only simplifies development but also enables fast, responsive, and highly interactive web applications. Leveraging Blazor's real-time communication capabilities and .NET's robust ecosystem, developers can rapidly create feature-rich, scalable applications with a seamless user experience.

Explore the Live Demo

Experience the application in action in Blazor Server mode by visiting:

Projects Based on This Template

Here are some projects that have been developed based on this Clean Architecture Blazor Server template:

HSE Management System Screenshot

  1. HSE Management System (Workflow Application)

The DPP Application Screenshot 2. The DPP Application (EU Digital Product Passport)

Visitor Management Screenshot 3. Visitor Management

School Bus Transport Management System Screenshot 4. School Bus Transport Management System

Visual Insights

Explore the application's features and design through screenshots and a video walkthrough. Everything Is AWESOME

Development Setup

To get started with development, ensure you have the following tools and environments set up:

  • Microsoft Visual Studio Community 2022 (64-bit)
  • Docker
  • .NET 8.0
  • Unit Test Framework

Authentication Setup

Use the following topics to configure your application to use the respective providers:

https://learn.microsoft.com/en-us/aspnet/core/security/authentication/social/?view=aspnetcore-8.0&tabs=visual-studio

Docker Setup for Blazor Server Application

Pull the Docker Image

First, pull the latest version of the Blazor Server Docker image:

docker pull blazordevlab/cleanarchitectureblazorserver:latest

Run the Docker Container

You can start the container in two modes: using an in-memory database for development purposes or connecting to an MSSQL database for persistent storage and configuring SMTP for email functionalities.

For Development (In-Memory Database):

docker run -p 8443:443 -e UseInMemoryDatabase=true -e ASPNETCORE_ENVIRONMENT=Development -e ASPNETCORE_HTTPS_PORTS=443 blazordevlab/cleanarchitectureblazorserver:latest

For Production (Persistent Database and SMTP Configuration):

docker run -d -p 8443:443 \
-e UseInMemoryDatabase=false \
-e ASPNETCORE_ENVIRONMENT=Development \
-e ASPNETCORE_HTTP_PORTS=80 \
-e ASPNETCORE_HTTPS_PORTS=443 \
-e DatabaseSettings__DBProvider=mssql \
-e DatabaseSettings__ConnectionString="Server=127.0.0.1;Database=BlazorDashboardDb;User Id=sa;Password=<YourPassword>;MultipleActiveResultSets=true;Encrypt=false;TrustServerCertificate=false" \
-e SmtpClientOptions__User=<YourSMTPUser> \
-e SmtpClientOptions__Port=25 \
-e SmtpClientOptions__Server=<YourSMTPServer> \
-e SmtpClientOptions__Password=<YourSMTPPassword> \
-e Authentication__Microsoft__ClientId=<YourMicrosoftClientId> \
-e Authentication__Microsoft__ClientSecret=<YourMicrosoftClientSecret> \
-e Authentication__Google__ClientId=<YourGoogleClientId> \
-e Authentication__Google__ClientSecret=<YourGoogleClientSecret> \
-e Authentication__Facebook__AppId=<YourFacebookAppId> \
-e Authentication__Facebook__AppSecret=<YourFacebookAppSecret> \
blazordevlab/cleanarchitectureblazorserver:latest

Replace placeholder values (<Your...>) with your actual configuration details.

Docker Compose Setup

For easier management, use a docker-compose.yml file:

```yaml
version: '3.8'
services:
  blazorserverapp:
    image: blazordevlab/cleanarchitectureblazorserver:latest
    environment:
      - UseInMemoryDatabase=false
      - ASPNETCORE_ENVIRONMENT=Development
      - ASPNETCORE_URLS=http://+:80;https://+:443
      - ASPNETCORE_HTTP_PORTS=80
      - ASPNETCORE_HTTPS_PORTS=443
      - DatabaseSettings__DBProvider=mssql
      - DatabaseSettings__ConnectionString=Server=127.0.0.1;Database=BlazorDashboardDb;User Id=sa;Password=***;MultipleActiveResultSets=true;Encrypt=false;TrustServerCertificate=false
      - SmtpClientOptions__User=<YourSMTPUser>
      - SmtpClientOptions__Port=25
      - SmtpClientOptions__Server=<YourSMTPServer>
      - SmtpClientOptions__Password=<YourSMTPPassword>
      - Authentication__Microsoft__ClientId=<YourMicrosoftClientId>
      - Authentication__Microsoft__ClientSecret=<YourMicrosoftClientSecret>
      - Authentication__Google__ClientId=<YourGoogleClientId>
      - Authentication__Google__ClientSecret=<YourGoogleClientSecret>
      - Authentication__Facebook__AppId=<YourFacebookAppId>
      - Authentication__Facebook__AppSecret=<YourFacebookAppSecret>
    ports:
      - "8443:443"
    volumes:
      - files_volume:/app/Files

  mssql:
    image: mcr.microsoft.com/mssql/server:2022-latest
    environment:
      - ACCEPT_EULA=Y
      - SA_PASSWORD=YourStrongPassword!
    ports:
      - "1433:1433"
    volumes:
      - mssql_data:/var/opt/mssql

volumes:
  files_volume:
  mssql_data:

Notes:

Replace <Your...> placeholders with actual values from your environment. The files_volume volume is used for persistent storage of application files. Adjust or extend volumes based on your specific needs. This optimized guide should help in setting up your Blazor Server application with either an in-memory or MSSQL database, configured SMTP server for email functionalities, and OAuth authentication for Microsoft, Google, and Facebook.

Supported Databases

  • PostgreSQL (Provider Name: postgresql)
  • Microsoft SQL Server (Provider Name: mssql)
  • SQLite (Provider Name: sqlite)

How to select a specific Database?

  1. Open the appsettings.json file located in the src directory of the Server.UI project.
  2. Change the setting DBProvider to the desired provider name (See Supported Databases).
  3. Change the ConnectionString to a connection string, which works for your selected database provider.

Docker compose https deployment

  • Create self-signed development certificates for the project

    cmd: dotnet dev-certs https -ep $env:USERPROFILE\.aspnet\https\CleanArchitecture.Blazor.Server.UI.pfx -p Password@123
    • cmd: dotnet dev-certs https --trust
  • Manage User secrets to save the password
    • cmd: dotnet user-secrets init
    • cmd: dotnet user-secrets -p Server.UI.csproj set "Kestrel:Certificates:Development:Password" "Password@123"

Code Generator Extension for Visual Studio 2022

The CleanArchitecture CodeGenerator for Blazor App is a powerful Visual Studio extension that helps developers streamline the creation of Blazor applications based on Clean Architecture principles.

2022.mp4

Features of CodeGenerator

  • Automatically generates standard code for:
    • Application Layer
    • Domain Events
    • Blazor UI Layer
  • Simplifies the process of adding new entities and business logic.
  • Enhances productivity by minimizing repetitive coding tasks.

Install CleanArchitecture CodeGenerator For Blazor App

  • Open Manage Extensions Search with CleanArchitecture CodeGenerator For Blaozr App image
  • Download to Install

How to install solution templates

  • install the project template
    • run CLI: dotnet new install ./
    • run CLI: dotnet new list
image

  • create a solution with the template

    • run CLI: dotnet new ca-blazorserver-sln or dotnet new ca-blazorserver-sln -n NewProjectName(root namesapces)

  • build a project template with nuget.exe

    • run CLI: .\nuget.exe add -Source .\ CleanArchitecture.Blazor.Solution.Template.1.0.0-preview.1.nupkg image
    • create a new project from Clean Architecture for Blazor Server Solution image

Tutorial: Removing an cutomer Object from a Project

Everything Is AWESOME

Tutorial: add an contact Entity in the project

Everything Is AWESOME

Why I chose Blazor Server

I prefer Blazor Server because I dislike switching between C# and JavaScript during development. Blazor Server allows me to focus on C#.

Characteristic

  • Real-Time Updates
  • Avoid repeating work
  • Focus on story implementation
  • Integration Hangfire dashboard
  • Implementation OCR image recognition
  • org chart
real-time-updates.mp4

image

image

About

Coming up.

License

MIT License