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

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:

https://github.com/r3adm3/monolithsvc and https://github.com/r3adm3/multiservice

The continuous integration pipelines are here :

https://techfrontier.visualstudio.com/dockerOrchestrationExperiment/_build?definitionId=22

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
{ 
   [Route("api/[controller]")]
   [ApiController]
   public class addController : ControllerBase
   {
       // GET api/values
       [HttpGet]
       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

<table>
<tbody>
<tr>
<td>First no:</td>
<td><input id="a" type="text" /></td>
</tr>
<tr>
<td>Second no:</td>
<td><input id="b" type="text" /></td>
</tr>
</tbody>
</table>
<button>Add</button> <button>Minus</button> <button>Multiply</button>
<div id="result"></div>
 
@ViewBag.myFirstValue

<script>
    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();
        req.open('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!');
            }
        }

        req.send();

        }

      

</script>

…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. http://www.techfrontier.co.uk/2019/03/02/building-up-some-microservices-breaking-up-the-monolith-2-dockerising-the-monolith/

Share this: