Part 1 :: Start with a hello world application

At first, we need a starting point for our application. You can go to http://start.spring.io to create a starter Project.

Give it a group and artifact name:

spring_initializr_01

Search for Vaadin in the dependencies and add it to your project:

spring_initializr_02

Now you can generate and download your starter project.
It will look like this after unzipping the downloaded file:

spring_initializr_03

Import the project to your IDE. For this demo, we use Eclipse IDE, but you can use whatever you prefer.
By default, the Spring Boot Initializer creates a Maven project, so select Existing Maven Project during import:

eclipse_import_01 eclipse_import_02 eclipse_import_03

Now we have our project imported into the Eclipse IDE:

eclipse_import_04

This is a spring starter framework only, so we don’t have a running hello world application, yet.
To get a running application, we add our first Vaadin class.
Right-click on your project and create a new class.
Give it the name VaadinUI and extend the vaadin class com.vaadin.ui.UI:

vaadinui_01

All Vaadin dependencies are already configured in our maven pom.xml file and the vaadin classes can be used.
We can use the init method to create a label and show our hello world message.
The annotation @Theme(“valo”) tells Vaadin to use the built in theme named valo.
The annotation @SpringUI tells Spring Boot to load this class as an UI.

package net.stephankopp;

import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;

@SpringUI
@Theme("valo")
public class VaadinUI extends UI {

	@Override
	protected void init(VaadinRequest request) {
		Label label = new Label("Hello world!");
		setContent(label);
	}

}

That’s all, now you can start the application. Just right-click on your project and select Run as –> Spring Boot App. The application should start and you can use your browser to take a look at your first Vaadin application: http://localhost:8080

vaadinui_helloworld

Ok, that’s not really impressive! We have an empty application, which has to be filled with some data and functionality. This will be done in part 2