1

What is the correct way to structure files in real life application?

By default, if I'm correct, ASP.NET Core projects files should be structured as:

[Solution]

  • [Project]
    • Dependencies
    • Properties
    • Controllers
    • Models
    • Repositories
    • wwwroot
    • Pages
    • Startup.cs
    • Program.cs
    • appsettings.json

For any static file it should be inside a wwwroot folder, right?

But then why creating a ASP.NET Core project with React + redux template makes a folder 'ClientApp' instead of 'wwwroot' and places all react code in there with folders 'src' 'public'?

I know that you can do that and then in startup.cs enable it with 'app.UseSpaStaticFiles();', But why? Is it just to make it simpler or does it have real life benefits? Should I structure my files same way too?

And if I suppose, or can, use with 'wwwroot', how should wwwroot folder look? I know that wwwroot folder suppose to contain all the static files such as css, images and js

wwwroot

  • css
  • js
  • images

Since react is a js library/framework, should all code be inside js folder like this

wwwroot

  • css
  • js
    • src
      • actions
      • components
      • store
      • ...
  • images

I been trying to find an answer but everywhere everyone has a different answer.

On a side note, also if using scss, or similar, should all the scss be inside css folder or should there be a scss folder inside wwwroot that on compile saves css code inside css folder?

Lith
  • 1,251
  • 6
  • 19
  • It is a reason why React-app is kept separate in `ClientApp` folder. Maybe this will be more clear to you if you read up on `create-react-app`. There are already issues with React-app embedded inside asp.net Core projects, hence I wouldn't leave that path unless you have unlimited of time/patience :-) Merry X-mas – Roar S. Dec 18 '20 at 22:09
  • 1
    @RoarS. So what you saying is if I am not using a cra (create react app) but something else that does not have same issues, I should split up the code to `wwwroot`? If so, how do I handle all the components and actions in the folder? is it like how I presented `folders js -> src -> (actions, components so on)`? I am not planning to stay with cra on my asp.net core project. Just want to know how I should structure the files :) But thank you for the insight why by default its inside a `ClientApp`. Thank you and Merry xmas to you too :) – Lith Dec 18 '20 at 22:15
  • 2
    What I'm trying to say is that `React + redux template` is kind of a hack to make React working inside an asp.net Core-project. Is is very neat during devel with Hot Module Reload. I would never recommend to try to blend your React-app into your asp.net Core folder structure. In larger projects, APIs and front-end apps are kept separate. – Roar S. Dec 18 '20 at 22:19
  • 1
    I see. Thank you, this helped out a lot :) – Lith Dec 18 '20 at 22:25
  • 1
    Your quite welcome :-) If you decide to deploy such an app to e.g. Azure, please read my post on configuring caching for production: https://stackoverflow.com/a/64062989/14072498 – Roar S. Dec 18 '20 at 22:29

0 Answers0