Adding a SvelteJS Front End

Photo by David Rangel on Unsplash

Hopefully you have been following along, and you have built a working ToDo List API, fully database backed, and with a robust unit testing framework in place too. If not, you may want to go back to Part 1.

Let’s finish the whole thing off with a front end to make it a complete application.

Just like I didn’t try to explain the background of Quarkus, I am not going to explain SvelteJS either. If you want to read about it, just head over to svelte.dev to read all about it. However, what I like about Svelte is that it…


Adding a Database to Our Backend

Photo by Fatos Bytyqi on Unsplash

Now that we have completed the first part of our application, we will now update it to replace our ArrayList data source with a database. If you haven’t read part 1, go back and read that first, as this section may not make as much sense!

First up, let’s update our POM.xml file to bring in the new dependencies that we are going to need.

<dependency>
<groupId>io.quarkus</groupId>
<artifactId>quarkus-jdbc-h2</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>io.quarkus</groupId>
<artifactId>quarkus-test-h2</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>io.quarkus</groupId>
<artifactId>quarkus-flyway</artifactId>
</dependency>
<dependency>
<groupId>io.quarkus</groupId>
<artifactId>quarkus-agroal</artifactId>
</dependency>
<dependency>
<groupId>io.quarkus</groupId>
<artifactId>quarkus-jdbc-postgresql</artifactId>
</dependency>
<dependency>
<groupId>com.github.seratch</groupId>
<artifactId>kotliquery</artifactId>
<version>1.1.3</version>
</dependency>…


The Quarkus Backend

Photo by Émile Perron on Unsplash

This will be a 3 part series demonstrating how to build a Quarkus application, using Kotlin. In part 3, we will put a front end on to our application, which will be written in SvelteJS.

This blog series will be broken down into the following sections.

  1. Setting up and building a basic ToDo List application (no database) with tests.
  2. Add a database (postgres), and in memory test DB (H2), db migrations (flyway)
  3. Add a front end using SvelteJS

I am going to assume you already know what Quarkus is. If you don’t, head over to the Quarkus.io homepage and have…


Build and run with a simple Dockerfile

Just jump to the Dockerfile code, the comments hopefully make it self explanatory. It is a multi-stage Dockerfile that builds using a Maven Image and then runs using a Java image.

I have been developing with Kotlin for a while now, but these have all been for personal projects. I decided it was time I learned how to use Docker, especially as I am getting more and more into Google Cloud and want to explore using Kubernetes Engine. …


Exploring GAE and GCE to deploy my Kotlin App.

Context

Before I jump in to the short journey I went through in selecting the right GCP product for my Kotlin app, I should explain a little about my use case, so that you can understand whether my experience matches your own. I am a firm believer that in technology, software especially, there is no one size fits all, so I don’t want to direct you to a particular route if it doesn’t fit with your needs.

To explain then. I have hosted a small Chrome extension that collects a small amount…


Using Kotlin to do websockets the SpringBoot way

For my latest Blog post, I have decided to continue the Kotlin theme, and this time explore SpringBoot further by revisiting the WebSocket Chat Application example that I started with many months, but converting it from SparkJava to SpringBoot. Whilst I personally find SparkJava very expressive and simple to use, Spring as a community has a very strong following, but I have found very little information on Kotlin and Websockets using Spring. This post is an attempt to rectify that.

First off, I should point out that there are two methods of implementing WebSockets in SpringBoot. This first, and the…


Using SpringBoot instead of SparkJava for the Web Framework

A few weeks back, I wrote a two-part series on creating a Web App using Kotlin. For it, I decided to use SparkJava to serve the REST endpoints, and VueJS for the front end. One of the main questions I have had since is, why SparkJava and not SpringBoot? Well, I believe it is a matter of preference, but both a valid and capable options…but for completeness, I decided to write a quick implementation using SpringBoot.

I am not going to go back over, the concepts that were covered in Part 1, or Part 2, you can welcome to click…


Creating REST services using SparkJava / Kotlin and Single Page App using VueJS

In part 1 we created the REST backend for our TodoList App. Now, in part 2, we will complete the app by creating the VueJS front end.

Most of the setup is already done; we have our server via SparkJava, and we have created the /public folder and specified in SparkJava that is where our static resources are loaded from, all we have to do now is create an HTML file. So let’s go ahead and create an index.html file in /src/main/resources/public.

Most of this is standard HTML, the things of note are:

  1. Line 6/7: Here we are loading…


Creating REST services using SparkJava / Kotlin and Single Page App using VueJS

Not so long ago, I wrote a piece on creating a Websocket chat implementation using Kotlin and SparkJava. This was fun, and helped show the power of Kotlin in web development, but didn’t really hammer home why web development in Kotlin is a good thing. With so much being written and spoken about Kotlin in the Android world, I wanted to try to address the balance somewhat and put a little more weight onto the web dev argument for using Kotlin.

The following blog post will be split into two parts. Part 1 (this post) will be the REST backend…


Video Tutorial Showing the Creation of this Chat Application

I have been using Kotlin for a little while now, but in a small way. I have been flitting between Java, Scala and Kotlin for a few years, but with the announcement from Google of now officially supporting Kotlin for Android, I decided to jump back in again.
My typical use case when exploring new languages is a web application that I have been building on and off for a few years, which is essentially a Single Page App (JavaScript, usually Angular) on the front end, and a REST back end that…

Wayne Ellis

Software Architect; Author of Introducing the Play Framework; Technologist.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store