C#•5mo ago

Solution Clean Architecture

Hello. I need some help in creating a solution that resembles clean architecture. I want to create a visual studio project with one central solution & in that solution i want it to have 3 folders which are backend, frontend and database. In the backend folder i want to create a new ASP.NET Core Web API project that uses controllers for creating APIs and the frontend folder to have a React application. How do I achieve this? I tried to ChatGPT this & I was thrown in the deep end. I couldn't figure it out. you might ask, why don't you use the clean architecture template. i am a beginner don't know how to navigate that solution and do separation of concerns at that level. please help

19 Replies

Unknown User•5mo ago

Message Not Public

Bulelani BotmanOP•5mo ago

first of all, thank you for replying. i ask this question because i'm tasked with my group to provide one project with separation of concern, which is that we should have folders of backend, frontend and database. for frontend, we have to do React & backend we chose ASP.NET Core because that's what we know. i asked this question because i've seen this separation of concern in one of the talks on dotnet conference on yt. its one solution with the backend and frontend. i could add the class library to my solution as the backend because as we started database is just dependency but know the backend implementation and the frontend for them to show in my solution as different folders is the problem.

Unknown User•5mo ago

Message Not Public

zodi•5mo ago

The potential directory structure example for the solution with the Blazor app hosting the React app. I only know about using React with Blazor (Modern ASP.NET Core):

MySolution
├── MySolution.sln
└── src
    ├── backend
    │   └── WebAPI
    │       ├── Controllers
    │       ├── Program.cs
    │       └── WebAPI.csproj
    ├── database
    │   ├── Repositories ??           // I dont know what you mean by database
    ├── frontend
    │   ├── BlazorHostApp             // Blazor Web App project
    │   │   ├── Properties
    │   │   ├── wwwroot                // This now contains the *built* React app files
    │   │   │   ├── index.html         // (from React build)
    │   │   │   └── static             // (from React build)
    │   │   ├── Components             // Blazor Components (if any)
    │   │   ├── App.razor
    │   │   └── BlazorHostApp.csproj
    │   └── my-react-app ??            // I dont know how this works outside of Blazor

MySolution
├── MySolution.sln
└── src
    ├── backend
    │   └── WebAPI
    │       ├── Controllers
    │       ├── Program.cs
    │       └── WebAPI.csproj
    ├── database
    │   ├── Repositories ??           // I dont know what you mean by database
    ├── frontend
    │   ├── BlazorHostApp             // Blazor Web App project
    │   │   ├── Properties
    │   │   ├── wwwroot                // This now contains the *built* React app files
    │   │   │   ├── index.html         // (from React build)
    │   │   │   └── static             // (from React build)
    │   │   ├── Components             // Blazor Components (if any)
    │   │   ├── App.razor
    │   │   └── BlazorHostApp.csproj
    │   └── my-react-app ??            // I dont know how this works outside of Blazor

Bulelani BotmanOP•5mo ago

lmao! separation of concern & decoupling of some sort yes, this is probably it. i just didn't know the right words for it. i thought that clean architecture is just a clean repo scaffolding with certain rules attached in them

Bulelani BotmanOP•5mo ago

i was able to attempt what i am talking about but then i can't view react code on my visual studio. like i can't add the project into the solution because i guess the .sln doesn't recognize things related to react.

Unknown User•5mo ago

Message Not Public

zodi•5mo ago

yeah i only know about using Blazor. this is how i would do it. use visual studio for development of the other parts, and load the wwwroot directory in VS Code to develop the react app.

Unknown User•5mo ago

Message Not Public

Bulelani BotmanOP•5mo ago

@TeBeCo you’ve been such a tremendous help & i’ll thankful. the points you highlighted were some that i never thought about. i’ll definitely change my things up & thank you again so much yeah! that’s what i just thought id do also. thank you

Unknown User•5mo ago

Message Not Public

Bulelani BotmanOP•5mo ago

@TeBeCo sorry for answering this late but the plan is to use vs2022 for all things c# & asp.net related and use vscode for the frontend the code will be written simultaneously i’m just building on top of the “npm create vite@latest”

Unknown User•5mo ago

Message Not Public

Bulelani BotmanOP•5mo ago

i care about local learning only & probably having a docker compose file to get both projects up & running at the same time which is?

Unknown User•5mo ago

Message Not Public

Bulelani BotmanOP•5mo ago

😭😭😭 i’ve learnt that yesterday & it’s all thanks to you. i just thought it was possible looking at how the ca folks were able to do it but now i understand what clean ca means

Unknown User•5mo ago

Message Not Public

Bulelani BotmanOP•5mo ago

never heard of "vertical slice" but i'll research about it. i really hope they invest more into frontend just like rider. yes, at the back of my mind i was thinking of doing such. i know i could just run

npm run dev

npm run dev

but then it is also me learning to use docker for the future because i'm still a beginner with software engineering

Unknown User•5mo ago

Message Not Public

Gaming

Programming

Solution Clean Architecture

Did you find this page helpful?