Containers on Windows 10

This is part 1 of what will most likely be a series (unless I get totally hacked off with containers like I am right now). Part of the series will be about getting containers up and running on a Windows 10 box to run a Windows based container. Then I will progress onto Windows Server 2016 and get the same configured container to run on that and hopefully discover some kind of work flow for developers along the way. The end game is to develop a website using Visual Studio 2015, test on Nano Server running IIS and deploy using Server 2016.

Pre-requisites.


Apart from Windows 10 professional or Enterprise, you need to be sure you are running at least the Anniversary Update (1607); to check this go to a command line and type:- winver

I am running 1607 build 14393.187 (22nd September 2016)

image

Enable Containers

To get containers installed, you need to enable the feature. This can either be done using PowerShell or the UI. Here is the PowerShell:-

Enable-WindowsOptionalFeature -Online -FeatureName containers -All

Then as Windows 10 will only support Hyper-V containers, enable that feature as well:-

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Hyper-V -All


Then restart the computer

 

Installing Docker


As of Docker version 1.12 there is an option to download Docker for Windows, however to natively run Windows containers instead of using MobyLinux as a middle ware virtual machine, opt to install the beta version which can be found here:- https://docs.docker.com/docker-for-windows/

Switch to Windows Containers

Once installed, right click the whale and switch to using Windows Containers.
docker-7

docker-8

docker-9

Now you can get the version of Docker and it should show that both host and client are running windows.

docker version

docker-10

Nano Server

Currently you can only run containers that are based off the kernel that the host operating system is running, so on Windows 10 you can only run Nano Server containers; likewise on Server 2016 you can run both Server Core and Nano Server containers. You cannot run a Windows 10 container on Windows 10 or a Server 2016 container on that server, it always has to be a down level edition. So the best way to get Nano Server is from the Docker hub at:- https://hub.docker.com/r/microsoft/nanoserver/

In your command line or PowerShell screen use:-

docker pull microsoft/nanoserver

docker-11

It will take a while to download if it has not already been cached on your host machine.

List the images

To list the images you have on your host use the command:-

docker images

docker-16

 

Run Nano Server

This can be achieved simply by using the docker run command; however if you want to run it interactively you can append the –it flag and get into a command line like this:-

docker run –it microsoft/nanoserver cmd

Once it starts up you will be in the command line of the container; you can check this by using the hostname command.

docker-17

You can get out of this container by typing exit and it will get you back to your host machine. Once there use the command docker ps and it will list all running containers and you will see there are none running now. You can however use the switch –a to get all containers in both running and stopped state.

docker-18

As you can see I have a lot of containers, but thats ok I can delete them all by iterating through them all and remove using the rm command like this:-

FOR /f "tokens=*" %i IN ('docker ps -a -q') DO docker rm %i

docker-19

A nice clean slate to start again.

Happy coding.


I have finally rewritten my MoonPhase app to be a UWP app. This allows me to write the code once and have it on a Windows 10 phone as well as a standard Windows 10 desktop or tablet.

With this app, there are three main interfaces that show you the phases of the moon; a day view, week view and a month view. As the phone interface is somewhat constrained, I decided to only show the day view on these devices and allow the user to move back and forward in time to get to other dates.

Phone view

image

Desktop view

image

So in the code I had to detect the screen size of the current device, this can be done in the app.onactivated event of the WinJS framework.

getCurrentView() will get the device view object where we can then query it for the visibleBounds properties. I am using a device height of 800 which covers phones in the 5inch range such as Lumia 650.

Then a conditional is used to render either the day.html view or the week.html view for all other devices.

Also as I don’t want phone users to see the buttons to navigate to week or month views, I simply use jQuery to get all the buttons from the toolbar that have a certain class and remove them.

The app can be found in the Windows app store here.

Happy coding.


Creating Controllers in Umbraco CMS

On a recent project I needed to implement a secure area on a public facing website that runs on Umbraco CMS.
Umbraco runs on top of ASP.Net MVC, so pretty much what you can do with ASP.Net MVC you can do with Umbraco. The key requirements for this small project were to create a secure area that allows users to register for an account and login. Also the registered users were to be given different roles one for the uploading of documents and the other for the download of the same documents.

image

As MVC implements the membership provider, it was possible to create a register form which uses the same provider. In the view instead of using Html.BeginForm, for Umbraco we use Html.BeginUmbracoForm()

All this method does is acknowledge the registration and send out an email to the admin staff who then validates the request offline. One they have done this they will manually create a member in the Umbraco back office. Members in Umbraco can belong to either the Member type or a custom type. For our implementation we created a Portal Member Type that has all the same properties as the Member type except for an additional Portal Admin property. Members that are a Portal Admin are allowed to upload documents to the secure area; all other members are read only in essence.

image

So when the admin staff adds a new Member they choose the Portal Member Type.

Then simply add the necessary details and save.

image

Now that the user has an account to login they can go back to the same page and enter their credentials.

Which when posted sends required parameters to the controller.

This controller inherits from the Umbraco SurfaceController which allows it do either a standard redirect or a RedirectToCurrentUmbracoPage() for invalid attempts.
This method simply uses the Membership.ValidateUser() method which does the lookup in the database for the user.

Once the redirect has been complete, the call into the Index method of the GovernorPortalController occurs which inherits from the Umbraco RenderMVCController class. This class allows the Index method to be overridden and so a model can then be passed to the calling view. In our implementation we simply go to a backend database to get a collection of document details that are stored in a custom table in SQL Server. The controller then passes that collection to a ViewBag that the view then iterates through.

For some reason that I am yet to work out, the recommended way to implement custom controllers in Umbraco is to override RenderMVCcontroller for GETs and override SurfaceController for POSTs.

Anyway that aside, Admin Portal users need to upload documents to this area so another form is added to the same view. This is again using the Html.BeginUmbracoForm() helper method that posts to the UploadController's UploadFileMethod taking in an HttpPostedFileBase and title string parameters.

image

After checking this file's ContentLength, it is then saved to the server file system while being saved with a GUID for its filename to stop conflicts.

Various properties are then saved to the database, in this example I am using a simple SqlCommand instead of using Entity Framework as nowhere else in the site is using EF.

Once a collection of documents is presented to the user, admin users can delete documents by the use of a conditional that checks their role; this is found by querying the Umbraco properties for the user.

Happy coding.


Through the life of this blog in its many guises I have used Blogger, Community Server and WordPress. Now comes the time to move again and I have opted to use MiniBlog; a project created by Mads Kristensen of Visual Studio Web Essentials fame.

About MiniBlog

MiniBlog is written in ASP.Net, C# and uses the website template in Visual Studio. It has a simple architecture and persists the blog posts in XML format as physical files on the web server drive. There is much more to this platform though such as:-

  • Windows Live Writer support
  • RSS and ATOM feeds
  • Support for robots.txt and sitemap.xml
  • Much much more…

Why move?

Although I have had a great experience using WordPress over the past few years, I have become more apparent of the bloat that is downloaded to the users browser in the form of Java Script and CSS. As a developer who strives to optimise web pages to get a better UX for the user, this didn't sit right with me.

old-js

This is the old sites Java Script showing over kb of data downloaded to the users browser.

old-css

The CSS is also loaded with the many styles from various plugins used in WordPress.

Wordpress is written in PHP and my experience is .Net, also the back end it's MySQL again a technology I am not 100% experienced with. So to make the changes to optimise the blog to a level I was happy with would leave me with either rewriting the entire theme and persistence layer or move to a technology stack I can have more control over. MiniBlog gives me this. I can create the style and layout I want with Razor and CSS and tweak the caching layer in the C# code. I can also get gulp up and running to run tasks to concatenate and minimize the css and Java Script files. Also like other projects I am working on, I can easily create a work flow in Team City to do the build and deploy.

What I had to do

Firstly I had to export all my blog posts from WordPress into a format that MiniBlog can understand. Again thanks to Mads Kristensen I could use the MiniBlogFormatter tool to get my posts into the correct format. This tool outputs each post to a seperate XML file. Then going through the current blog I found and separated post I wanted to keep that covered topics and technology that are still current. Then I created a temporary website in IIS to test these posts. It soon became apparent that the directory structure was different and MiniBlog uses a post directory to store files. I didn't want to loose any links to popular posts especially those that are referred to from other sites, so I created a url rewrite rule to do redirects to the new structure for users coming in on the old url.

Optimization

As I have mentioned in a past post concatinating and minification of Java Script and CSS can be achieved by using gulp. Once this was done, the number of files downloaded was much less than before.

new-js

Now only 16 files are downloaded as opposed to 46 in the old site.

new-css

Also with the CSS, there are only 2 as opposed to 7 requests.

With the images, I used Paint.Net to decrease the resolution and size for better performance.

Then in IIS, I navigated to the HTTP Response Headers section for the directories that contain the Java Script and CSS files.

iis 

Clicked on the ‘Set common headers’ link in the top right hand corner.

http-headers

Set the expires date to a date far into the future.

Comments

I was getting a lot of spam comments which Akismet took care of, so I had to find an alternative which would also protect me. I enjoy reading the comments and like to respond so switching off comments was not an option. I eventually went for Disqus which has a plugin architecture that was really simple to implement.

So there you have it, this is now the new blog site. It will change in style over the next few weeks as I make tweaks here and there, but with the CI/CD workflow I have in place this is very easy to work with.

What next?

I run all my sites of the same box which also has both MySQL and SQL Server running on it, so soon I can switch off MySQL, uninstall the PHP processor that it's part of IIS and hopefully free up some more resources.

Happy coding


Offline Web Applications

The HTML 5 specification, now available in most evergreen web browsers, gave the power of offline web applications. How this works is a manifest file is downloaded to the client which lists all files needed to make that page useable even if there is no network connection. This manifest file canm include JavaScript, CSS and HTML files. Of course it is possible to create an ASP.Net MVC application that can use this same technique as it renders HTML 5 anyway, however there are a few gotchas to look out for which I will cover in this post. Firstly the path to the .manifest file needs to be included in the HTML element at the top of the page.
<html lang="en" manifest="offline.manifest">
manifest file
For an MVC site, simply add the reference to the manifest in the _Layout file and add each resource you want in the browser application cache.
 
These resources above are used for the standard MVC template you get with Visual Studio 2015.
Now to get IIS to serve up this offline.manifest file you either have to add a mime type on the server or add it to the <system.webserver> element in web.config.
Its important that you add the clear element and you need then to add the usual types your site will serve up other wise you will get an HTTP 500 on each of these.
In Chrome when browsing to this page you can examine the Application Cache by going to the developer tools (F12) and going to the Resources tab.
1
Make sure that the 'Disable cache' check box is cleared as by default it is checked when you open up the developer tools and the browser will not retrieve the files needed from the cache.
2
Now by switching off your network connection or setting the Network throttling drop down to Offline (I disable my network card temporarily for a full test), your website should still view correctly and as the JavaScript has also been cached, it should function the same as well.
3
The main issue with the .manifest file is the browser does not know when the contents listed in it have changed unless the time stamp on the manifest itself has changed. One way to do this is to version the file and an even better way is to version it by using your application build number.
There are many issues with MVC serving up a .manifest file and the easiest solution I have found is to write out a physical file to the location the site is hosted in like this.
Which can be placed inside the Home/Index controller. Then add the path to the _Layout file like this.


<html lang="en" manifest="/Manifest/offline.manifest">


You will need to add write permissions to this directory for the IIS account so it can delete and write the file. Now if your build number increments each time you do a build and deploy, the manifest file will be regenerated and the client browser will pick up any changes.


Happy coding