Visual C# Technical Guru - May 2017

Another month as a judge in Microsoft TechNet Guru Awards under Visual C# category. The TechNet Guru Awards celebrate the technical articles on Microsoft TechNet.

Post in WikiNinjas Official Blog,

https://blogs.technet.microsoft.com/wikininjas/2017/06/22/its-the-technet-guru-awards-may-2017/

Visual C# Technical Guru - May 2017

Happy Coding.

Regards,
Jaliya

Wrote a post on Wiki Life at Official Blog of TechNet Wiki

Wrote a post in Wiki Ninjas - Official Blog of TechNet Wiki. The title of the post is Wiki Life: TechNet Guru Competition – How far we have come.

Wiki Life: TechNet Guru Competition – How far we have come

Read the rest on,
Wiki Life: TechNet Guru Competition – How far we have come

Happy Coding.

Regards,

Jaliya

Creating a Docker Container Running ASP.NET Core Web Application Powered by React and Redux

This is likely going to be a quick post. I wanted to have a Docker Container running ASP.NET Core Web Application powered by React and Redux. Luckily there are nice SPA templates introduced by Microsoft, and there we have React, Redux template.

MVC ASP.NET Core with React.js and Redux

I created the application and did a publish. Then I have added a Dockerfile with following configs.

Dockerfile

FROM microsoft/aspnetcore:1.1.2
LABEL Name=ReactReduxApp Version=0.0.0
ARG source
WORKDIR /app
EXPOSE 30000
COPY ${source:-bin/Release/netcoreapp1.1/publish} .
RUN apt-get update
# Installing npm
RUN apt-get install -y npm
# Installing Node.js
RUN npm install -g n; n stable
ENTRYPOINT dotnet ReactReduxApp.dll    

Next I have build the image. This will install all npm and Node.js to my base Image. Once that is done, I have started the Container and all is good.

docker run

MVC ASP.NET Core with React.js and Redux Running in Docker

If you want to learn how to create a ASP.NET Core MVC Application running inside a Docker Linux Container this post should help.

Complete source code is available on GitHub.
https://github.com/jaliyaudagedara/Blog-Post-Samples/tree/master/ReactReduxApp

Happy Coding.

Regards,

Jaliya

Creating a Release Build of an ASP.NET Core Project using Docker ASP.NET Core Build Image

In one of my previous posts I wrote about Creating and Debugging Docker Enabled .NET Core Project in Visual Studio 2017 and in this post let’s see how we can create a release build of an ASP.NET Core Project using official Docker ASP.NET Core Build Image.

Right now I have a Docker support enabled ASP.NET Core MVC Application created (If you don't know how, you can read my above mentioned previous post).

Note: I have created the solution using Visual Studio 2017, but you don't need to have Visual Studio 2017 to create this solution. dotnet SDK and Visual Studio Code should be more than enough. For the next steps, we only need dotnet SDK and cmd/PowerShell.

Let's proceed. I have a clean solution, no obj/bin folders present yet.

No obj/bin folders

I have a PowerShell window opened on the root folder level.

PS C:\Users\Jaliya\Desktop\DockerComposeWebApp>

Next to do a Release build what I would do is do a dotnet restore and a publish like below.

# Restore packages
dotnet restore .\DockerComposeWebApp\DockerComposeWebApp.csproj
 
# Publish on Release mode
dotnet publish -c Release .\DockerComposeWebApp\DockerComposeWebApp.csproj

But in that case the build would be done on my local machine, instead here I want to use a Docker Container to do the building.

Now let’s open up the docker-compose.ci.build.yml in my local folder. Remember I did not write this file myself, Visual Studio 2017 created this for me when I have enabled Docker Support for my project (if you want to know how to get these docker-compose.xxxxx.yml files created when using Visual Studio Code, you can read this previous post of mine Running ASP.NET Core MVC Application inside a Docker Linux Container from Windows).

docker-compose.ci.build.yml

version: '2'
services:
  ci-build:
    image: microsoft/aspnetcore-build:1.0-1.1

    volumes:
      - .:/src

    working_dir: /src    

    command: /bin/bash -c "dotnet restore ./DockerComposeWebApp.sln && dotnet publish ./DockerComposeWebApp.sln -c Release -o ./obj/Docker/publish"

Here you can see that we have a service named ci-build which uses microsoft/aspnetcore-build Image and that is the official Image for building ASP.NET Core applications (version will be changed time to time). Then my current folder is getting mapped to src folder in the ci-build Container (which is not yet created). After Container is created and running, it’s working directory will get changed to src and the given command will get executed. And basically what the command does is a dotnet restore and a dotnet publish (here output path is set to .\obj\Docker\publish).

Now from PowerShell let’s run the following command.

# docker-compose up: Builds, (re)creates, starts, and attaches to containers for a service.
PS C:\Users\Jaliya\Desktop\DockerComposeWebApp> docker-compose -f .\docker-compose.ci.build.yml up

docker-compose up

(Note: since I already had microsoft/aspnetcore-build Image locally, it didn't get downloaded again. If not, downloading status of the image will be displayed here.)

Now if we examine the \DockerComposeWebApp project folder, we can see obj/bin folders has been created and if we go to .\obj\Docker\publish folder, build contents are there.

Published Folder

Now we have a Release build created using a Docker Container (remember we didn’t do the build on our local machine).

For a further step, to make sure all is good, let’s package this content into a another Docker Container and see whether it works.

docker-compose.yml

version: '2'
services:
  dockercomposewebapp:
    image: dockercomposewebapp    
    build:
      context: ./DockerComposeWebApp      
      dockerfile: Dockerfile

Dockerfile

FROM microsoft/aspnetcore:1.1
ARG source
WORKDIR /app
EXPOSE 80
COPY ${source:-obj/Docker/publish} .
ENTRYPOINT ["dotnet", "DockerComposeWebApp.dll"]

docker-compose.override.yml

version: '2'
services:
  dockercomposewebapp:
    environment:
      - ASPNETCORE_ENVIRONMENT=Development    
    ports:
      - "80"

PS C:\Users\Jaliya\Desktop\DockerComposeWebApp> docker-compose -f .\docker-compose.yml -f .\docker-compose.override.yml up

docker-compose up

docker images & docker ps

:latest Image of a build has been created and a Container is running which got instantiated from that Image.

Now let’s just browse the running port. And yes, it is working.

Site Running inside a Docker Container

Happy Coding.

Regards,

Jaliya

Creating and Debugging Docker Enabled .NET Core Project in Visual Studio 2017

In this post let’s see how you can use Visual Studio 2017 to develop .NET Core application with Docker support enabled and see what happens when you build/debug.

Let’s start off by creating a ASP.NET Core Web Application (.NET Core) and I am naming it as DockerComposeWebApp.

ASP.NET Core Web Application (.NET Core)

Once you clicked on OK from above, you are prompted to select application type (of course, I am sure you have done this hundred times, if not thousands).

Enable Docker Support

And there is a new check box presented in the dialog window, that is Enable Docker Support. You can either enable Docker support from there, or as mentioned, you can enable it later.

And I am not enabling it right now, I am clicking on OK and the solution gets created. And to enable Docker support now, you can right click on the Project, select Add and then click on Docker Support (well, you should be able to right click on any root item, and do Add –> Docker Support, but not on Solution level nor file level).

Enable Docker Support

Once you enabled Docker support, a Dockerfile has been added to DockerComposeWebApp project and you can see a new project that is added to the solution named docker-compose with some files.

Dockerfile

FROM microsoft/aspnetcore:1.1
ARG source
WORKDIR /app
EXPOSE 80
COPY ${source:-obj/Docker/publish} .
ENTRYPOINT ["dotnet", "DockerComposeWebApp.dll"]

Files View - Visual Studio

If you examine the files in the File Explorer, it looks like this.

Files View - File Explorer

Let’s just open up the docker-compose.dcproj file.

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="15.0" Sdk="Microsoft.Docker.Sdk">
  <PropertyGroup Label="Globals">
    <ProjectGuid>00832628-12a5-4b9b-b434-fcabd17c57b8</ProjectGuid>
    <DockerLaunchBrowser>True</DockerLaunchBrowser>
    <DockerServiceUrl>http://localhost:{ServicePort}</DockerServiceUrl>
    <DockerServiceName>dockercomposewebapp</DockerServiceName>
  </PropertyGroup>
  <ItemGroup>
    <None Include="docker-compose.ci.build.yml" />
    <None Include="docker-compose.override.yml">
      <DependentUpon>docker-compose.yml</DependentUpon>
    </None>
    <None Include="docker-compose.vs.debug.yml">
      <DependentUpon>docker-compose.yml</DependentUpon>
    </None>
    <None Include="docker-compose.vs.release.yml">
      <DependentUpon>docker-compose.yml</DependentUpon>
    </None>
    <None Include="docker-compose.yml" />
  </ItemGroup>
</Project>

And if you have a look at the ItemGroup, that is what it gives Visual Studio the nested view in docker-compose project items. So basically there is two main docker-compose files, one is docker-compose.ci.build.yml and the other is docker-compose.yml.

Now let’s see what happens when you debug the application. Since our main interest here is in Docker side of things, let’s set the docker-compose project as the startup project. Same time you can see that the Debug target is changed to Docker (if you debug the solution having the Web App project as the startup project it will not be debugging on Docker).

Before hitting F5, let’s see is there any Docker Containers running.

docker images & docker ps -a

Nothing specific to our current project (DockerComposeWebApp).

Now let’s debug. After couple of seconds, the site is working (well, it should) and what we need to focus is the Build output in Visual Studio.

------ Build started: Project: docker-compose, Configuration: Debug Any CPU ------
docker-compose -f "C:\Users\Jaliya\Desktop\DockerComposeWebApp\docker-compose.yml" 
               -f "C:\Users\Jaliya\Desktop\DockerComposeWebApp\docker-compose.override.yml" 
               -f "C:\Users\Jaliya\Desktop\DockerComposeWebApp\docker-compose.vs.debug.yml" 
               -p dockercompose1628124139 
               config

First VS is issuing docker-compose config command to validate and view the compose file and it shows the output as below.

networks: {}
services:
  dockercomposewebapp:
    build:
      args:
        source: obj/Docker/empty/
      context: C:\Users\Jaliya\Desktop\DockerComposeWebApp\DockerComposeWebApp
      dockerfile: Dockerfile
    entrypoint: tail -f /dev/null
    environment:
      ASPNETCORE_ENVIRONMENT: Development
      DOTNET_USE_POLLING_FILE_WATCHER: '1'
    image: dockercomposewebapp:dev
    labels:
      com.microsoft.visualstudio.targetoperatingsystem: linux
    ports:
    - '80'
    volumes:
    - C:\Users\Jaliya\Desktop\DockerComposeWebApp\DockerComposeWebApp:/app:rw
    - C:\Users\Jaliya\clrdbg:/clrdbg:ro
    - C:\Users\Jaliya\.nuget\packages:/root/.nuget/packages:ro
version: '2.0'
volumes: {}

Basically this is a consolidation of docker-compose.yml, docker-compose.override.yml and docker-compose.vs.debug.yml files.

Next Visual Studio is executing docker ps command setting up some filter options to see if there is already a Container related to our project.

docker  ps --filter "status=running" --filter "name=dockercompose1628124139_dockercomposewebapp_" --format {{.ID}} -n 1

And there is no output. But still above command follows couple of docker-compose kill and docker-compose down commands using docker-compose release and debug yml files.

docker-compose -f "C:\Users\Jaliya\Desktop\DockerComposeWebApp\docker-compose.yml" 
               -f "C:\Users\Jaliya\Desktop\DockerComposeWebApp\docker-compose.override.yml" 
               -f "C:\Users\Jaliya\Desktop\DockerComposeWebApp\docker-compose.vs.release.yml" 
               -p dockercompose1628124139 
                kill
 
docker-compose -f "C:\Users\Jaliya\Desktop\DockerComposeWebApp\docker-compose.yml" 
               -f "C:\Users\Jaliya\Desktop\DockerComposeWebApp\docker-compose.override.yml" 
               -f "C:\Users\Jaliya\Desktop\DockerComposeWebApp\docker-compose.vs.release.yml" 
               -p dockercompose1628124139 
               down 
               --rmi local 
               --remove-orphans
 
Removing network dockercompose1628124139_default
Network dockercompose1628124139_default not found.
 
docker-compose -f "C:\Users\Jaliya\Desktop\DockerComposeWebApp\docker-compose.yml" 
               -f "C:\Users\Jaliya\Desktop\DockerComposeWebApp\docker-compose.override.yml" 
               -f "C:\Users\Jaliya\Desktop\DockerComposeWebApp\docker-compose.vs.debug.yml" 
               -p dockercompose1628124139 
               kill
 
docker-compose -f "C:\Users\Jaliya\Desktop\DockerComposeWebApp\docker-compose.yml" 
               -f "C:\Users\Jaliya\Desktop\DockerComposeWebApp\docker-compose.override.yml" 
               -f "C:\Users\Jaliya\Desktop\DockerComposeWebApp\docker-compose.vs.debug.yml" 
               -p dockercompose1628124139 
               down 
               --rmi local 
               --remove-orphans
 
Removing network dockercompose1628124139_default
Network dockercompose1628124139_default not found.

And finally docker-compose up command with build argument is being executed.

docker-compose -f "C:\Users\Jaliya\Desktop\DockerComposeWebApp\docker-compose.yml" 
               -f "C:\Users\Jaliya\Desktop\DockerComposeWebApp\docker-compose.override.yml" 
               -f "C:\Users\Jaliya\Desktop\DockerComposeWebApp\docker-compose.vs.debug.yml" 
               -p dockercompose1628124139 
               up 
               -d 
               --build
 
Creating network "dockercompose1628124139_default" with the default driver
Building dockercomposewebapp
Step 1/6 : FROM microsoft/aspnetcore:1.1
 ---> e57f6d3fac0a
Step 2/6 : ARG source
 ---> Running in 1d44520ba0ff
 ---> 3b1eab823df1
Removing intermediate container 1d44520ba0ff
Step 3/6 : WORKDIR /app
 ---> 2f8078c67f8b
Removing intermediate container 8e3775dc753a
Step 4/6 : EXPOSE 80
 ---> Running in ee30aa3b3287
 ---> 38ea46a28cd0
Removing intermediate container ee30aa3b3287
Step 5/6 : COPY ${source:-obj/Docker/publish} .
 ---> 441f4a61d8ee
Removing intermediate container 7426260a8476
Step 6/6 : ENTRYPOINT dotnet DockerComposeWebApp.dll
 ---> Running in 471fb962159c
 ---> e756ed44b5f7
Removing intermediate container 471fb962159c
Successfully built e756ed44b5f7
Creating dockercompose1628124139_dockercomposewebapp_1
========== Build: 1 succeeded or up-to-date, 0 failed, 0 skipped ==========

And now if I examine Images and currently running Containers, I can see an Image is created and a Container is running related to our project.

docker images & docker ps

And that’s it for this post. You definitely will like to see what happens/what commands gets executed if we stop the Debugger and start back. And I will leave it with you to find it out.

Note: I have not gone through all the theoretical things related to Docker Compose as Docker maintains a rich documentation over those.

Happy Coding.

Regards,

Jaliya