Solution overview
The first thing that catches the eye is that, as we've already mentioned, the layout of a standard ASP.NET Core solution is quite different from what it used to be in ASP.NET 4 and earlier versions. However, provided that we already have some ASP.NET MVC experience, we should be able to distinguish the ASP.NET back-end part from the Angular front-end part, and also figure out how these two aspects can interact.
The ASP.NET back-end stack is contained in the following folders:
- The
Dependencies
virtual folder, which basically replaces the oldReferences
folder and contains all the internal, external, and third-party references required to build and run our project. All the references to the NuGet packages that we'll add to our project will also be put there. - The
/Controllers/
folder, which has been shipped with any MVC-based ASP.NET application since the preceding release of the MVC framework. - The
/Pages/
folder, which contains a single Razor Page—Error.cshtml
—to handle runtime and/or server errors (more on that later on). - The root-level files—
Program.cs
,Startup.cs,
andappsettings.json
—which will determine our web application's configuration, including the modules and middlewares, compilation settings, and publishing rules; we'll address them all in a while.
As for the Angular front-end, it comprises the following folders:
- The
/wwwroot/
folder, which will contain the compiled, ready-to-publish contents of our application: HTML, JS, and CSS files, along with fonts, images, and everything else we want our users to have access to in terms of static files. - The
/ClientApp/
root folder, which hosts the Angular (and package manager) configuration files, as well as a couple of important sub-folders of which we're about to give an overview. - The
/ClientApp/src/
folder, which contains the Angular app source code files. If we look at them, we can see that they all have a.ts
extension, which means we'll be using the TypeScript programming language (we'll say more about this in a bit). - The
/ClientApp/e2e/
folder, containing some sample end-to-end (E2E) tests built with the Protractor testing framework.
Let's quickly review the most important parts of this structure.