thangchung/blog-core

Modular blog using Blazor with clean domain-driven design patterns

BlogCore project

A blog application built with Blazor and clean domain-driven design patterns.

Technical Stack

• .NET SDK (v3.0.100-preview6) & NodeJS
• Blazor v3.0.0-preview6
• IdentityServer 4
• Entity Framework Core
• Protobuf v3.8.0
• Swashbuckle v5.0.0-rc2
• AdminLTE v3.0.0-beta.1

Run Application

$ cd src\BlogCore.Hosts.Web.Client\ && npm install && npm run copy && cd ../..

At this root folder

$ dotnet clean && dotnet run -p src\BlogCore.Hosts.Web.Server\BlogCore.Hosts.Web.Server.csproj
$ dotnet watch -p src/BlogCore.Hosts.Web.Server/BlogCore.Hosts.Web.Server.csproj run // live reloading

Open an another terminal and run

$ dotnet run -p src\BlogCore.Hosts.IdentityServer\BlogCore.Hosts.IdentityServer.csproj

Now, you can access to

• BlogCore Application at http://localhost:5000
• IdentityServer at http://localhost:5001

Development

Get code

git clone [email protected]:thangchung/blog-core.git
cd blog-core

Start hacking it!!!

Copyright and license

Code and documentation copyright 2019 Thang Chung. Code released under the MIT License.

blog-core's Issues

Comment functionality

• Disqus (https://gist.github.com/ryanvalentin/8585404)
• Facebook Comments

Pagination on the headers

Consider moving currently pagination into the header of the response.
Example for it at https://github.com/chsakell/dotnetcore-entityframework-api/blob/master/Scheduler.API/Core/Extensions.cs

Front-end architecture

Use nextjs for isomorphic app
https://learnnextjs.com/basics/getting-started/setup
https://auth0.com/blog/build-better-universal-apps-with-nextjs2/
https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

[FE] Infinite scroll in dashboard

https://github.com/andrewngu/sound-redux/blob/master/scripts/components/InfiniteScrollify.js

Pagination

https://medium.com/@pierrecriulanscy/working-with-paginated-api-in-redux-be871818e444
Upgrade to React-Router v4.x https://github.com/notrab/create-react-app-redux/blob/master/src/index.js
Explanation about router at https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf

[Brainstorm] Software architecture

Would like to see some kind of dynamic field for CMS with multi-tenancy architecture like https://github.com/arduosoft/RawCMS/blob/master/RawCMS.Library/Schema/Field.cs

• Lightweight approach for CRUD at https://github.com/the-linck/Generic-Entity-MVC-CRUD/blob/master/Controller/CrudController.cs (more than 50% actions in application is CRUD).

• https://github.com/asc-lab/dotnet-cqrs-intro => 5 types of CQRS

• https://github.com/asc-lab/dotnetcore-microservices-poc => good with Marten for event sourcing and search service

• https://github.com/BrighterCommand/Darker ==> has Retry/Fallback policy

• https://github.com/oskardudycz/EventSourcing.NetCore -> Event Sourcing using Marten

• https://github.com/ddd-by-examples/factory

• https://github.com/GaProgMan/OnionArch
• https://github.com/ardalis/CleanArchitecture
• https://github.com/jbogard/AdventureWorksCosmos
• https://github.com/DavidCBerry13/FoodTruckNationApi
• Good wrap up of repository at https://github.com/sogustavo/sidekick/blob/master/EntityRepository/Repository.cs
• https://github.com/FanrayMedia/Fanray => full blog plugin application
• https://github.com/AjuPrince/Aju.Carefree

Multi-tenancy:

• https://github.com/abpframework/abp/tree/dev/framework/src/Volo.Abp.MultiTenancy or search the repo at https://github.com/abpframework/abp/search?q=Tenant&unscoped_q=Tenant
• https://github.com/aliakseiherman/eixample and https://github.com/aliakseiherman/eixample_webapi2
• https://github.com/Boriszn/DeviceManager.Api
• https://github.com/hakeemoriola/MultiTenancyServer.MongoDb

Cloud native book: https://github.com/ardalis/azure-cloud-native-book/blob/master/architecting-cloud-native-dotnet-apps-for-azure/azure-platform-resiliency.md

Pub/Sub:

• at-most-once delivery: means that for each message handed to the mechanism, that message is delivered zero or one times; in more casual terms it means that messages may be lost.
• at-least-once delivery: means that for each message handed to the mechanism potentially multiple attempts are made at delivering it, such that at least one succeeds; again, in more casual terms this means that messages may be duplicated but not lost.
• exactly-once delivery: means that for each message handed to the mechanism exactly one delivery is made to the recipient; the message can neither be lost nor duplicated.

Upgrade to .NET Standard 2.0

We only have one issue with ID4 at IdentityServer/IdentityServer4#1055, but I will do it for the pre-release whenever I have time.

No packages.json file for BlogCore.Hosts.Web.Client

Hello,
my goal is to learn about Blazor and DDD using your project however I have problems getting it to run following the description in the ReadMe (I am on the blazor branch).
Whenever I enter the first command in a cmd I spawned inside the root folder I get an error:

Command:
cd src\BlogCore.Hosts.Web.Client\ && npm install && npm run copy && cd ../..

Logfile:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'copy' ]
2 info using [email protected]
3 info using [email protected]
4 verbose stack Error: ENOENT: no such file or directory, open 'C:\Users\Ano\Documents\Visual Studio 2017\Projects\blog-core-ddd\src\BlogCore.Hosts.Web.Client\package.json'
5 verbose cwd C:\Users\Ano\Documents\Visual Studio 2017\Projects\blog-core-ddd\src\BlogCore.Hosts.Web.Client
6 verbose Windows_NT 10.0.18362
7 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "copy"
8 verbose node v10.16.3
9 verbose npm  v6.9.0
10 error path C:\Users\Ano\Documents\Visual Studio 2017\Projects\blog-core-ddd\src\BlogCore.Hosts.Web.Client\package.json
11 error code ENOENT
12 error errno -4058
13 error syscall open
14 error enoent ENOENT: no such file or directory, open 'C:\Users\Ano\Documents\Visual Studio 2017\Projects\blog-core-ddd\src\BlogCore.Hosts.Web.Client\package.json'
15 error enoent This is related to npm not being able to find a file.
16 verbose exit [ -4058, true ]

Do you have a hint what is going wrong here?

Manage Profile usecase

Blazor for the project

The Blazor road map with a lot of features need to investigate dotnet/aspnetcore#8177

And priority items to work on: https://github.com/aspnet/AspNetCore.Docs/projects/35#card-23892118

What news with Blazor: Docs and .NET Core 3.0 Preview 6 news

Microsoft samples:

• https://github.com/SteveSandersonMS/presentation-2019-06-NDCOslo
• https://github.com/dotnet-presentations/blazor-workshop
• https://github.com/aspnet/samples/tree/master/samples/aspnetcore/blazor/FlightFinder
• https://github.com/danroth27/BlazingPizza

Blazor features:

• https://github.com/dodyg/practical-aspnetcore/blob/master/projects/blazor/README.md
• https://github.com/dodyg/practical-aspnetcore/blob/master/projects/blazor-ss/README.md

Blazor validation & FluentValidation:

• https://chrissainty.com/using-fluentvalidation-for-forms-validation-in-razor-components/. Source code at https://github.com/chrissainty/FluentValidationWithRazorComponents
  ==> have an issue with is-invalid style which needs to customize the https://github.com/aspnet/AspNetCore/blob/master/src/Components/Components/src/Forms/InputComponents/InputBase.cs

UI:

• https://github.com/stsrki/Blazorise
• https://github.com/SamProf/MatBlazor

Real projects:

• https://github.com/vietnam-devs/coolstore-microservices/tree/ce2a3e87c6665be2c36e14fcb1ea4a4f5e0a6274
• https://github.com/enkodellc/blazorboilerplate
• https://github.com/lohithgn/blazor-tour-of-heroes
• https://github.com/gpeipman/BlazorDemo
• https://github.com/chrissainty/worddaze
• https://github.com/azunyuuuuuuu/MusicThingy
• https://github.com/stavroskasidis/BlazorWithIdentity
• https://github.com/ardalis/CleanArchitecture
• https://github.com/maraf/Money/tree/master/src/Money.UI.Blazor
• https://github.com/duracellko/planningpoker4azure/tree/master/src/Duracellko.PlanningPoker.Client

Progressive Web App support

https://github.com/jeffposnick/create-react-pwa

[IdentityServer] Particle background for login page

https://github.com/jnicol/particleground

Look at the code at https://github.com/IKKI2000/KendoUI-Admin-Site and demo at https://ikki2000.github.io/KendoUI-Admin-Site/admin/login.html

Build the specification pattern for the repository

https://codereview.stackexchange.com/questions/138282/specification-pattern-in-ef-part-1

Manage Blog usecase

• As an anonymous/user, I want to see the blog setting page
• As a user, I want to update the setting of blog page
• As a user, I want to disable her blog
• As an admin, I want to see the list of blogs
• As an admin, I want to modify/delete the blog of any user

BlogCore.App issue

Hi sir.
Thanks for amazing commenting and helpful details
If is possible I need some help at running BlogCore.App. I am student and I cant understand why got this errors:
ERROR in [at-loader] ./ClientApp/containers/Blog/BlogForm.tsx:133:19 TS2322: Type '{ name: "moderateComments"; placeholder: "Moderate comments"; component: typeof Checkbox; }' is not assignable to type '(IntrinsicAttributes & IntrinsicClassAttributes<Field<GenericFieldHTMLAttributes>> & Readonly<{ c...'. Type '{ name: "moderateComments"; placeholder: "Moderate comments"; component: typeof Checkbox; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Field<GenericFieldHTMLAttributes>> & Readonly<{ ch...'. Type '{ name: "moderateComments"; placeholder: "Moderate comments"; component: typeof Checkbox; }' is not assignable to type 'Readonly<BaseFieldProps<GenericFieldHTMLAttributes> & TextareaHTMLAttributes<HTMLTextAreaElement>>'. Types of property 'component' are incompatible. Type 'typeof Checkbox' is not assignable to type '"input" | "select" | "textarea" | ComponentClass<(InputHTMLAttributes<HTMLInputElement> & Wrapped...'. Type 'typeof Checkbox' is not assignable to type 'StatelessComponent<(InputHTMLAttributes<HTMLInputElement> & WrappedFieldProps) | (SelectHTMLAttri...'.
And 4 mores like this
in [at-loader] ./ClientApp/containers/Blog/BlogForm.tsx:133:19
&
in [at-loader] ./ClientApp/redux/modules/blog.ts:281:14
&
in [at-loader] ./ClientApp/redux/modules/common.ts:20:14
&
in [at-loader] ./node_modules/rxjs/scheduler/VirtualTimeScheduler.d.ts:22:22

Thanks

[Blazor] Localization

Working version is at https://github.com/jsakamoto/Toolbelt.Blazor.I18nText

• https://ronaldwildenberg.com/asp-net-core-localization-with-json-resource-files/

• https://github.com/rwwilden/AspNet5Localization/blob/develop

• https://github.com/BrunoZell/JsonLocalization

• https://dev.to/j_sakamoto/how-to-localize-texts-in-your-blazor-app-phn

• https://remibou.github.io/I18n-with-Blazor-and-ASPNET-Core/

• https://chrissainty.com/simple-localisation-in-blazor/

Style component

https://medium.com/@reiterer.a/how-to-build-a-simple-hackernews-feed-with-styled-components-a8905211e45e

Add the markdown editor

https://github.com/wangzuo/react-medium-editor
Plugins at https://github.com/yabwe/medium-editor/blob/master/src/js/defaults/buttons.js

Manage Post usecase

Include the use case of Comment as well

Project unable to load

I just downloaded this project and opened it in Visual Studio 2017 (15.9.4) and I am recieving errors on all the "Host" projects. Seems like something in the .csproj files is missing, I recieve the error "Project file is incomplete. Expected imports are missing.

When I tried to restore the Nuget packages I did notice one error "Package Microsoft.EntityFrameworkCore.Tools.DotNet 2.0.0 is not compatible with netcoreapp1.0 (.NETCoreApp,Version=v1.0). Package Microsoft.EntityFrameworkCore.Tools.DotNet 2.0.0 supports: netcoreapp2.0 (.NETCoreApp,Version=v2.0) BlogCore.Migrator"

[Blazor] Admin panel

https://github.com/chenhg5/go-admin // this has a beautiful login UI
https://github.com/z-song/laravel-admin
https://github.com/dotnet-express/AdminLTE-Starter-Kit
https://github.com/jeroennoten/Laravel-AdminLTE

Implement the architecture for this project

The Clean architecture should be considered

• https://8thlight.com/blog/uncle-bob/2012/08/13/the-clean-architecture.html
• http://tidyjava.com/clean-architecture-screaming/
• http://www.codingthearchitecture.com/2016/04/25/layers_hexagons_features_and_components.html
• http://www.codingthearchitecture.com/presentations/oreillysaconlondon2016-modular-monoliths

while waiting for an application based on net.core 3.0. from you, I tried to be able to use the netcore 2.0 application. but an error appeared.

haii...@thangchung
i am student. i'm learning clean code architecture. for this sample code.
i already tried in windows powershell

dotnet restore
npm install
node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js
node node_modules/webpack/bin/webpack.js

(my version node v11.14.0 and npm v6.9.1-next.0)
is this problem in typescript depencies or redux >?

thanks you.
Bion

and this is the result :

Hash: 609dbf83acef32af8343393c000451260c5b0501
Version: webpack 3.12.0
Child
    Hash: 609dbf83acef32af8343
    Time: 47667ms
                                   Asset      Size  Chunks                    Chunk Names
    674f50d287a8c48dc19ba404d20fe713.eot    166 kB          [emitted]         
    b06871f281fee6b241d60582ae9369b9.ttf    166 kB          [emitted]         
    912ec66d7572ff821749319396470bde.svg    444 kB          [emitted]  [big]  
    2fe2efe63441d830b1acd106c1fe8734.svg    239 kB          [emitted]         
                          main-client.js   2.15 MB       0  [emitted]  [big]  main-client
                                site.css    924 kB       0  [emitted]  [big]  main-client
                      main-client.js.map   2.56 MB       0  [emitted]         main-client
                            site.css.map  85 bytes       0  [emitted]         main-client
    
    ERROR in [at-loader] ./ClientApp/containers/Blog/BlogManagement.tsx:12:23 
        TS2344: Type '{ page: number; }' does not satisfy the constraint '{ page?: string | undefined; }'.
      Types of property 'page' are incompatible.
        Type 'number' is not assignable to type 'string | undefined'.
    
    ERROR in [at-loader] ./ClientApp/redux/modules/blog.ts:281:14 
        TS2322: Type '(state: BlogState, action: KnownAction) => BlogState | { blogSelected: any; loaded: true; loading...' is not assignable to type 'Reducer<B
logState>'.
      Types of parameters 'action' and 'action' are incompatible.
        Type 'AnyAction' is not assignable to type 'KnownAction'.
          Type 'AnyAction' is not assignable to type 'DeleteBlogFailedAction'.
            Property 'error' is missing in type 'AnyAction'.
    
    ERROR in [at-loader] ./ClientApp/redux/modules/common.ts:20:14 
        TS2322: Type '(state: CommonState, action: RedirectToAction) => CommonState | { to: string | null; redirectTo: ...' is not assignable to type 'Reducer<C
ommonState>'.
      Types of parameters 'action' and 'action' are incompatible.
        Type 'AnyAction' is not assignable to type 'RedirectToAction'.
          Property 'to' is missing in type 'AnyAction'.
    Child extract-text-webpack-plugin ../../../../../../../../Dermawan Gasali\source\repos\bionstt\blog-core\src\hosts\BlogCore.App\node_modules\extract-text-we
bpack-plugin\dist ../../../../../../../../Dermawan Gasali\source\repos\bionstt\blog-core\src\hosts\BlogCore.App\node_modules\css-loader\index.js!../../../../../
../../../Dermawan Gasali\source\repos\bionstt\blog-core\src\hosts\BlogCore.App\node_modules\font-awesome\css\font-awesome.min.css:
         3 assets
    Child extract-text-webpack-plugin ../../../../../../../../Dermawan Gasali\source\repos\bionstt\blog-core\src\hosts\BlogCore.App\node_modules\extract-text-we
bpack-plugin\dist ../../../../../../../../Dermawan Gasali\source\repos\bionstt\blog-core\src\hosts\BlogCore.App\node_modules\css-loader\index.js!../../../../../
../../../Dermawan Gasali\source\repos\bionstt\blog-core\src\hosts\BlogCore.App\node_modules\simple-line-icons\css\simple-line-icons.css:
         1 asset
Child
    Hash: 393c000451260c5b0501
    Time: 29999ms
             Asset     Size  Chunks                    Chunk Names
    main-server.js  4.86 MB       0  [emitted]  [big]  main-server
    
    ERROR in [at-loader] ./ClientApp/containers/Blog/BlogManagement.tsx:12:23 
        TS2344: Type '{ page: number; }' does not satisfy the constraint '{ page?: string | undefined; }'.
      Types of property 'page' are incompatible.
        Type 'number' is not assignable to type 'string | undefined'.
    
    ERROR in [at-loader] ./ClientApp/redux/modules/blog.ts:281:14 
        TS2322: Type '(state: BlogState, action: KnownAction) => BlogState | { blogSelected: any; loaded: true; loading...' is not assignable to type 'Reducer<B
logState>'.
      Types of parameters 'action' and 'action' are incompatible.
        Type 'AnyAction' is not assignable to type 'KnownAction'.
          Type 'AnyAction' is not assignable to type 'DeleteBlogFailedAction'.
            Property 'error' is missing in type 'AnyAction'.
    
    ERROR in [at-loader] ./ClientApp/redux/modules/common.ts:20:14 
        TS2322: Type '(state: CommonState, action: RedirectToAction) => CommonState | { to: string | null; redirectTo: ...' is not assignable to type 'Reducer<C
ommonState>'.
      Types of parameters 'action' and 'action' are incompatible.
        Type 'AnyAction' is not assignable to type 'RedirectToAction'.
          Property 'to' is missing in type 'AnyAction'.

[Blazor] Work with Datatables

The unified way to work with Datatables components
https://github.com/garvincasimir/csharp-datatables-parser
https://github.com/AlexanderKrutov/DataTables.Queryable

Adminstration panel

Some of the sample screens for build up the elegant pages for management https://activeadmin.info/index.html

Print out the url to pdf

Uses https://github.com/alvarcarto/url-to-pdf-api to experiment that print current page functionality.