ASP.NET Core Solution Structure

In this chapter, we will learn how ASP.NET Core solution items are organized in the Visual Studio and on the file system.

ASP.NET Core Solution Structure

We created an ASP.NET Core solution in the Previous Tutorial using the Empty Template.

The solution contains three folders Dependencies, Properties and wwwroot. It contains two files in the project root program.cs and startup.cs

Properties folder 

The Properties folder contains a file called launchSettings.json. This json file contains all the project specific settings needed to launch the application.You will find debug profile, environment variables that should be used etc in this file

wwwroot

The wwwroot folder is new in ASP.NET Core.  The Static files like HTML, CSS, JavaScript, and image files go into this folder or any subfolder under it.

The wwwroot folder is treated as the root of your website. The Url http://yourDomainName.com/ points to wwwroot. 

All files are served from the wwwroot folder or a subfolder under it. Place only those files which you want to serve.  This is called whitelisting. Files placed in other folder are automatically blocked. 

The Code files should be placed outside of wwwroot. That includes all of your C# files, Razor files, configuration files etc.

Dependencies

This folder contains all the Dependencies of the project.

The Visual studio now uses NuGet Packages for all the server-side dependencies. for the Client Side dependencies, the Bower is used. This is a deviation from the previous versions where NuGet is used for both for Server & Client side dependencies.

Under Dependencies folder, we have NuGet folder, which contains NuGet Packages and SDK Folder, which contains Microsoft.NETCore.App. This is the .Net Core runtime that we are targeting in our project.

The Bower folder is created, when we install the Bower packages

Files in your file System are now part of your Project

The project file (.csProj) has gone under a lot of changes in Visual Studio 2017. It has become lot simpler now.

There is a direct correlation between the files in the solution folder and what is displayed in the Solution Explorer in Visual Studio. The files you add to the solution folder automatically becomes the part of the Project.

To demonstrate this, we will add a file to the file structure in the File Explorer and see it show up in the Solution Explorer in real-time.

Open notepad and paste the following code

Now, save this to the HelloWorld project folder.

This file is automatically picked by the visual studio and added to the Project.

New Project system

The project.json, which was introduced along with ASP.NET Core 1.0 is discarded from the .NET Core 2.0

The installed NuGet packages are now listed in the .csproj file.

The .csproj files can be opened and edited directly from Visual Studio.

We can now right-click on the project and edit the .csproj file.  There is no need to unload the project before doing this.

The new csproj file contains very few elements compare to what it was in older versions of ASP.NET 

TargetFramework

The TargetFramework is netcoreapp2.0 which you modify it here 

You can also change the TargetFramework from the Project Property ( Select Project -> Right-click and select Property). Any things that changed in Project Property is updated in the .csproj file 

NuGet Packages

There are three ways you can add NuGet Packages to the Project

1. Modifying the .csproj file 
2. Using NuGet Package Manager
3. Via Package Manager Console         

Modifying the .csproj file

Select the project and Right-click and click on Edit HelloWorld.csproj

Add the following code and save the file

The NuGet Package Manager downloads and installs the dependency as soon as you save the .csproj file. The Yellow cautionary sign appears next to the assembly and it disappears when the installation is complete.

Using NuGet Package Manager

Select the Project and right-click and click on Manage NuGet Packages to install/remove NuGet Packages.

Bower Packages

Right Click on Project folder and click on Manage Bower Packages as shown in the image above. This opens up the Manage Bower Package page, where you can add/remove bower packages.

Installing the bower packages creates a folder name bower under dependencies folder

Conclusion

In this tutorial, we learned few things about the ASP.NET Core Solution Structure. The Visual Studio Team has made lots of improvements over the older system.