Docs

Docs

Start a Project

Create and run your first Vaadin application.

The easiest way of starting a new Vaadin project is to generate a walking skeleton at Vaadin Start.

A walking skeleton is a minimal application that includes a fully-functional end-to-end workflow. All major building blocks are included, allowing you to run the application, but it does not yet perform any meaningful tasks. You then build your application by adding real features to it ("adding muscles to the bones").

You’ll get a walk-through of the Vaadin walking skeleton later.

Generate a Skeleton

Open Vaadin Start

The generator asks for some basic information, like the Maven groupId and artifactId. These fields are pre-filled, so you only need to change them if desired.

Next, choose between Flow and Hilla for your user interface:

  • Flow if you prefer implementing the UI in Java.

  • Hilla if you prefer React and TypeScript.

You can mix Flow and Hilla within the same application. However, most projects typically use only one. The choice depends on the team’s skill set and the project’s functional requirements.

Tip
 To create an empty project, leave both options unchecked.

Click the Download button to download a zip-file with your new project.

Try It

Once you have downloaded your new project, unzip it into a directory of your choice. Then start the application by running the following command:

./mvnw spring-boot:run

It takes some time for the application to start for the first time, depending on how many dependencies Maven and npm have to download. When everything is ready, you can access the application at: http://localhost:8080

It should look like this:

A walking skeleton running in the Chrome web browser

Enter a description into the field, pick a due date and click the Create button. The task shows up in the grid. Now enter the word fail and click the button. This triggers an exception that gets handled by the error handler, and pops up an error notification.

Stop the application by pressing Ctrl-C.

Tip
Are you behind a proxy?
Vaadin uses Node.js to download the frontend toolchain during the build. If you are behind a proxy, you may need to configure Node to use that. See the Flow Reference guide for details.