Collaboration Not Competition

How to develop an ASP.Net Core MVC app using Visual Studio Code

July 17, 2020

The IDE I have used for a long time is Visual Studio. When starting implementation of a new project the first thing I will do is fire up Visual Studio and start creating the solution structure that is required. Visual Studio Code has been around a few years now and is growing in popularity for a wide range of technology stacks, not just .Net. As I am now using Visual Studio Code for other development I wanted to see how easy or difficult it would be to also do my .Net MVC development in Visual Studio Code.

Initial Setup

  1. Install Visual Studio Code - https://code.visualstudio.com/download
  2. Install extensions for C# - search for C# in the extensions marketplace and install C# for Visual Studio Code (powered by OmniSharp)
  3. Open a Terminal window in VS Code and use cd and mkdir to create a new folder
  4. Add a solution file to the folder - dotnet new sln
  5. Create an MVC project using dotnet new mvc -n mvc-web-app
  6. Add the project to the solution - dotnet sln add [path to .csproj]
  7. Open the solution folder in VS Code and open a file - when prompted to add build files click yes. This adds a .vscode folder to solution and creates launch.json and tasks.json files.

We now have an MVC application that we can run and debug. Use the Run menu to Start Debugging - this will build the project, launch a debugger and display the MVC site in a browser.

Source Control

Next up we are going to add the solution to source control.

  1. Select the Source Control menu in the left hand navigation and select the initialize repository option. This will create a local Git repository for your files. Before you commit it go and find any files you want to exclude from source control such as appsettings.Development.json. Right click the file and select Add to .gitignore.
  2. Recommended gitignore - https://github.com/github/gitignore/blob/master/VisualStudio.gitignore
  3. Commit the files with an initial commit

So far we have created a local repository and committed the files but ideally we want to sync the files to a remote repository. VS Code has good support for Azure DevOps and GitHub so go and create a repository and grab the clone url.

  1. From the Source Control menu in VS Code select the Push To… option. You will be told that the repository has no remotes configured. Click Add Remote and paste in the clone url. You will then be prompted for a remote name - provide a suitable branch name. Select Push To… again and select the remote you have just configured. If the branch already exists in the remote repository you will see an error which is most easily fixed by deleting the branch and pushing again. When creating a new repository in Azure DevOps a default branch is automatically created which only contains a readme. You could pull this branch first and then push, that will work as well.

Next we will want to add some other projects to the solution. Typically I create a services project for business logic and a tests project for unit tests.

Services

  1. From the solution folder add a class library using - dotnet new classlib -n Services
  2. Add the Services project to the solution - dotnet sln add Services\Services.csproj
  3. Add a reference to the Services library to the MVC application - dotnet add app/app.csproj reference lib/lib.csproj

It is then possible to create interfaces and services and hook them up using dependency injection in the usual way.

Unit Testing

  1. From the solution folder add an xUnit test project - dotnet new xunit -n UnitTests
  2. Add the Test project to the solution - dotnet sln add UnitTests\UnitTests.csproj
  3. Add a reference to the Services project - dotnet add UnitTests\UnitTests.csproj reference Services\Services.csproj
  4. Write an xUnit test that tests a service call
  5. Run the test by using dotnet test in a terminal window

Azure Functions

There is an Azure Functions extension that makes it really easy to create a new Azure Functions project and add Functions to it. Search for Azure Functions in the extensions marketplace and install it. You will then see an Aure symbol appear in the left hand navigation, click this and then select the Create New Project button to be prompted to select a folder, name the project and setup the first function.

The first time you run the function locally you will be prompted to install the azure-functions-core-tools. Agree to this and follow the prompts. You may then still get an error when trying to run the function locally - this can be fixed by running a PS script workaround see - https://github.com/Azure/azure-functions-core-tools/issues/1821

Other things to note

  • ctrl - shift - b works as a shortcut to dotnet build
  • Install the Nuget Package Manager to add Nuget Packages to projects.
  • ctrl - shift - p opens the Command Palette which provides access to lots of commands depending on which extensions you have installed.
  • Tips and tricks - https://code.visualstudio.com/docs/getstarted/tips-and-tricks

Conclusion

Whilst Visual Studio provides some nice GUI assistance in adding projects to solutions and adding references between projects, having to learn the .Net Core CLI commands has enhanced my understanding of the structure of solution and project files. I haven’t yet found anything in my web and Azure based workflow that VS Code can’t handle. I tried out a couple of the visual test extensions but actually found that I prefered the basic dotnet test command which runs fast and doesn’t require any extensions to be installed. In conclusion, I am going to step out from the comfort of the familiarity of Visual Studio and embrace VS Code as my primary IDE.