Working With ASP.NET Core And DotVVM On Visual Studio Code

Introduction

DotVVM is an open-source framework of ASP.NET that allows us to create web applications using the MVVM design pattern (Model View View-Model) design pattern using C# and HTML.

Do you want to know more about DotVVM? To do this you can check its official website at: www.dotvvm.com.

In this tutorial, we will learn how to work with DotVVM through the Microsoft source code editor: Visual Studio Code. Here are the contents:

DotVVM in the Visual Studio Code environment.
Working with DotVVM in Visual Studio Code.
Working with NuGet packages in Visual Studio Code.
Plus: Deploy DotVVM applications with ASP.NET Core to Azure from Visual Studio Code.

DotVVM in the Visual Studio Code environment

.NET Core SDK 3 to work with ASP.NET Core: https://dotnet.microsoft.com/download/dotnet-core/3.1.
Visual Studio Code: https://code.visualstudio.com/.
DotVVM for Visual Studio Code: https://marketplace.visualstudio.com/items?itemName=TomasHerceg.dotvvm-vscode

For the deployment of web applications with DotVVM, we will also need the following extension:

Azure App Service: https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azureappservice.

In addition, we can also add the extension of C-for features such as IntelliSense (autocomplete function), among others:

C#: https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp.

Working with DotVVM in Visual Studio Code

When working with Visual Studio Code we will always use commands to perform a particular action. To create a new terminal, we go to the main menu and create a new one.

DotVVM is a working environment that works on ASP.NET Core, so the base command will be dotnet.

For our purposes, we will use the dotnet command to create web applications with DotVVM, run the applications, and generate the files needed to deploy them to Azure.

The starting command is one that allows us to get information about all the operations we can perform with .NET: dotnet --info.

Create a new ASP.NET Core app with DotVVM

When we installed the .NET Core SDK, we received a variety of built-in templates for creating projects and files, including console applications, class libraries, unit test projects, ASP.NET Core applications (including Angular and React projects), and configuration files. To list the built-in templates that we have available, we can run the dotnet new command with the --list option. The results are as follows:

In order to create applications of type DotVVM we must add the respective template, for this, we can run the following command:

dotnet new --install DotVVM.Templates::*

By running the dotnet new -- list command again, we can verify that the DotVVM template has been added correctly.

With this, what remains is to create a new project through the command,

dotnet new dotvvm

This process will take a few seconds.

Upon completion, the files of the new DotVVM project will be created.

Run a DotVVM project in Visual Studio Code

Now that we have created the project, the first thing we can do as the first activity is to run the project. To do this we use the following command:

dotnet run

As the first time building and running the project, this process can take a while. The next time, the time will be less, depending on the dimensions and components that are used in the project. When the complication process is finished, we will have the paths available to view the web application.

Result

Working with NuGet Packages in Visual Studio Code

When working on developing web applications, we will often need to add reusable code units, known as NuGet packages. These are for the implementation of some specific functionality.

Let's see an example. As developers of web solutions, we need to implement a website for student management, in which the aforementioned students can be added, modified, and deleted, in other words, perform CRUD operations (Create, Read, Update, and Delete) about a student's entity.

To meet the objectives of the sample, you need to install the following NuGet packages in order to work with the database and with the development of the respective services:

Microsoft.EntityFrameworkCore
Microsoft.EntityFrameworkCore.SqlServer

To manage NuGet packages from our DotVVM project, you need to use the dotnet commands (CLI).

To add a NuGet package, we will use the following command:

dotnet add package <PACKAGE_NAME>

Or the following command in case we want to specify the version as well:

dotnet add package <PACKAGE_NAME> -v <VERSION>

To list the NuGet packages associated with the project, you must use the following command:

dotnet list package

The result when listing the NuGet packages associated with the project in DotVVM is this:

The dotnet run execution of this case study is as follows:

The source code for this example can be found in the following repository on GitHub: DotVVM Sample CRUD.

Plus: Deploy DotVVM apps with ASP.NET Core to Azure from Visual Studio Code

As an additional addition to this article, we'll learn how to deploy a DotVVM project with ASP.NET Core in Visual Studio Code. To do this, you need to have the plug-in initially mentioned installed: Azure App Service for Visual Studio Code.

When you install the Azure extension, we will be asked to identify ourselves with our Azure account.

As the first step in deployment, you need to prepare the necessary files for this process. To do this, we use the following command:

dotnet publish

The result is as follows:

In this case, the command line tells us where these files were created, in this case in: \bin\Debug\netcoreapp3.0\publish\.

What we have left for doing is to go to the Publish folder, right-click, and select the option: Deploy to Web App.

Then a small pop-up box will be presented in which we will be asked to specify the App Service resource to deploy the application.

Once the deployment to Azure is complete, a pop-up message in Visual Studio Code will tell us that the process is over and that we can view the published web page.

In this case, the result of this post is similar to the student system example mentioned above, but already in Azure:

What's next?

With what we learned in this article, we can now work with web application development with the DotVVM work environment with ASP.NET Core in Visual Studio Code. Below are some additional resources that may be useful.

If you have any concerns, do not hesitate to write to me.

See you on Twitter!! :)