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.
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.
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.
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.
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.