Vaadin 24.4: Introducing the code-first AI-powered UI editor and React seamlessly integrated into the Vaadin platform
Blog

Six ways to quickly get started with your next Vaadin project

By  
Marcin Głowacki
Marcin Głowacki
·
On Jul 9, 2024 2:56:41 PM
·

Starting a new project with an unfamiliar framework can be daunting. The steep learning curve involves mastering new syntax and concepts, often slowing initial progress. Troubleshooting can become a solo endeavor due to limited documentation and community support, and integrating the framework with existing systems adds another layer of complexity. 

However, Vaadin simplifies this process with its intuitive tools and comprehensive documentation. 

Vaadin offers a range of easy-to-use solutions, making it straightforward to get your project up and running smoothly. These solutions help you overcome typical obstacles and unlock the framework's full potential quickly. In this article, we will provide a quick overview of the most popular ways to start your Vaadin project.

1. start.vaadin.com

Starting a new Vaadin project is a breeze with start.vaadin.com. It offers a UI view builder to create a custom project from scratch or lets you choose from various Hello World starter projects. When opting for a starter project, you have the flexibility to select from multiple frameworks like Java and React, languages such as Java or Kotlin, build tools like Maven or Gradle, and different architectures. This versatility ensures that you can tailor your project setup to fit your specific needs and preferences, making the initial setup process both efficient and customizable.

Starting a new Vaadin project is a breeze with start.vaadin.com

Select your favorite tech stack and get started with Vaadin.

2. Vaadin plugin for IntelliJ

Starting a Vaadin project directly from your IDE has never been easier, thanks to the Vaadin IntelliJ plugin. This powerful tool allows you to kick off a new Java or React Vaadin project effortlessly, complete with example views and built-in authentication. Additionally, the plugin offers the convenience of downloading Hello World starter projects, similar to the functionality provided by start.vaadin.com.

You can use the Vaadin IntelliJ plugin. to get started directly from your IDE.

3. Vaadin plugin for Visual Studio Code

With the dedicated Vaadin extension, starting a new Vaadin project in Visual Studio Code is incredibly simple. The extension features a step-by-step wizard that guides you through creating a new Vaadin project, complete with examples of Java or React views and built-in security.

Use the Vaadin extension for VS Code to get started.

4. start.spring.io

You can now kickstart Vaadin projects directly from https://start.spring.io thanks to Vaadin's integration with Spring. By simply adding the Vaadin dependency, you can leverage the robust features of both Vaadin and Spring, creating a seamless development experience. This cooperation streamlines the setup process, allowing you to quickly set up a powerful and scalable application with minimal configuration.

Get started with Vaadin on Spring initializr

5. npm and Vaadin CLI

Creating new Vaadin projects is also possible with the npm init script and Vaadin Command Line Interface (CLI) distributed as npm packages. Those tools enable you to quickly set up fully configured Vaadin projects with just a few commands, including the option to initialize a Git repository or include sample views for both Java and React.

npm init vaadin

npm init vaadin@latest

Need to install the following packages:
create-vaadin@3.0.0-pre5
Ok to proceed? (y) y
✔ Project name: … my-vaadin-app
✔ Example views: › Hilla (React + TypeScript)
✔ Features: › Login/logout and access control, Include JPA support, Dockerfile

Project 'my-vaadin-app' created

To run your project, open the my-vaadin-app folder in your IDE and launch the Application class

You can also run from the terminal using
- cd my-vaadin-app
- mvn

Vaadin CLI

// install using
npm i -g @vaadin/cli

// create Vaadin React (Hilla) with git repository
vaadin init –git –hilla my-project

// print available init options
vaadin help init

6. Maven archetype

With a simple command, Maven generates a fully configured project structure complete with essential dependencies. This approach not only accelerates the initial setup but also ensures best practices are followed, providing a solid starting point for developing your Vaadin application efficiently.

On the command line, you can generate a project as follows:

mvn -B archetype:generate \
-DarchetypeGroupId=com.vaadin \
-DarchetypeArtifactId=vaadin-archetype-application \
-DarchetypeVersion=LATEST \
-DgroupId=org.example \
-DartifactId=my-webapp \
-Dversion=1.0-SNAPSHOT

Get started

As you can see, there are numerous ways to create a new Vaadin project. Each method offers unique features to streamline your setup process and get you coding quickly. Choose the one that is most convenient for you. For any questions or further details, the Vaadin Forum is an excellent resource for community support, and the Vaadin documentation provides comprehensive guides and information.

Add to your bookmarks

start.vaadin.com

Vaadin plugin for IntelliJ

Vaadin extension for VS Code

start.spring.io

Vaadin CLI npm package

Getting Started on vaadin.com docs

Marcin Głowacki
Marcin Głowacki
Marcin is an Engineering Manager at Vaadin. His team is responsible for developing and maintaining popular Vaadin tools like start.vaadin.com, Vaadin Copilot, and Vaadin IDE plugins.
Other posts by Marcin Głowacki