Thursday, December 10, 2015

ASP.Net 5 - Simple Html Page App

Motivation

As part of a recent undertaking to learn Angular JS I started using the beta version of ASP.Net 5.   I figured why not introduce lots of new things at once and hope for the best.    As you might expect learning a new framework while trying to learn a new (to me) technology did prove a bit tough and required a few extra google searches and test programs.   ASP.Net 5 is pretty straight forward, the changes to Visual studio are well documented and there are lots of examples to help get started.   I had trouble finding simple examples that demonstrated one idea or task.   Hopefully the examples I create here will help.

Serve up Basic Html file


This example will show how to create a simple app to server up an html file;  test1.html.

Step 1a)   Create new Web Application


Start up Visual Studio 2015 and choose start new project.
Choose  Templates - c# -  Web


 Choose an empty ASPNET 5 Preview Template


Step 1b) Build & Run

Build and run the application. 


Step 2) Add support for static files

ASP.Net 5 uses the new application framework to process an http request.   The request is passed through a pipeline of middleware components.  See  http://docs.asp.net/en/latest/conceptual-overview/aspnet.html#middleware in the overview document to get more details.

The StaticFiles middleware component is required to serve up html files.   

The initial Configure method in the Startup class adds two items to the request pipleline; UseIISPlatformHandler() and app.Run() with a fixed action of returning the message Hello World.

Initial Startup Class

    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
        }

        public void Configure(IApplicationBuilder app)
        {
            // Add the platform handler to the request pipeline.
            app.UseIISPlatformHandler();

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


To server up static files you need to change the app.Run() middleware to app.UseStaticFiles()
// Add static files to the request pipeline.
  app.UseStaticFiles();
The Configure method will have two handlers.

public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
        }

        public void Configure(IApplicationBuilder app)
        {
            // Add the platform handler to the request pipeline.
            app.UseIISPlatformHandler();

            app.UseStaticFiles();
        }
    }

The UseStaticFiles middleware is defined in the Microsoft.AspNet.StaticFiles library.   Add this library using nuget.


Nuget will modify the project.json file adding the Microsoft.AspNet.StaticFiles package.


You can modify the project.json file directly if you prefer.

Step 3) Add Test1.html

Add an html file to the project.    Right click on wwwroot and choose add new item.   Then add test1.html or whatever your favorite name may be.



Step 4) Run

Build and run the application again and navigate to the new html page.


Conclusion

My goal in creating this simple program was to investigate a client side app that didn't include any unnecessary C# libraries.   It turns out its easy and it works well.  I would like to build an Angularjs app using my IDE of choice and serve it up in IIS.  Before adding Angularjs I thought it would be good to understand and create a base program first and this is about as simple as it gets.    With Asp.Net 5 you can create a client side program without including MVC or any other unnecessary libraries and I think that's cool.   (But Im biased).

---
The code is available at https://github.com/JayJohnson29/AspNet5



   

No comments:

Post a Comment

ASP.Net 5 - Simple Html Page App

Motivation As part of a recent undertaking to learn Angular JS I started using the beta version of ASP.Net 5.   I figured why not introdu...