In this step-by-step tutorial, you will learn how to build a modern web app – completely in Java. This complete course covers each step of creating a Spring Boot application with a responsive frontend web app using Vaadin Flow. You will also learn how to test and deploy the application to the cloud.
The course instructor is Marcus Hellberg. He has more than 15 years of experience in building web apps with Java and currently leads the open-source community team at Vaadin.
Text Version: https://vaadin.com/docs/latest/flow/tutorials/in-depth-course
Project starter link: https://start.vaadin.com/?preset=flow-crm-tutorial&preset=partial-latest&dl
Source code: https://github.com/vaadin/flow-crm-tutorial
Vaadin Discord Chat: https://discord.gg/vaadin
0:00 – Course intro
2:09 – Creating a new Spring Boot and Vaadin Project
7:39 – Vaadin Flow Basics
12:27 – Building a view with components
23:55 – Creating a form component
35:46 – Connecting to the database (services and repositories)
44:46 – Data binding and form input validation
53:07 – Managing view state & responsive styles
1:02:07 – Navigation (routing) and parent layouts
1:08:27 – Creating a dashboard (charts)
1:16:03 – Spring Security and login & logout
1:28:06 – PWA: installing, offline fallback, icons
1:34:19 – Unit testing the UI with JUnit
1:44:40 – Integration tests for the UI using SpringBootTest
1:50:37 – End-to-end (e2e) tests with Vaadin TestBench
2:00:25 – Production build, PostgreSQL, and Heroku cloud deployment
source
Hi, I am new to Vaadin. When I download the flow crm tutorial from github and running the code, its running without any errors but the 8080 port is buffering without displaying login view. Can you please help?
please! inform what languages yuh use in the tutorials in description .thanks
This really looks cool but is there a way where you integrate like a client server (REST API ).
I love java and vaadin seems promising to me, but why it's not popular like angular or react.
However, I will learn it of course, but I want to know why
Hello, do we need paid version of vadin for this application or we can achieve this with "free" version? Many thx 🙂
not working because of node issues…
Vaadin putting front end developers out of a job 😂
I know it's off topic, but can you share your terminal setup? I like the prompt with the time and git status.
1:26:25 "Shit, let me hide that"
Anyway thanks for the brilliant tutorial!
What is the reason of using maven instead of gradle. Is it any profit of it or not?
Thank you very much! I’m going to build the UI for my app with Vaadin Flow now. I hope I’ll be able to configure Vaadin/SpringBoot with Keycloak. Hope it will not be to hard
I am trying to add components in the list for example H3 but it brings error that it cant resolve the symbol any one to guide me please
Such frameworks tend to grow fat and error-prone, with too much magic under the hood. Indeed, even test example from official web site is not starting out of the box! Either a conflict with node.js modules or anything.. How is it supposed to catch a client, if the simplest test example "Hello, world" is not working out of the box? (Java 11, Vaadin 23.1.2, Node version unknown…)
I have just installed Git in my PC but am still getting errors all rotating around existence of vaadin can anyone help me?
If you're just trying this tutorial for yourself and you're making your getToolBar() class make having it be a component wouldn't work for me so try making it a HorizontalLayout and have it return "toolbar".
😍🎈❤
Thanks my namesake
In the download link provided in the description of the video, there is no "data" folder containing the contact, generator, repository, and service classes. Where can I find these?
Hi thank you so much for this amazing video. I encountered this "java.lang.IllegalArgumentException: Malformed uxxxx encoding while mvn install" error and resolved it by deleting pre-existing npm which located in C:UsersjayAppDataRoamingnpm
Marcus great job, thanks
Great vid! Thanks
HY MAN THANKS FOR THIS
Hello , thank you so much .
With the login system, can a regular user not (admin) delete users? or how does it work
I have the Problem, that the maven-failsafe-plugin isn't there
I have an error in contactForm class, On createButtonLayout Method the 'addThemeVariants' functionnot working, so how can I fix this error?
man ! you rock !… really easy to understand ! 😀
Thanks for the tutorial, it is very helpful. I have an error because the IDE is not recognizing postgresql maven libraries: Dependency 'org.postgresql:postgresql:42.3.3' not found. Do you know how could I solve this?
too much of java code to design a login form? :
Superb video, fantastic framework. But in my vaadin project I struggle with the live reload. Every time I make a change and rebuild the project, the whole app restarts completely which takes too long. I have the devtools in the pom and use embedded tomcat. In your video the live reload is realy fast. Do I miss something?
to change from the h2 database to the postgres db, you don't need to make any other changes other than adding depencies?
Amazing ! Thanks for this tutorial!
i get the following error at the start The term 'mvnw' is not recognized as the name of a cmdlet, function, script file, or operable program.
Thank you for it. Looks like current starter has 11 Java, in tutorial it is 8, so it make issues while deploy to heroku. Also i got issues with access to testbench pack (while charts works ok). Thanks again
Why do i have to pay over $1300 just to get access to UI editor that other frameworks offer for free?
Thanks for the tutorial. I've managed to successfully go through it up to 1:33:27. I'm using chrome and there is no installation button (it is there on youtube, for example). What can be the cause of problem?
can we use css media queries to have a responsive layout for mobile view and etc?
Hello I'm currently getting an error when trying to run the application. The error lies within the main class. The error I'm receiving states "Java cannot find symbol variable LaunchUtil" Thanks in advance.
Thank you Marcus, your video is very complete and crystal clear. Great job!
Seems to be a great framework! Finally, someone came to this brilliant idea! I cannot explain why it's less popular than angular and stuff…
Downloaded the project, imported it into IntelliJ and tried to run it, but I get an error:
ERROR 27608 — [ restartedMain] o.h.engine.jdbc.spi.SqlExceptionHelper : Value too long for column "NAME VARCHAR(255)": "STRINGDECODE('{n ^^nSyntaxError: Unexpected token =>n at exports.runInThisContext (vm.js:73:16)n … (462)"; SQL statement:
insert into company (name, id) values (?, ?) [22001-200]
I can't find where the error originates. I am new to Spring Boot and Vaadin. Was looking forward to this tutorial, but I don't know how to fix the problem so I can run the project and then proceed.
In database connection part, you use object-relational mapping right?