Containerize a Dotvvm Web Application and a MySql Database with Docker Compose
Introduction
Containerization has changed the way web developers deploy applications across many stacks, and no less so in the dotnet world.
Some benefits of containerization are listed below:
- Applications run on identical environments both during development and in production.
- Maximize resources by running multiple identical versions of applications.
- Maximize resources by running different applications on the same server all isolated into their virtual (container) environment.
In this article, we take a look at dockerizing a web application built with DOTVVM, a modern MVVM web application development framework.
Prerequisites
We assume familiarity with the following concepts/technologies:
- Docker/Docker Compose
- YAML
Depending on your operating system, install Docker Desktop for Windows/Mac or Docker for Linux. Run the command docker -v in either Powershell or Terminal. Output in the form of Docker version 19.03.8, build afacb8b confirms that docker is ready for use.
Demo Project
Clone the Demo project from Github and open the root folder in Visual Studio Code. The “start” branch contains the starter blazing pizza DOTVVM client and server applications.
Docker Images
Docker images specify what a container contains and how it behaves. The relationship between a container image and containers is much like that between a class and objects; multiple objects can be created from one class definition.
In the same way, we create a single container image and spin up multiple instances of our container from it.
Adding a Dockerfile for each Project
There are two projects in the cloned solution; the API project or Server — a simple asp.net core 3.0 web API, and the SPA front end built with DOTVVM. We will create two dockerfiles, one for each. Follow the steps below to do this.
- In the src folder, add a new file named server.dockerfile. This file created the docker image for the server project.
- Add the yaml snippet below to the file
- Next, add another file named app.dockerfile in the src folder. This dockerfile will be for the DOTVVM project, add the yaml snippet below
Making the Applications Accessible in the Docker Container
Because of how networking works in a docker container, we need to make a small modification to our projects so we can access them from the browser.
Open up the program.cs file in the BlazingPizza.App folder and modify the BuildWebHost method to look like below
Note that we have added a UserUrls and UseKestrel Registration. This prompts the application to listen for requests on that port.
Open up the Program.cs file in the BlazingPizza.Server project and modify the BuildWebHost method as shown below.
Adding a Docker Compose File
We now add a docker-compose file which bootstraps our services, and a database.
Add a file name docker-compose.yml file to the src folder and add the code snippet below to it.
This docker-compose file defines our services and a MySQL database. We now need to connect our services together.
Connecting the Services
Currently, we need a connection string to the MySql Database in the Server project and an HTTP endpoint from app to the server. Since we are using docker-compose and these services are part of the same network and we can refer to them using the container name specified in docker-compose.yml
Open the Startup.cs file in BlazingPizza.App project and change the BaseAdress for the HttpClient from http://localhost:64590/ to http://server:64590/
Open the appsettings.json file in BlazingPizza.Server and modify it to look like below
Note the connection strings property and how the server is the name of the MySQL container.
Testing/Running it all
Open up a terminal/Powershell session and navigate to the src folder. run the command docker-compose up -d
After downloads are completed and all containers are started, navigate to localhost:8080 and you should see the beautiful blazing pizza website. Order a pizza!
Conclusion
In this article, we have seen how to containerize a DOTVVM application, connect multiple services using docker networking and use a MySql database.
To learn more about DOTVVM head to https://www.dotvvm.com/
