ASP.NET Core 2.0 and Angular 2 Project Folder Structure

In the previous tutorial, I have discussed about how to create a web application with ASP.NET Core 2.0 and Angular 2 using Visual Studio Code Yeoman generators. This way is very easy to create a web application. So, When I created the project, you have seen there are so many folders and files are created under the “MYFIRSTAPP” folder. And we didn’t explain about these folders and files in previous tutorial.

But now in this tutorial, I will discuss the project folder structure of ASP.NET Core 2.0 and Angular 2 application. And I will explain what are the purpose of these folders and files in asp.net core angular 2 project.

If you don’t know how to create a project with ASP.NET Core 2.0 and Angular 2 using Visual Studio Code generators, then I would highly recommend to go previous tutorial.

ASP.NET Core Angular 2 project folder structure

Let’s understand what is the purpose behind these files and folder in ASP.NET Core Angular 2 project.

ClientApp

Where we have all the client-side code of the angular app. E.g. Components, Modules, routing, and templates etc. Any further client-side (Angular 2) development code should be written here.

Controller

It belongs to ASP.NET Core. The purpose of this folder is exactly same as in ASP.NET MVC. The controller can be written here.

Node_modules

It contains all the npm (Node Package Manager) packages installed. The Package.json file contains the list of all the npm packages that needed to work with Angular 2 and other technologies Jquery, bootstrap etc.

Views

It also belongs to ASP.NET Core. The purpose of this folder is also exactly same as in ASP.NET MVC. It contains the MVC Razor HTML Files like Index, Layout, Error etc.

wwwroots

It is the folder, where we put the public assets (Static files and Libraries) for our application for the client side. E.g. Images, Fonts, Icons, and etc. So, these static files and libraries are accessible right from the root of the project.

Dist

This folder is under the wwwroots folder, where we have javascript files. Main-client.js, Vendor.js, Vendor.cssjson

AppSettings.json

This is where we store our application settings in ASP.NET Core. In previous versions, we used web.config for that.

Program.cs

This is ASP.NET Core class where our application starts. It is very important file in ASP.NET Core. If you open this file, then you will see this class contains a Main() method which looks quite familiar with that you have been seeing in C# Console apps.

Startup.cs

If you open this class, then you will see it have 2 methods ConfigureServices() and Configure(). This class is basically used for configure middle-wares on the request pipeline. We also use this class as a Dependency Injection Container for ASP.NET Core.

Csproj file

This is project file that visual studio recognizes.

config.js

This file works with angular CLI. It is bundler for client-side code. It can compile and minify all are javascript and stylesheet files. Using this webpack.config.js file, we are basically telling the webpack where our source files are, how they should be processed, and where they should be stored.

config.vendor.js

In this file, we have the configuration for compiling all the third party libraries. If you want to add any third-party configuration in your project, then you can add them here.