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://ift.tt/1ryZvM8.
But for the example we use only the aspnetcore generator, you install it with:
npm install -g generator-aspnet
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.
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
cd "Testproject" dotnet restore
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:
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
{ "version": "0.1.0", "command": "dotnet", "isShellCommand": true, "args": [], "tasks": [ { "taskName": "build", "args": [ "${workspaceRoot}\\project.json" ], "isBuildCommand": true, "problemMatcher": "$msCompile" } ] }
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:
{ "version": "0.2.0", "configurations": [ { "name": ".NET Core Launch (web)", "type": "coreclr", "request": "launch", "preLaunchTask": "build", "program": "${workspaceRoot}\\bin\\Debug\\netcoreapp1.0\\Testproject.dll", "args": [], "cwd": "${workspaceRoot}", "stopAtEntry": false, "launchBrowser": { "enabled": true, "args": "${auto-detect-url}", "windows": { "command": "cmd.exe", "args": "/C start ${auto-detect-url}" }, "osx": { "command": "open" }, "linux": { "command": "xdg-open" } }, "env": { "ASPNETCORE_ENVIRONMENT": "Development" }, "sourceFileMap": { "/Views": "${workspaceRoot}/Views" } }, { "name": ".NET Core Attach", "type": "coreclr", "request": "attach", "processId": "${command.pickProcess}" } ] }
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:
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:
FROM microsoft/dotnet:latest COPY . /app WORKDIR /app RUN ["dotnet", "restore"] RUN ["dotnet", "build"] EXPOSE 5000/tcp ENTRYPOINT ["dotnet", "run", "--server.urls", "http://0.0.0.0:5000"]
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:
docker built -t mywebproject .
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:
d:\TFS\GIT\Testproject>docker build -t mywebproject . Sending build context to Docker daemon 4.928 MB Step 1 : FROM microsoft/dotnet:latest latest: Pulling from microsoft/dotnet 357ea8c3d80b: Pull complete 52befadefd24: Pull complete 3c0732d5313c: Pull complete 182cb80041a7: Pull complete a49b25f72e2d: Pull complete 46be245fa43f: Pull complete Digest: sha256:833227fde31ebc668c8c4ea1db89a29231b7a396a977723511e61776166a196b Status: Downloaded newer image for microsoft/dotnet:latest ---> b5be6fbf2a31 Step 2 : COPY . /app ---> 7eaf7ee2c689 Removing intermediate container 2d9d3e356712 Step 3 : WORKDIR /app ---> Running in 203d2b1d8660 ---> 33cffdbfd937 Removing intermediate container 203d2b1d8660 Step 4 : RUN dotnet restore ---> Running in dcaaa1a9bd4e log : Restoring packages for /app/project.json... log : Installing NuGet.Configuration 3.5.0-beta2-1484. log : Installing NuGet.Protocol.Core.Types 3.5.0-beta2-1484. log : Installing NuGet.Protocol.Core.v3 3.5.0-beta2-1484. log : Installing NuGet.Repositories 3.5.0-beta2-1484. log : Installing NuGet.LibraryModel 3.5.0-beta2-1484. log : Installing NuGet.Packaging.Core.Types 3.5.0-beta2-1484. log : Installing Microsoft.AspNetCore.Cryptography.Internal 1.0.0. log : Installing Microsoft.AspNetCore.DataProtection.Abstractions 1.0.0. log : Installing Microsoft.AspNetCore.Routing.Abstractions 1.0.0. log : Installing Microsoft.DotNet.InternalAbstractions 1.0.0. log : Installing NuGet.DependencyResolver.Core 3.5.0-beta2-1484. log : Installing NuGet.Packaging.Core 3.5.0-beta2-1484. log : Installing NuGet.Common 3.5.0-beta2-1484. log : Installing NuGet.RuntimeModel 3.5.0-beta2-1484. log : Installing Microsoft.AspNetCore.DataProtection 1.0.0. log : Installing Microsoft.AspNetCore.Mvc.Abstractions 1.0.0. log : Installing Microsoft.AspNetCore.Routing 1.0.0. log : Installing Microsoft.Extensions.DependencyModel 1.0.0. log : Installing Microsoft.AspNetCore.Authorization 1.0.0. log : Installing Microsoft.Extensions.Globalization.CultureInfoCache 1.0.0. log : Installing Microsoft.Extensions.Localization.Abstractions 1.0.0. log : Installing System.ComponentModel.Primitives 4.1.0. log : Installing System.Collections.Specialized 4.0.1. log : Installing System.Collections.NonGeneric 4.0.1. log : Installing System.Diagnostics.Contracts 4.0.1. log : Installing System.Net.WebSockets 4.0.0. log : Installing NuGet.ProjectModel 3.5.0-beta2-1484. log : Installing NuGet.Packaging 3.5.0-beta2-1484. log : Installing NuGet.Frameworks 3.5.0-beta2-1484. log : Installing NuGet.Versioning 3.5.0-beta2-1484. log : Installing Microsoft.DotNet.ProjectModel 1.0.0-rc3-003121. log : Installing Microsoft.AspNetCore.Razor 1.0.0. log : Installing Microsoft.AspNetCore.Mvc.Razor.Host 1.0.0. log : Installing Microsoft.Extensions.FileProviders.Composite 1.0.0. log : Installing Microsoft.AspNetCore.Antiforgery 1.0.0. log : Installing Microsoft.AspNetCore.Html.Abstractions 1.0.0. log : Installing Microsoft.AspNetCore.JsonPatch 1.0.0. log : Installing Microsoft.AspNetCore.Cors 1.0.0. log : Installing Microsoft.AspNetCore.Mvc.Core 1.0.0. log : Installing Microsoft.AspNetCore.Localization 1.0.0. log : Installing Microsoft.Extensions.Localization 1.0.0. log : Installing Microsoft.Extensions.Caching.Abstractions 1.0.0. log : Installing System.ComponentModel.TypeConverter 4.1.0. log : Installing Microsoft.Extensions.ObjectPool 1.0.0. log : Installing Microsoft.AspNetCore.Hosting.Server.Abstractions 1.0.0. log : Installing Microsoft.Net.Http.Headers 1.0.0. log : Installing Microsoft.AspNetCore.Http.Features 1.0.0. log : Installing System.Text.Encodings.Web 4.0.0. log : Installing Microsoft.Extensions.FileSystemGlobbing 1.0.0. log : Installing Microsoft.Extensions.Primitives 1.0.0. log : Installing Microsoft.DotNet.Cli.Utils 1.0.0-preview2-003121. log : Installing Microsoft.DotNet.ProjectModel.Loader 1.0.0-preview2-003121. log : Installing Microsoft.AspNetCore.Razor.Runtime 1.0.0. log : Installing Microsoft.Extensions.CommandLineUtils 1.0.0. log : Installing Microsoft.AspNetCore.Mvc.Razor 1.0.0. log : Installing Microsoft.AspNetCore.Mvc.DataAnnotations 1.0.0. log : Installing Microsoft.AspNetCore.Mvc.ViewFeatures 1.0.0. log : Installing Microsoft.AspNetCore.Mvc.Formatters.Json 1.0.0. log : Installing Microsoft.AspNetCore.Mvc.Cors 1.0.0. log : Installing Microsoft.AspNetCore.Mvc.ApiExplorer 1.0.0. log : Installing Microsoft.AspNetCore.Mvc.Localization 1.0.0. log : Installing Microsoft.AspNetCore.Mvc.TagHelpers 1.0.0. log : Installing Microsoft.Extensions.DependencyInjection 1.0.0. log : Installing Microsoft.Extensions.Caching.Memory 1.0.0. log : Installing Microsoft.Extensions.Configuration.Binder 1.0.0. log : Installing Microsoft.AspNetCore.Hosting 1.0.0. log : Installing Microsoft.AspNetCore.Http 1.0.0. log : Installing Microsoft.AspNetCore.HttpOverrides 1.0.0. log : Installing Microsoft.AspNetCore.WebUtilities 1.0.0. log : Installing Microsoft.AspNetCore.Diagnostics.Abstractions 1.0.0. log : Installing Microsoft.Extensions.Options 1.0.0. log : Installing Microsoft.AspNetCore.Hosting.Abstractions 1.0.0. log : Installing Microsoft.AspNetCore.Http.Extensions 1.0.0. log : Installing Microsoft.Extensions.WebEncoders 1.0.0. log : Installing Microsoft.Extensions.FileProviders.Abstractions 1.0.0. log : Installing Microsoft.AspNetCore.Http.Abstractions 1.0.0. log : Installing Microsoft.Extensions.FileProviders.Physical 1.0.0. log : Installing Microsoft.Extensions.PlatformAbstractions 1.0.0. log : Installing Microsoft.Extensions.Configuration.FileExtensions 1.0.0. log : Installing Newtonsoft.Json 9.0.1. log : Installing System.Runtime.Serialization.Primitives 4.1.1. log : Installing Microsoft.Extensions.DependencyInjection.Abstractions 1.0.0. log : Installing Microsoft.Extensions.Configuration.Abstractions 1.0.0. log : Installing Microsoft.Extensions.Logging.Abstractions 1.0.0. log : Installing Microsoft.Extensions.Configuration 1.0.0. log : Installing Microsoft.AspNetCore.Razor.Tools 1.0.0-preview2-final. log : Installing Microsoft.AspNetCore.Mvc 1.0.0. log : Installing Microsoft.Extensions.Options.ConfigurationExtensions 1.0.0. log : Installing Microsoft.AspNetCore.Server.Kestrel 1.0.0. log : Installing Microsoft.AspNetCore.Server.IISIntegration 1.0.0. log : Installing Microsoft.AspNetCore.Diagnostics 1.0.0. log : Installing Microsoft.AspNetCore.StaticFiles 1.0.0. log : Installing Microsoft.VisualStudio.Web.BrowserLink.Loader 14.0.0. log : Installing Microsoft.Extensions.Configuration.Json 1.0.0. log : Installing Microsoft.Extensions.Logging 1.0.0. log : Installing Microsoft.Extensions.Logging.Console 1.0.0. log : Installing Microsoft.Extensions.Logging.Debug 1.0.0. log : Installing Microsoft.Extensions.Configuration.EnvironmentVariables 1.0.0. log : Installing Microsoft.Extensions.Configuration.CommandLine 1.0.0. log : Restoring packages for tool 'BundlerMinifier.Core' in /app/project.json.. . log : Installing NUglify 1.5.0. log : Installing BundlerMinifier.Core 2.0.238. log : Restoring packages for tool 'Microsoft.AspNetCore.Razor.Tools' in /app/pr oject.json... log : Restoring packages for tool 'Microsoft.AspNetCore.Server.IISIntegration.T ools' in /app/project.json... log : Installing Microsoft.AspNetCore.Server.IISIntegration.Tools 1.0.0-preview 2-final. log : Writing lock file to disk. Path: /app/project.lock.json log : /app/project.json log : Restore completed in 20884ms. ---> 59aa0cf668a1 Removing intermediate container dcaaa1a9bd4e Step 5 : RUN dotnet build ---> Running in 0f3d467f8f1f Project app (.NETCoreApp,Version=v1.0) will be compiled because project is not s afe for incremental compilation. Use --build-profile flag for more information. Compiling app for .NETCoreApp,Version=v1.0 Bundling with configuration from /app/bundleconfig.json Processing wwwroot/css/site.min.css Bundled Minified Processing wwwroot/js/site.min.js Compilation succeeded. 0 Warning(s) 0 Error(s) Time elapsed 00:00:02.5616789 (The compilation time can be improved. Run "dotnet build --build-profile" for m ore information) ---> 5ec9a7756b4f Removing intermediate container 0f3d467f8f1f Step 6 : EXPOSE 5000/tcp ---> Running in 541e34a2a6ed ---> 2fc362d58382 Removing intermediate container 541e34a2a6ed Step 7 : ENTRYPOINT dotnet run --server.urls http://0.0.0.0:5000 ---> Running in 667c4a41b0e0 ---> 1828c7fe9c12 Removing intermediate container 667c4a41b0e0 Successfully built 1828c7fe9c12 SECURITY WARNING: You are building a Docker image from Windows against a non-Win dows Docker host. All files and directories added to build context will have '-r wxr-xr-x' permissions. It is recommended to double check and reset permissions f or sensitive files and directories.
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.
docker run -d -p 5000:5000 mywebproject
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.
docker run -d -p 3000:3000 -p 5858:5858 mywebapplication
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“.
from VS Code and ASP.Net Core Developement