Full-stack Spring Boot web app tutorial - LitElement, TypeScript, and Vaadin Fusion
Channel: vaadinofficial
Date: 2020-11-25

Download the starter here: https://start.vaadin.com/?preset=fusion-tutorial
You can find the text version here: https://vaadin.com/docs/latest/fusion/tutorials/quick-start-tutorial

In this tutorial, you'll learn to build a full-stack web application with a Spring Boot Java backend and a TypeScript based LitElement frontend using the open-source Vaadin Fusion framework. 

The step-by-step tutorial covers project setup, database, endpoints, and building a view.

0:00 - Intro
0:32 - Creating a new Spring Boot and Vaadin Fusion project
1:29 - Vaadin Fusion project structure
2:43 - Defining a JPA entity
4:05 - Creating a repository for database access
4:54 - Creating a type-safe server endpoint with Vaadin Fusion
7:45 - Launching the app in development mode
8:30 - Description of the todo view functionality
8:58 - Defining a component with LitElement
9:50 - Using LitElement properties for state
11:08 - Initializing a Vaadin binder for handling the form
12:01 - Adding CSS to the view
12:56 - Defining the view template for the form
15:34 - Saving the form to the backend
18:21 - Repeating a template for each item in an array
20:20 - Updating an object to the server
23:07 - Initializing the component state with a connectedCallback() lifecycle method

Vaadin Discord chat: https://vaad.in/chat