.NET Core 2.0, Angular 4 and MySQL. Service Configuration

.NET Core configuration differs greatly from the standard .NET projects. We don’t have anymore a web.config file but instead, we use a built-in Configuration framework that comes with the .NET Core.

Therefore having a good understanding of how to configure your project and how to configure the services, which you will use until the end of the development process, is a must.

In this post, I will explain to you how to use the configuration methods in the Startup class. Also, you will learn how to register different services and how to use extension methods to help you achieve this.

If you want to see all the basic instructions and complete navigation for this series, please click on the following link: Introduction page for this tutorial.

For the previous part click on this link: MySQL, creating database data

This post is divided into several parts:

• Creating a New Project and Modifying LaunchSettings.json File
• Program.cs and Startup.cs Explanations
• Extension Methods and CORS Configuration
• IIS Configuration
• Conclusion

Creating a New Project and Modifying LaunchSettings.json File

After we have finished creating and populating the database, in the previous post, we are going to create a Visual Studio project for our server part of the application. Open Visual Studio 2017 and create a new ASP.NET Core Web Application with the name AccountOwnerServer.

In the next window choose Web API and from the left drop-down list choose .NET Core. Also, from the right drop-down choose ASP.NET Core 2.0. After all that, just click the OK button and the project will load.

After the project has been created, we are going to modify the launchSettings.json file. Let’s change the applicationUrl property and the launchBrowser property to false, to prevent web browser to start when the project starts.

In the Solution Explorer expand the Properties and double click on the launchSettings.json file. Let’s modify that file:

Program.cs and Startup.cs Explanations

In the Program.cs you will find this piece of code:

If you are familiar with the .NET Core 1.0, you will find that this code is considerably smaller than it used to be. Also, you could think that many parts are missing like the UseKestrel() or the UseIISIntegration()… but that is not the situation. Method CreateDefaultBuilder(args) encapsulates all that stuff inside, making this code more readable and quite smaller, but still keeping all the magic present.

You can also notice this part of the code: UseStartup<Startup>(). The Startup class is a mandatory for the .NET Core, in which we configure embedded or custom services that our application needs. When you open the Startup class, you can see the constructor and the two methods, which content we will change during the application development. In the method ConfigureServices, you will do exactly that, configure your services. Furthermore, in the method Configure you are going to add different middleware components to the application’s request pipeline.

All of our configuration code could be written inside the ConfigureServices method, but large applications could potentially contain many services. As a result, it could make this method unreadable and hard to maintain. Therefore we will create extension methods for each configuration and place the configuration code inside those methods.

Extension Methods and CORS Configuration

An extension method is inherently the static method. What makes it different from the other static methods is that it accepts “this” as the first parameter, and “this” represents the data type of the object which uses that extension method. An extension method must be inside a static class. This kind of methods extends the behavior of the types in .NET.

So, let’s start writing some code.

Create the new folder Extensions in the project and create a new class inside that folder, with the name ServiceExtensions. We are going to make that class a static and inside that class, we will add our service extension methods:

First, we need to configure CORS in our application. CORS (Cross-Origin Resource Sharing) is a mechanism that gives rights to the user to access resources from the server on a different domain. Because we will use Angular as a client-side on a different domain than server’s domain, configuring CORS is mandatory. So add this code to the ServiceExtensions class:

We are using the basic settings for adding CORS policy because for this project allowing any origin, method, and header is quite enough. But you can be more restrictive with those settings if you want. Instead of the AllowAnyOrigin() method which allows requests from any source, you could use the WithOrigins("http://www.something.com") which will allow requests just from the specified source. Also, instead of AllowAnyMethod() that allows all HTTP methods,  you can use WithMethods("POST", "GET") that will allow only specified HTTP methods. Furthermore, you can make the same changes for the AllowAnyHeader() method by using, for example, the WithHeaders("accept", "content-type") method to allow only specified headers.

IIS Configuration

Additionally, you need to configure an IIS integration which will help us with the IIS deployment. Add the following code to the ServiceExtensions class:

We do not initialize any of the properties inside the options because we are just fine with the default values. For more pieces of information about those properties, look at the explanation:

In the Startup class we will change the ConfigureServices and Configure methods:

In the ConfigureServices method, CORS and IIS configuration have been added. Furthermore, CORS configuration has been added to the application’s pipeline inside the Configuration method. But as you may notice, there is a little more code. Therefore, I will explain it now.

• app.UseForwardedHeaders will forward proxy headers to the current request. This will help us during the Linux deployment.
• app.Use(async (context, next) => … will point on the index page in the Angular project.
• app.UseStaticFiles() enables using static files for the request. If we don’t set a path to the static files, it will use a wwwroot folder in our solution explorer by default.

Conclusion

That is all for the Part 2 of this tutorial. Now you know how to modify the launchSetting.json file, the purpose of the Program and the Startup classes, how to configure services and finally how to create and use extension methods.

Thank you for reading and check out the next part in which we will create our first service, logger service, and use it for logging our messages.

If you have enjoyed reading this article, please leave a comment in the comments section below, and if you want to receive the notifications about the freshly published content we encourage you to subscribe to our blog.