17 September 2016

Vue.js and Spring Boot - A Perfect Combination

Last week while working for my client I had the problem that after a deployment not all services were running. We don't have a monitoring in place because the system isn't in production right now. So what to do?

After looking at several monitoring tools I came to the conclusion that there is no easy to use health check tool out there. So I decided to implement a small health checker by myself.

I call it Simon (funny name, isn't it :-). Simon stands for  SImpleMONitoring. I know it's more a health checker and not a fully featured monitoring tool but for the sake of the name...
Btw. you can find the source code on GitHub.

The backend

I wanted to create a few REST services and some persistence to store the monitoring data.

First I started with Spark Framework but this wasn't the right tool. It may be great for fast and small stuff but there is missing to much. So I move to Spring Boot.

As a Java EE consultant and trainer it took some effort but I realized that Spring Boot is a fantastic framework with so many convenient features.

What I really like is the default behavior.
For example JPA. No data source configuration, no persistence.xml. Just add entities and define your JDBC url and Spring Boot know where to store the data. That's it.

spring.datasource.url=jdbc:derby:/var/simon/simondb;create=true

The other thing that is great is the Spring Boot Actuator.
It has everything you need to monitor your application in production and you can hook in you own health check.

But the most surprising feature that I found is the ability to generate an executable JAR that can be run as a Linux service.

By simply adding some configuration to the Spring Boot Maven plugin you get a jar that contains the bash script and all the Java class:

<plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
    <configuration>
        <executable>true</executable>
    </configuration>
</plugin>

Simply put the jar on the Linux box and create a symbolic link in init.d and you are done!

Now after having my REST services up and running Simon needs a frontend.

The Frontend

On the start page you see all the servers Simon is checking.


There is also a detail page showing the last results in a graph


So how to create such an UI?
I was used to develop web applications with JSF. The good thing about JSF is the great IDE support because of the backing bean.
But the days of component based web frameworks are over. These days fully featured JavaScript frameworks Angular and ReactJS are used to create single page applications (SPA). 

But do I really need that?
I first had a look at Angular2 and was overwhelmed by the features. 

I'm a quite experienced HTML developer and like to write the HTML code by my self. And for only two pages I didn't want all the build stuff like npm, bower, gulp, webpack etc. I just wanted to embed my UI into the Spring Boot application.

After some googleing I found Vue.js. It promises "Reactive Components for Modern Web Interfaces". Vue.js represents the view model and does exactly what I need. 

I used data binding in the HTML page. To create a table row it looks the HTML looks like this:


<tr v-for="host in group.host" class="{{host.status == '200' ? 'success' : 'danger'}}">
  <td width="200">{{host.name}}</td>
  <td width="300"><a href="{{host.url}}">{{host.url}}</a></td>
  <td width="100">{{host.status}}</td>
  <td width="100"><a href="detail.html?url={{host.url}}">{{host.duration}} ms</a></td>
  <td width="200">{{host.timestamp}}</td>
</tr>

There is the mustache syntax and also some directives starting with v-.

But where comes the data from? you have to create an instance of Vue and add data and functions.
That's it!
Vue.js also have some plugins where I used vue resources to get an easy to use http client.


(function (exports) {
    exports.app = new Vue({
        el: '#content',
        data: {
            hosts: null,
            dataReady: false,
            interval: null,
            autoRefresh: false,
            lastRefresh: null
        },
        ready: function () {
            this.fetchData();
        },
        methods: {
            fetchData: function () {
                var vm = this;
                this.$http.get('check/latest').then(function (response) {
                    vm.hosts = response.body;
                    vm.lastRefresh = formatTimestamp(new Date());
                    vm.dataReady = true;
                }, function (response) {
                    console.log(response.status);
                });
            },
            switchAutoRefresh: function () {
                this.autoRefresh = !this.autoRefresh;

                if (this.autoRefresh) {
                    var vm = this;
                    this.interval = setInterval(function () {
                        vm.fetchData();
                    }, 10000);
                } else {
                    clearInterval(interval);
                }
            }
        }
    });
})(window);

Conclusion

Spring Boot and Vue.js are both fantastic frameworks with really good documentation.
The startup was really fast and I'm very happy with the solution so far.

With Spring Boot it's very easy to create fully featured self contained applications.
Self contained means that they don't need to be deployed in a application server. So they are easier to install and with the executable jar I even don't need any additional startup scripts on a Linux box.

Vue.js brought the missing dynamic stuff to my HTML pages. It is straight forward to use and because of the minimal dependencies you can just add one or two JavaScript files to your application.

19 Januar 2016

How to Send Mails in ASP .NET 5 on Azure

Unfortunately neither SendGrid nor System.Net.Mail is supported in the actual version of ASP .NET 5 (RC).

So how to send mails then?
One solution is to use MailKit https://github.com/jstedfast/MailKit

To use MailKit just add "MailKit": "1.3.0-beta5" to your project.json

What you need is an SMTP server. On Azure you can create a SendGrid account and use the host name and the credentials provided in the Configurations section. SendGrid on Azure is free for up to 25'000 mails per month!

The code to send a mail is straight forward.

private void SendEmail()
{
  var message = new MimeMessage();
  message.From.Add(new MailboxAddress("Peter Muster", "peter@muster.ch"));
  message.To.Add(new MailboxAddress("Petra Muster", "petra@muster.ch"));
  message.Subject = "Some Subject";

  message.Body = new TextPart("plain")
  {
    Text = string.Format(@"Hello,

Just a little message for you"
  };

  using (var client = new SmtpClient())
  {
    client.Connect("smtp.sendgrid.net", 587, false);
    client.AuthenticationMechanisms.Remove("XOAUTH2");
    client.Authenticate("your_id@azure.com", "password");

    client.Send(message);
    client.Disconnect(true);
  }
}


18 Januar 2016

Logging in ASP .NET 5 on Azure

Currently ASP .NET 5 is not able to log on Azure.

Fortunately there is a workaround described here https://github.com/aspnet/Home/issues/773

The trick is to use Serilog an open source logging framework for the .NET platform.

12 Januar 2016

ASP .NET 5 Continuous Deployment from Visual Studio Online to Azure

ASP .NET 5 uses DNX and the standard build in Visual Studio Code does not work.

You have to create your on build as describe in this article:
https://msdn.microsoft.com/Library/vs/alm/Build/azure/deploy-aspnet5

But in the tutorial there is missing one important step:
In the Visual Studio Build Step you have to uncheck "Restore NuGet Packages"

Without this you will get

##[error]Error parsing solution file at C:\a\1\s\src\simashr\simashr.xproj: Exception has been thrown by the target of an invocation.
##[error]Unexpected exit code 1 returned from tool NuGet.exe