In this tutorial, you'll learn to build a full-stack web application in Java. We’ll cover the entire Java web application development process, from setup to deployment. Each chapter includes a step-by-step video guide to help you learn hands-on. You can find the source code for each chapter in GitHub.

The guide is specifically designed as a practical introduction to modern web application development using Java. It focuses on real-world developer needs, without diving too deeply into theory or academics.

At the end, you will have developed a customer relationship management (CRM) system for managing contacts.

Vaadin-CRMThe application features:

  • A login screen to restrict access.
  • A responsive layout with side navigation that works on desktop and mobile.
  • A database for persistent data storage.
  • A list view that can be sorted and filtered.
  • A form to edit and add contacts.
  • A dashboard view with charts.
  • Cloud deployment to AWS.
  • User installation to desktop and mobile.

Try the completed app here.

Table of contents

Each chapter is a stand-alone tutorial that you can replicate at your own pace. The code for each chapter is available in GitHub as a separate branch. In addition, the individual chapters include links to download the code both before and after the changes in the chapter, so you can easily get your project working again if something does go wrong. You can also use the links as checkpoints to start at any chapter.

Pro tip

If you already have a Java development environment and IDE set up, feel free to skip to Chapter 2: Importing, running, and debugging Maven projects in IntelliJ to begin the practical portion of this guide.

What are progressive web apps and why should you build them?

As mobile has become the primary way people use the web, it is increasingly important for organizations and businesses to offer their users an exceptional mobile experience. Previously, this often meant building and maintaining native mobile applications for multiple platforms such as iOS and Android, not to mention also supporting desktop platforms such as Windows or macOS.

While businesses could simplify their workload by building a web application, this often came with poor performance, and a lack of support for conventional native features, such as push notifications. Traditional web applications were simply too sluggish and unreliable to comfortably replace a native app in all but the most limited of use cases.

Progressive web applications (PWAs) combine the distribution capabilities of traditional web applications with the performance features and interactivity of native applications.

PWAs offer the user a responsive, cross platform experience with native app functionalities, such as push notifications and one-click installation; all from a web browser. They also offer offline functionality in certain situations.

With PWAs, businesses build one web app for all platforms, saving both time and money in the development process. It also simplifies future updates and maintenance, since developers only have to work on one codebase.

Learn more about progressive web applications, and their characteristics and benefits, using our PWA handbook.

The CRM web application we build in this series of tutorials is a PWA that can be installed on both mobile devices and desktop computers. It has a custom offline fallback page for when the user accesses it without an internet connection.
Click here to learn more about the business case for building progressive web applications.

Why should you use Java to build your web application?

Java is an excellent language for developing secure and robust web applications. It is often the programming language of choice for complex enterprise web applications which emphasize stability – think global banking systems and mission-critical applications that make up government infrastructures.

In particular, the following features make Java well suited for enterprise web-application development:

Scalability & integration: Java is a mature programming language with a large community of developers who build and support a wide range of frameworks, integrations and libraries that can be used to easily extend the capabilities of an application.

In fact, many (now) famous brands such as Twitter (originally built on Ruby on Rails) and Spotify (initially written in Python) rewrote their backends in Java (or JVM languages, such as Scala or Kotlin) when they needed to rapidly scale their web applications.

Principal architect of Spotify quoting @monkchips: “when web companies grow up, they turn into @java shops”. Spotify replaced Python with Java. #javaone pic.twitter.com/EeIuxTM0Z3

Stability & support: Java has run many of the world's most business-critical apps for over 20 years. It has a stable, backwards-compatible API and is supported by both Oracle and third-party JDK vendors, like Amazon.

Availability of Java developers: Java’s popularity and longevity make it easier for businesses to recruit qualified Java developers capable of developing and maintaining their web applications. Conversely, this also creates more demand for qualified Java developers, making it an excellent language to master.

Statically typed: Java is a statically-typed language, meaning that it checks to see if your variables are created with the correct type (for example integer, string or boolean) for the data they need to hold. Type safety allows developers to catch errors early, instead of at runtime. This is especially important for complex enterprise applications, which can have codebases ranging from tens of thousands to millions of lines of code.Type safety makes it easier to securely maintain an application.

Type safety also improves collaboration between teams of developers. It provides a way to define contracts for how to call different APIs and what to expect. It makes Java well suited for large applications.

Security: Our approach to building web applications with Spring Boot and Vaadin uses Java for both the backend and the UI logic. This ensures that the entire application runs within the secure confines of the server, and not on the client side (that is, the user’s browser). This makes cross-scripting attacks and other malicious acts much harder to implement

Selecting a technology stack for a modern Java web application

There are many ways in which to build a Java-based PWA or web application. We have pre-selected frameworks and tools for you based on two criteria: they are easy enough to learn quickly, but robust enough for production. 

Spring Boot for the backend

Spring is an open-source framework that allows Java developers to create enterprise applications. It uses modern technologies and techniques, such as aspect-oriented programming and dependency injection, to solve many of the complexities that arise when building Java enterprise applications. Essentially, Spring handles the business logic of your web application. 

Spring Boot is a framework that packages and configures your Spring application with sensible defaults. Essentially, it eliminates most of the hassle of setting up and running a Spring-based app and lets you focus on your own code. 

The main Spring and Spring Boot features you’ll use are:

Don’t worry if you don’t know what all of these are, we cover each individually as we go.

Vaadin for the frontend

Vaadin is an open-source Java web app framework that offers a clean, secure and type-safe way to build UIs in Java and link them to your app’s Java backend. Vaadin allows you to avoid using any frontend languages such as JavaScript.

Vaadin comes with:

  • A large library of UI components. Each component has a Java API and you can customize the look and feel.
  • A router for navigating between views.
  • A powerful data-binding system for forms and lists.
  • Powerful abstraction capabilities that let you focus on your app and its functionality, instead of things like REST and connectivity.

Why use Vaadin instead of Spring MVC and Thymeleaf, JSP or Freemarker?

Vaadin is an alternative to using Spring MVC and Thymeleaf, JSP or Freemarker when building web applications with Spring Boot.

The main advantage of Vaadin compared to server-based templates are:

  • Vaadin is designed for building interactive single-page apps. Spring MVC and templates are better suited for mostly static content.
  • Vaadin offers a Java component API, allowing you to build the entire application in Java.
  • Vaadin comes with a large library of customizable UI components.
  • Vaadin handles the communication between the server and the browser automatically: you don’t need to write any JavaScript to update content dynamically.

Why use Vaadin instead of REST and React or Angular?

Combining a Spring Boot-based REST backend with a frontend framework like React or Angular is a popular way of building single-page apps. Vaadin allows you to build the same app experiences with less effort.

Advantages of using Vaadin instead of Angular or React:

  • Faster development: you do not need to develop the backend and frontend separately.
  • The entire application can be written in type-safe Java.
  • Vaadin comes with a large library of customizable UI components.
  • Vaadin handles the communication between the server and the browser automatically: you don’t need to write any JavaScript to update content dynamically.
  • More secure: Vaadin apps run on the server and don't expose application code or extra endpoints to the browser.

Video: Course overview