VS Code and ASP.Net Core Developement

Today I will post my experience in VS Code creating and debugging ASP.Net Core apps.

First of all, VS Code has an huge extension Libary and you must use it I think.
So I use some plugins that take some work of me.

The first Plugin is the Yeoman Generator engine. This generates a sekelton for any projects what you will write.
You can install this with following NPM Command:

After installing it, you need to install the generators too. You will find them on http://yeoman.io/generators/.
But for the example we use only the aspnetcore generator, you install it with:

After installing it, you can execute the follwoing command to start the aspnet core generator.

After this you will see a selection of templates like this.

ASP-Yoeman

We select “Web Application Basic [without Membership and Authorization]”. After confirming it with Enter, it guide us throught a wizard and ask us several things. I listed the answers in the following table:

UI-Framework: Bootstrapt
Name: Testproject

 

When we answered all Questions from the wizard, it start to generate the sekelton for the ASP.Net Core project. This include that it get the latests resources from bower and npm. So it will present a fresh set of libaries that will be used in the project.

After the wizard is done you must execute some extra commands

The dotnet restore command has the effect, that the missing components from nuget will be restored.

Now you it’s time to turn on Visual Studio Code, and load the directory the contains our “Testproject”. That look in VS Code like in this picture:

Folderstructure

I accept the info that appears in the top infobar. The adds a new directory called .vscode and adds two files in it. These files are launch.json and tasks.json.

The tasks.json contains the different tasks that we can call in the visual studio code command. At the moment there is only the Build Task. the Content for this file looks like the following

This json describes, that there will be executed the “dotnet” as a shell command. The tasks describes will describe the arguments for the command. In the example above there exists a task called “build” and takes a argument “${workspaceRoot}\\project.json”. This tells that the project.json in the current workingdirectory will be used for compiling.

The launch.json look like this:

The describes the build and debug process itself. This is very self-explanatory.

Now it’s time to compile and start the webapplication. We simply hit F5 and the VS Code compiles the application and start the Browser to dipsplay the Page.

The result looks like my result:

ASP-Net Core Result

So now we have a cool running asp.net Project. We want to run it in a docker container. But first let’s have a look into the solution explorer. We will se a file that will be called “Dockerfile”. Okay Docker = Docker…file.. let’s look into it, and we will se this content:

Hey this looks like a Build definition for docker. You can install docker from the docker page, it is absolutely free and a instruction with a few first stept you’ll find here.

Now when you have installe docher, the only thing what you must do ist open up a PowerShell in Administration Mode. An run the compile command for docker:

Now the magic begins, this get the latest dotnet image, copy the current sources into the app directory in the docker image. After this it set the working directory ti the app directory. After that happened, it run the dotnet command tow times, the first time with the “restore” parameter, to restore the nuget packages and references, after that it do a “build” to compile the app IN THE CONTAINER!!!. After this it will opens up a tcp Port 5000 and execute the command to start the dotnet webserver.

The takes some time, but when it is ready you will see that it has worked. If you then apply some changes this will doesn’t take so much time, it is only the initalize of the image.

The complete output looks like the following output:

What did we do now? So we created an image that contains our webapplication we developed before. Wenn we do the command “docker images” to get the available images you will se the mywebproject image. We can now take this image and check it into the docker repositority in, so that this image can now deployed to a testsystem or a production. This was easy for now.

But as next step, we will test our image if it works.

We must run the image

This command start up the image and opens the port 5000. Now we can make an call to http://localhost:5000 and BAM we get our webapplication running in this container.
But what is, if we have an problem and wan’t to debug in this image. This can be do if we open the remote debugger port onto it.

Now you can attach your debugger and do a remote debugging if you want.

The big advantage of docker (or this techique) is that the sentence “on my dev machine it works” doesn’t occur. Because you set the live enviroment and deploy it too. So when an error occur, you will get this on your “dev machine”.