loggerFactory.AddConsole(Configuration.GetSection("Logging"));
loggerFactory.AddDebug();
app.UseMvc();
}
Notice how empty our application's HTTP request pipeline is, it won't ever serve static files, since there is nothing telling it to do so. To better understand it, let's perform a quick test before proceeding.
Testing the HTTP request pipeline
In order to check that the ASP.NET pipeline is properly working, click on the Start Debugging option in the Debug menu, or just hit the F5 hotkey. If everything is OK, your default web browser will open pointing to the following
URL: http://localhost:14600/api/values.
The page content will show the following:
If we're seeing the preceding screenshot, it means that the request pipeline is working fine, the MVC module has been added within the Startup.cs file and it's working as expected.
That's because there's a sample ValueController.cs class in the /Controllers/ folder, conveniently added by the Web API project template we chose a while ago, that behaves exactly like this.
Now let's try to request the static Project_Readme.html file, also added by our chosen template in the project root. In order to reach it, we need to move it inside the /wwwroot/
folder. Once done, it should be reachable by pointing at the following URL: http://localhost:14600/Project_Readme.html.
However, if we try to do that, and then issue that request using the same browser we used before, we would get the following response:
This HTTP 404 error clearly demonstrates what we've just said, the HTTP request pipeline won't serve static files, simply because we didn't tell it to. However, we can easily fix that behavior by adding them to the pipeline within the Startup.cs file (new lines
highlighted):
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
loggerFactory.AddConsole(Configuration.GetSection("Logging"));
loggerFactory.AddDebug();
// Configure a rewrite rule to auto-lookup for standard default files such as index.html. app.UseDefaultFiles();
// Serve static files (html, css, js, images & more). See also the following URL:
// https://docs.asp.net/en/latest/fundamentals/static-files.html for further reference.
app.UseStaticFiles();
// Add MVC to the pipeline app.UseMvc();
}
While we are here, we also added the following:
A rewrite rule to enable support for the most common default files (such as index.htm, index.html, and so on), which will be automatically served without the user having to fully qualify the URI.
A series of comments to better clarify the meaning of each module, including a reference link to the official ASP.NET Core documentation.
If we run our application again, we should now be welcomed with the following:
That's it. We have enabled static file support, so that we'll be able to serve not only HTML but also CSS, JS files, and so on. Delete the Project_Readme.html and get ready to install an important third-party NuGet package that we'll be using a lot in the following chapters.
Newtonsoft.Json
If you're working with ASP.NET and you've never heard about Newtonsoft.Json (formerly Json.NET), you've almost certainly missed something that could've eased your job, big time. We're talking about one of the finest libraries – and most useful tools, ever developed for .NET, at least for the writer. It's a very efficient (and thus very popular),
high-performance JSON serializer, deserializer, and all-around framework for .NET, which also happens to be completely open source.
We won't dig into it anymore here, as we'll be using it soon enough. For now, let's just install it by right-clicking on our solution's node in the Solution Explorer, then choosing Manage NuGet Packages for this Solution… to open up the following panel:
Search for Newtonsoft.Json to make it appear if it isn't there already, then left-click to select it. Ensure to select the latest stable version (9.0.1 at the time of writing), click on Install, and then wait for the installer to complete its job.
That's it for now: if we open the project.json file now, we can see that the
Newtonsoft.Json package reference has been added at the end of the dependencies section, together with the other project-specific dependencies we've manually added before.
We'll be installing other packages using the GUI in the following chapters, as soon as we need them, now that we know how easy it is to do that.
JavaScript, TypeScript, or Dart?
Now it's time to choose the client programming language to adopt. Given the fact we're planning to use Angular 2, our choices are basically the following three: good old
JavaScript, its Microsoft superset known as TypeScript, or the Google growing beast known as Dart.
In this project, we're going to use TypeScript for a number of good reasons, the most important of them are as follows:
TypeScript has a number of features that JavaScript doesn't, such as static typing, classes, and interfaces. Using it in Visual Studio also gives us the chance to benefit from the built-in IntelliSense, which, together with its distinctive features, will allow us to spot most programming errors as we type the code, potentially saving a great amount of time.
For a large client-side project, TypeScript will allow us to produce a more robust code, which will also be fully deployable anywhere a plain JavaScript file would run. As a matter of fact, since TypeScript is a superset of JavaScript it can be used alongside any JavaScript code without problems.
Dart is a wonderful newcomer, and it will probably surpass its ECMA script-rivals soon. Currently though, it is still quite immature in terms of available third-party libraries, documentation, development support, and overall community knowledge.
We're not the only ones praising TypeScript: it's something acknowledged by the Angular team itself, considering the fact that the Angular 2 source code has been written using TypeScript, as proudly announced by Microsoft in the following MDSN blog post: https:/ /blogs.msdn.microsoft.com/typescript/2 15/ 3/ 5/angular-2-built-on-typescript/.