Building up some Microservices, Breaking up the Monolith #1 – First a Monolith Webapp

By | 2 March, 2019

This is a new series I’ve decided to write, which covers the current experiment I’m running with .NET Core 2.1, Azure DevOps, Docker and eventually Kubernetes.

I want to demonstrate how we break up a simplified example of a monolithic application containing self hosted WebAPI services into a number of microservices.

Code is hosted here: and

The continuous integration pipelines are here :

Episode 1 then. Lets make a monolith.

Make sure on your chosen platform of choice you’ve got .NET Core SDK v2.1 installed.

Create a folder called monolithsvc and cd into it and then type:

dotnet new mvc

This creates a boilerplate application ASP.NET Core MVC application. You can run it any time by doing:

dotnet run

By default the application will listen on port 5000. You should see something like this:







I’m not going to explain too much about Model-View-Controllers or WebAPI….but what we will do is create a number of controllers which will do some simple maths which we’ll change the front page to call into.

In the controllers folder create a new file called addController.cs, here’s the contents of mine:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using monolithsvc.Models;

namespace monolithsvc.Controllers
   public class addController : ControllerBase
       // GET api/values
       public ActionResult Get(int a, int b)
           return (a+b);

We can test this controller by launching the app with another “dotnet run” and then going to http://localhost:5000/api/add?a=2&b3

Now that’s the controller created, we need something to consume it. We’ll change the front page that has a form to collect two numbers and then use javascript to fetch the result from the controller.

Go in to Views > Home > Index.cshtml


<td>First no:</td>
<td><input id="a" type="text" /></td>
<td>Second no:</td>
<td><input id="b" type="text" /></td>
<button>Add</button> <button>Minus</button> <button>Multiply</button>
<div id="result"></div>

    function operationFunction(op) {

        var aNumber = document.getElementById("a").value
        var bNumber = document.getElementById("b").value

        if(op==='add'){var svcLink='api/add?'}
        if(op==='minus'){var svcLink='api/minus?'}
        if(op==='multiply'){var svcLink='api/multiply?'}
        var req = new XMLHttpRequest();'GET', svcLink + 'a=' + aNumber + '&b=' +bNumber , true);

        req.onload = function () {
            if (req.status >= 200 && req.status < 400) {
                console.log ('result ' + req.responseText);
                var result = req.responseText;
                document.getElementById("result").innerHTML = "Result " + result;
            } else {
                alert('Oh dear!');





…again we retest

I created controllers for taking away, adding and multiplying.

If you want to see the complete code at this stage it’s here

Next article we’ll talk about dockerising this application.