Adding Git to Visual Studio Code ASP .NET MVC Project

This post shows you how to start version controlling (via Git) your ASP .NET project created using dotnet new. Read my previous post on how to create an MVC Project using Visual Studio Code first. Recall that I mentioned Git as a recommended pre-requisite.

If you go to the Source Control Tab (Ctrl + Shift + G) you will see that it says there are no active source control providers

Click the Initialize Repository button on the toolbar.

From the dialog that pops up, again click on Initialize Repository with your project folder currently open in it.

You will see a lot of changes being shown in Git. This is because we do not have a .gitignore file yet which ignores a lot of files & directories which are either compiled binaries, minified versions of scripts or downloaded packages from bower.

Let us create a .gitignore file in the root directory.

Now add the following lines to it:-

# Build results
bin
obj
 
# Bower libraries
wwwroot/lib
 
# Minified Scripts
*.min.js
*.min.css

Now you will see that the list of pending changes has gone down considerably.

Commit these files now with the message Initial Commit

You will be asked for a confirmation whether you want to stage all files and commit them. I prefer hitting Always because most of the times I am making small atomic changes and committing everything. If not, I am quite mindful of the files I need to commit and stage them first. So, this extra confirmation dialog is just an annoyance.

When I do this, I get an error that says:-

*** Please tell me who you are.
 
Run
 
  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"
 
to set your account's default identity.
Omit --global to set the identity only in this repository.
 
fatal: unable to auto-detect email address (got 'Administrator@EC2AMAZ-0IJRVME.(none)')

This is pretty self descriptive. Since this is a brand new Virtual Machine on AWS, I have’t configured my Git identity yet. So, I’ll go back to the Terminal and run the following:-

git config --global user.email "partho@maxotek.com"

Yeah, I put my real email address there. Go ahead, all you spam bots, send me some spam. Nobody emails me anyways. Or maybe, I am just giving Gmail more sample data to improve their SPAM filters!!!

git config --global user.name "Partho Sarathi"

Now, when I hit the commit button. All my changes are committed to Git.

Creating ASP. NET Core MVC Project Using Visual Studio Code

This post shows you how to get started with an MVC project using Visual Studio Code – the lightweight IDE by Microsoft.

Pre-requisites

Steps

  1. Open Visual Studio Code

    I am doing this on a brand new Virtual Machine on AWS. The only thing that it has installed on it is Chrome (apart from the Windows Server 2016 defaults ).

    So, as you can see VS Code is asking me to install Git for version control. It is not required, but I highly recommend that you install and use it for all your projects.

    Once, I have Git installed, re-opening VS Code looks like this

  2. VS Code has a Terminal built in. Open it by clicking on the Terminal tab at the bottom. Alternatively you could use the shortcut Ctrl + `

  3. Create a new directory for your project.

    mkdir hello-world-project

  4. Change to the newly created project directory

    cd hello-world-project

  5. Create a new .NET Core project of type mvc

    dotnet new mvc

    You should get an output like this:-

        PS C:\Users\Administrator\hello-world-project> dotnet new mvc
     
        Welcome to .NET Core!
        ---------------------
        Learn more about .NET Core @ https://aka.ms/dotnet-docs. Use dotnet --help to see available commands or go to https://aka.ms/dotnet-cli-docs.
     
        Telemetry
        --------------
        The .NET Core tools collect usage data in order to improve your experience. The data is anonymous and does not include command-line arguments. The data is collected by Microsoft and shared with the community.
        You can opt out of telemetry by setting a DOTNET_CLI_TELEMETRY_OPTOUT environment variable to 1 using your favorite shell.
        You can read more about .NET Core tools telemetry @ https://aka.ms/dotnet-cli-telemetry.
        Getting ready...
        The template "ASP.NET Core Web App (Model-View-Controller)" was created successfully.
        This template contains technologies from parties other than Microsoft, see https://aka.ms/template-3pn for details.
     
        Processing post-creation actions...
        Running 'dotnet restore' on C:\Users\Administrator\hello-world-project\hello-world-project.csproj...
            Restoring packages for C:\Users\Administrator\hello-world-project\hello-world-project.csproj...
            Generating MSBuild file C:\Users\Administrator\hello-world-project\obj\hello-world-project.csproj.nuget.g.props.
            Generating MSBuild file C:\Users\Administrator\hello-world-project\obj\hello-world-project.csproj.nuget.g.targets.
            Restore completed in 7.85 sec for C:\Users\Administrator\hello-world-project\hello-world-project.csproj.
            Restoring packages for C:\Users\Administrator\hello-world-project\hello-world-project.csproj...
            Restore completed in 1.36 sec for C:\Users\Administrator\hello-world-project\hello-world-project.csproj.
     
        Restore succeeded.

    If you get the following error then you don’t have .NET Core SDK installed. Install it from here. Make sure you restart VS Code after installing it because the changes to path settings will only apply on re-launch of VS Code.

    dotnet : The term 'dotnet' is not recognized as the name of a cmdlet, function, script file, or operable program.
  6. Now you can open this project folder using the Open Folder menu

    Alternatively, you can type code . from the terminal which will open up a new Visual Studio Code Window with the project directory. After this, close the previous VS Code window.

  7. Part of the reason why VSCode is so light is that support for various features have been moved into extensions. In order to support C# projects you will need to install the C# extension for VSCode.

    Opening up any C# code file, will automatically show this suggestion if you do not have the plugin installed.

    Alternatively, you can go to the Extensions Tab (Ctrl + Shift + X) and search for C# and from there install the one from Microsoft

    You will see it being Installed briefly.

    Then hit the Reload button to restart VS Code with the extension enabled.

    VS Code will automatically install C# dependencies such as: OmniSharp & .NET Core Debugger.

    After this you will get another warning that says that the required assets to build & debug this project are missing.

    If I don’t install it and hit F5, VS Code asks me to select the environment to start debugging with.

    So, when you install the missing assets, VS Code creates a .vscode directory with two files – launch.json & tasks.json which allow you to run/debug your project.

    Now, Hit F5 to start debugging your ASP .NET Core application.

    In the Terminal you will get an output like this:-

        > Executing task: C:\Program Files\dotnet\dotnet.exe build C:\Users\Administrator\hello-world-project/hello-world-project.csproj >
     
    Microsoft (R) Build Engine version 15.5.180.51428 for .NET Core
    Copyright (C) Microsoft Corporation. All rights reserved.
     
        Restore completed in 1.51 sec for C:\Users\Administrator\hello-world-project\hello-world-project.csproj.
        Restore completed in 368.92 ms for C:\Users\Administrator\hello-world-project\hello-world-project.csproj.
        hello-world-project -> C:\Users\Administrator\hello-world-project\bin\Debug\netcoreapp2.0\hello-world-project.dll
     
    Build succeeded.
            0 Warning(s)
            0 Error(s)
     
    Time Elapsed 00:00:10.24
     
    Terminal will be reused by tasks, press any key to close it.

    In the Debug Console you will see something like this:-

        info: Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware[2]
      Sending file. Request path: '/favicon.ico'. Physical path: 'C:\Users\Administrator\hello-world-project\wwwroot\favicon.ico'
    Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware:Information: Sending file. Request path: '/favicon.ico'. Physical path: 'C:\Users\Administrator\hello-world-project\wwwroot\favicon.ico'
    info: Microsoft.AspNetCore.Hosting.Internal.WebHost[2]
      Request finished in 10.8591ms 200 image/x-icon
    Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request finished in 10.8591ms 200 image/x-icon
    The thread 2408 has exited with code 0 (0x0).
    The thread 1224 has exited with code 0 (0x0).

    In the Threads pane you will see a lot of threads running for your Kestrel web server.

    And finally, your ASP .NET Core MVC Application will run inside the browser:-