Setting up for Dotvvm Development on Linux, MacOS and Windows
What is Dotvvm?
Dotvvm is an open-source web application development framework, for the .Net Framework and Dotnet Core. It allows you to build web applications in either the traditional .Net Framework or the more modern Dotnet Core framework. It is also a member project of the Dotnet Foundation.
Dotvvm Web Applications are built using the Model-View-ViewModel (MVVM) approach, which is a delight for developers used to building mobile apps with this approach as they are already familiar with the patterns and concepts. Dotvvm makes it easy for developers just coming from the MVC way of doing things, or just learning the MVVM model to hit the ground running. Dotvvm also comes with the ability to create single-page applications (SPAs).
Additionally, Dotvvm offers you the ability to modernize your existing web forms projects with little hassle, this will not be the focus of this article, however. Having a sound knowledge of this light, intuitive and easy to learn framework comes in handy when you need to decide what the best direction is to go when building form-based web applications.
Agenda
In this article, we will prepare our development environments on Linux, MacOs and Windows to build and run Dotvvm web applications. This is to serve as a living guide with updates as the process changes.
To confirm that we are properly set up we will create and run the Dotvvm default project. Let’s get started!
Dotvvm on MacOS and Linux
The process for setting up on Mac and Linux (and windows if you intend to develop with vs code and not Visual Studio) is about the same. The only difference is how Dotnet Core is installed on these operating systems.
Dotnet Core on Linux
Dotnet Core is now truly cross-platform and the SDK can be easily installed on most Linux flavors. If you don’t already have it installed, head to https://dotnet.microsoft.com/download/dotnet-core. As of August 24, 2020, the recommended version to install is .Net Core 3.1 as indicated on the page. Click on the version in the SDK Tab and then click on package manager instructions. The preceding page provides installation instructions for all major Linux flavors. Find the one for your flavor and follow the installation steps.
Dotnet Core on MacOS
To install Dotnet core on MacOS head to https://dotnet.microsoft.com/download/dotnet-core and click on the recommended version, in the preceding page find the SDK Tab and download the MacOS x64 installer. Run the installer and follow the prompts.
Installing Dotvvm Templates
Once you have Dotnet installed, we can go ahead and install templates for Dotvvm. Dotnet templates let you create specific application types, for example, we use the command, ‘dotnet new console’ to create a new console app, and ‘dotnet new mvc‘ to create a new mvc app, so to get such commands for Dotvvm apps, we need to install its templates.
To install dotvvm’s templates, run the command ’dotnet new -i DotVVM.Templates::*’ in a terminal and let it finish executing.
Installing Dotvvm VSCode Extension
At this point, open up Visual Studio Code. VS code is the Code Editor with the most support for Dotvvm and is the editor we will be using here. If you do not already have it installed you can download from https://code.visualstudio.com/Download.
In VSCode, click on the extension’s icon and search for ‘DotVVM for Visual Studio Code’, install and close VSCode.
We are now ready to create and run Dotvvm applications.
Create and Run a Dotvvm Application on Linux/MacOS
With Dotnet, Dotvvm templates and extension installed, we are now ready to create and run a Dotvvm web app.
Open up a terminal window and navigate to any folder you want to create the application in, run the command ‘ dotnet new dotvvm -n “FirstDotvvmApp” ’. After execution, navigate into the folder with ‘ cd FirstDotvvmApp ‘, use the command ‘ code . ‘ to open the project in vscode.
After taking a look around (don’t worry if everything isn’t immediately clear, we will explore the default Dotvvm files in a different article), return to the terminal and run the command ‘ dotnet run ‘.
Copy the displayed url and paste in your browser. If you see the text “Hello from Dotvvm!”, congratulations, you’re now ready to develop dotvvm applications.
Dotvvm on Windows
Developers working on the windows operating system have the option of developing Dotvvm applications on Dotnet Core, or the traditional Dotnet framework. The required steps on Windows include installing Dotnet core/.Net Framework and Installing the Dotvvm Templates for Visual Studio.
Dotnet Core on Windows
To install Dotnet Core on windows head to https://dotnet.microsoft.com/download/dotnet-core and click on the recommended version, in the preceding page find the SDK Tab and download either the x64 or x86 installer for your system. Run the installer and follow the prompts.
I expect that most windows users already have the .Net Framework pre-installed, if you do not, and want to develop Dotvvm apps on the .Net Framework instead of Dotnet Core (I do not recommend this), head to https://dotnet.microsoft.com/download/dotnet-framework, download and install the latest Dotnet framework.
Installing Dotvvm Templates
Dotvvm for Visual Studio currently supports Visual Studio 2017 and 2019. If you do not already have Visual Studio installed (not vs code), you can download and install the free community edition from https://visualstudio.microsoft.com/downloads/. Note that if you want to use vs code on windows, refer to the Installing Dotvvm Templates subsection on Linux and MacOS at the beginning of this article.
With Visual Studio 2019 installed, head to the Visual Studio Marketplace at https://marketplace.visualstudio.com/ and search for Dotvvm, download Dotvvm for Visual Studio 2019 and launch when the download completes. If the install completes with no error, the next time you start visual studio you should have Dotvvm on the list of project types.
Create and Run a Dotvvm Application on Windows
The process for creating a Dotvvm application with Visual Studio is no different from creating any other kind of application on Visual Studio.
Open Visual Studio and click on “create a new project”, in the bar that says “search for templates”, type Dotvvm and hit enter, select “Dotvvm Web Application (.Net Core) “ and click next.
You will notice that we can create other kinds of Dotvvm web applications. These versions run on the traditional .Net Framework and are not cross-platform.
Give the project a name on the next screen, hit next.
On the Dotvvm Configuration screen that appears, check “Add Bootstrap 4”, check “Add Authentication and Sample Crud Pages”, then click “create project”.
Hit the run button and interact with the web app in the browser, if it runs without issues then you’re ready to work with dotvvm on windows.
Conclusion
In this article, we have looked at getting setup for developing dotvvm applications on Linux, MacOS and Windows. Though the process is pretty straight forward, please leave me a comment if you encounter any issues and I’ll be happy to help.
Thanks for reading.
