ASP.NET 5 getting started from scratch

Let's see how ASP.NET 5 works and discover how we can build a basic website with an API and an Angularjs frontend. Just like we're used to doing with Node.js. Let's see how the Microsoft way compares. Maybe I'm a little late because the current release seems to be 1.0.0.-rc2 on Github. So there's tons of info on the Internet already. And here is my bit as well. 🙂

I will use the Visual Studio Community Edition and I've got a VirtualBox VM running. And let's also host the app in Azure and see how we can collaborate using the Visual Studio Online tools.

First, select File, New, Project and select the Empty ASP.NET 5 template:

aspnet5_1

 

 

 

 

 

 

 

Let's debug and run it immediately!

aspnet5_2

 

 

 

 

Cool! Now where did that came from?

Startup.cs

Startup.cs is the entrypoint for an ASP.NET 5 application. I feel it compares to the app.js or index.js in an Express application which requires all the dependencies needed for the application. It is what the Global.asax was before. There are 2 sections: ConfigureServices and Configure. I think the comments describes their purposes really well:

public class Startup
    {
        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app)
        {

           
            app.UseIISPlatformHandler();
              
            app.Run(async (context) =>
            {
                await context.Response.WriteAsync("Hello World!");
            });             
        }

        // Entry point for the application.
        public static void Main(string[] args) => WebApplication.Run(args);
    }

Adding a static page

If we follow along the Express.js workflow, I would now need to add the possibility to add a static file (index.html). And I would need to plug that in to the Startup.cs. And I would need to install the dependencies in a package.json sort of file:

And that is correct. There is a project.json file in the solution and I need to add a dependency to Microsoft.AspNet.StaticFiles. Add it like I did at line 10. (It has intellisense, cool!)

{
  "version": "1.0.0-*",
  "compilationOptions": {
    "emitEntryPoint": true
  },

  "dependencies": {
    "Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final",
    "Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final",
    "Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final"
  },

  "commands": {
    "web": "Microsoft.AspNet.Server.Kestrel"
  },

  "frameworks": {
    "dnx451": { },
    "dnxcore50": { }
  },

  "exclude": [
    "wwwroot",
    "node_modules"
  ],
  "publishExclude": [
    "**.user",
    "**.vspscc"
  ]
}

Now I can add an index.html file in wwwroot and edit Startup.cs. Delete everything in the Configure method and add 'app.UseStaticFiles();'.

 public void Configure(IApplicationBuilder app)
        {
            app.UseStaticFiles();
        }

Run the app and now this page is served:
aspnet5_3

 

 

 

 

But of course I don't want to type in the URI. I want the web app to server default files.
Then it seems I still need to add middleware to serve the index.html. Add 'app.UseDefaultFiles(); to the Configure method in Startup.cs:

public void Configure(IApplicationBuilder app)
        {
            app.UseDefaultFiles();
            app.UseStaticFiles();
        }

You can find a great explanation here.

So great! That means I can go ahead and add Bootstrap and Angular and that I can write some serious api in C#.

BTW, if you want to know how Microsoft (and the community I must add) has envisioned an ASP.NET 5 web project, please try the MVC web app template.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.