How to Organize ASP.NET Core Web API and React + TypeScript Vite Application in a Project (Using Clean Architecture Template by Ardalis)?

Question

Description:

I have started a new project that involves building a web application using ASP.NET Core for the backend and React + TypeScript with Vite for the frontend. For structuring the project, I am following the Clean Architecture template by Ardalis to maintain a clean and maintainable codebase.

Current Directory Structure:

├── Directory.Build.props
├── Directory.Packages.props
├── docs
├── global.json
├── icon.png
├── CodeSave.sln
├── LICENSE
├── nuget.config
├── README.md
├── src
│ ├── CodeSave.Core
│ ├── CodeSave.Infrastructure
│ ├── CodeSave.SharedKernel
│ └── CodeSave.Web
└── tests
├── CodeSave.FunctionalTests
├── CodeSave.IntegrationTests
└── CodeSave.UnitTests

I plan to use ASP.NET Core to build the authentication Web API, and React + TypeScript with Vite for the frontend. I'm unsure about where to place the authentication Web API project and the frontend project.

1. Where should I place the ASP.NET Core authentication Web API project within the current structure while adhering to the principles of the Clean Architecture template by Ardalis?
2. Should I create a new folder for the frontend (React + TypeScript Vite application)? If so, where should I place it?

I want to maintain a clear separation between the backend and frontend codebases as per the Clean Architecture guidelines, so any suggestions on how to structure the project would be greatly appreciated. Additionally, any insights on setting up CORS for development would be helpful.

Thank you in advance for your valuable advice!

Answer 1

Don't really know anything about this "Clean Architecture" but you can also check out the "React and ASP.NET Core (preview)" template in Visual Studio 2022 17.7 Preview 2

This will create a solution with a separate frontend "reactapp" project and a backend "webapi" project.