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.
- 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.
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.
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.
Chapter 1: How to set up a Java development environment
Before you can begin developing a web application with Java, you need development tools. The first chapter takes you through a step-by-step process of setting up the software and tools required to develop your Java application
If you already have the necessary tools set up on your computer, please go directly to chapter 2.
Chapter 2: Importing, running, and debugging Maven projects in IntelliJ IDEA
Once you have your development environment set up, it’s time to set up your base Java web application. Thanks to Spring Boot and Vaadin, this is a breeze. In this chapter, we provide step-by-step instructions on how to download, import and run your base Java web application in your IDE.
Chapter 3: Vaadin basics: building UIs with components and layouts
It’s time to start building the frontend of your Java web application. In this chapter, you learn the basics about Vaadin: components, layouts, and events. Vaadin includes a large set of UI components that you can use like building blocks in any application.
Chapter 4: Creating a Spring Boot backend: database, JPA repositories, and services
In this chapter, we build the backend using Spring Boot. There are a few things you need to set up for your CRM’s backend.
- A database.
- A data model.
- Repository classes to access the database.
- Service classes to allow your UI to securely access the backend.
Chapter 5: Adding data and configuring columns in Vaadin Grid
With the backend in place, it’s time to build the UI for the main view and link it to the backend with Spring’s dependency injection. In this chapter, we look at how to populate a Vaadin Grid and configure its columns.
Chapter 6: Filtering rows in Vaadin Grid
Vaadin’s data grid component is an excellent tool to display your data to users in a tabular manner/table. However, in most use cases, deriving meaningful information from the data involves filtering it based on a query. In this chapter, we set up the needed UI and backend functionality to help users filter the results and find what they're looking for.
Chapter 7: Creating your own reusable components in Vaadin
Vaadin’s component-based structure enables modular UI building. This is awesome for a number of reasons, but chiefly because it allows you to create your own custom components.
For example, you could combine several text field components and a button component to develop a form, which can be styled, edited and, most importantly, reused together. This custom component can then be used in any of your views. That’s exactly what we do in this part of our CRM project.
Chapter 8: Vaadin form data binding and validation
In this chapter, you learn how to bind data from an object to fields in the UI. Continuing on the component we started building in the previous chapter, we design it's API to ensure it can be used anywhere and can be tested easily.
Chapter 9: Passing data and events between Vaadin components
In this chapter, we use the reusable form component built in the previous two chapters to take a look at how components communicate in a UI. We connect the data grid selection to the form, and allow users to create new entities.
Chapter 10: Navigating between views in Vaadin
Most web applications consist of multiple views. Navigating between views in Vaadin is simple, using the @Route annotation. In this chapter, we add a dashboard view to the application and configure a responsive application layout to contain both views. The dashboard view uses Vaadin Charts to show statistics about the contacts in the CRM.
Chapter 11: Adding a login screen to a Vaadin app with Spring Security
Security and privacy are key concerns for any enterprise web application. In this chapter, we add a login screen to our CRM using Spring Security to make sure only authorized users can access the app.
Chapter 12: Turning a Vaadin app into an installable PWA
In this chapter we use the @PWA annotation to make the application installable. This means users can install the application on their mobile or desktop for easy access. We also define a custom fallback page for when the application is offline.
Chapter 13: Testing Spring Boot apps with unit and integration tests
Testing in an important part of building robust applications. It can help you find bugs and test otherwise difficult-to-replicate cases. In this chapter, we use JUnit to test the functionality of the form component and Spring Runner to test that components interact correctly with each other.
Chapter 14: Testing Vaadin apps in the browser with end-to-end tests
End-to-end tests use the application in the same way real users do—through the browser. They are a powerful tool to make sure every piece of the software works together and to catch regressions when working on larger projects. In this chapter, we use Vaadin TestBench to run tests in Chrome.
Chapter 15: Deploying a Spring Boot app on AWS Elastic Beanstalk
In this final chapter, we make the application ready for production and deploy it to the cloud. A production build is smaller and more performant, but more importantly, it hides sensitive debug data from users. We deploy the application to the AWS cloud using Elastic Beanstalk, a tool that orchestrates all the needed services, like a production MySQL database.
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.
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:
- Dependency injection to decouple components..
- Spring Data JPA repositories to work with the database..
- Spring Security to handle access control.
- An embedded Tomcat server to serve the application.
- Spring Boot developer tools to provide a smoother development experience.
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 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.
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.
- More secure: Vaadin apps run on the server and don't expose application code or extra endpoints to the browser.
Video: Course overview