Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ The recommended setup for an application with a Vaadin UI is a https://spring.io

If Spring Boot or Maven are new to you, though, you should first familiarize yourself with them before proceeding. Maven has a https://maven.apache.org/guides/getting-started/index.html[Getting Started Guide] that you'll find helpful. Spring Boot has an extensive https://docs.spring.io/spring-boot/index.html[reference manual] that includes a https://docs.spring.io/spring-boot/tutorial/first-application/index.html[tutorial].

Spring Boot and Maven are recommendations, not requirements. You can also build your application with https://gradle.org/[Gradle] -- see <<{articles}/getting-started/starters/gradle#,Starting a Vaadin Project with Gradle>> -- and run it without Spring Boot, for example with Quarkus or CDI. See <<{articles}/flow/integrations#,Integrations>> for the supported technologies, and <<{articles}/compatibility#,Supported Technologies>> for their minimum versions.
Spring Boot and Maven are recommendations, not requirements. You can also build your application with https://gradle.org/[Gradle] -- see <<{articles}/getting-started/starters/gradle#,Using Vaadin with Gradle>> -- and run it without Spring Boot, for example with Quarkus or CDI. See <<{articles}/flow/integrations#,Integrations>> for the supported technologies, and <<{articles}/compatibility#,Supported Technologies>> for their minimum versions.


== JAR vs. WAR
Expand Down
4 changes: 2 additions & 2 deletions articles/getting-started/dev-environment/import/eclipse.adoc
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
title: Eclipse IDE
page-title: How to import a Vaadin project into Eclipse IDE.
description: Learn how to import a Vaadin project into Eclipse IDE using the built-in Maven project import feature.
description: Learn how to import your project into Eclipse IDE using the built-in Maven project import feature.
meta-description: Import your Vaadin project into Eclipse IDE easily by following these step-by-step instructions using the Maven import feature.
order: 100
---


= Import into Eclipse IDE

To import a Vaadin project into Eclipse IDE, click menu:File[Import] in the menu. Then, in the *Import* dialog, select menu:Maven[Existing Maven Projects] and click [guibutton]*Next*.
To import your project into Eclipse IDE, click menu:File[Import] in the menu. Then, in the *Import* dialog, select menu:Maven[Existing Maven Projects] and click [guibutton]*Next*.

image::images/eclipse-import.png[Import dialog in Eclipse IDE]

Expand Down
6 changes: 3 additions & 3 deletions articles/getting-started/dev-environment/import/index.adoc
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
---
title: Import a Project
page-title: Import a Vaadin project to your IDE
description: Import your Vaadin project into your favorite IDE.
description: Import your project into your favorite IDE.
meta-description: Learn to import a Vaadin project into your favorite Java IDE. Follow quick guides for IntelliJ IDEA, Visual Studio Code, Eclipse, and NetBeans.
order: 15
---


= Import a Project

A Vaadin project is a normal Maven project. You can import it into your favorite Java IDE in the same way as you would import any other Maven project.
A project with Vaadin is a normal Maven project. You can import it into your favorite Java IDE in the same way as you would import any other Maven project.

If you are unsure how to do this, you'll find quick guides for common Java IDEs here:

* <<intellij#,IntelliJ IDEA>> (both Ultimate and Community)
* <<intellij#,IntelliJ IDEA>>, with or without a subscription
* <<vscode#,Visual Studio Code>>
* <<eclipse#,Eclipse IDE>>
* <<netbeans#,NetBeans>>
4 changes: 2 additions & 2 deletions articles/getting-started/dev-environment/import/intellij.adoc
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
title: IntelliJ IDEA
page-title: How to import a Vaadin project into IntelliJ IDEA
description: Follow these steps to import a Vaadin project into IntelliJ IDEA using the Open project feature.
description: Follow these steps to import your project into IntelliJ IDEA using the Open project feature.
meta-description: Import your Vaadin project into IntelliJ IDEA by opening the project folder and trusting it when prompted — quick and easy setup instructions.
order: 10
---


= Import into IntelliJ IDEA

To import a Vaadin project into IntelliJ IDEA, click [guibutton]*Open* on the *Welcome to IntelliJ IDEA* screen.
To import your project into IntelliJ IDEA, click [guibutton]*Open* on the *Welcome to IntelliJ IDEA* screen.

image::images/idea-welcome.png[IntelliJ IDEA welcome screen]

Expand Down
4 changes: 2 additions & 2 deletions articles/getting-started/dev-environment/import/netbeans.adoc
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
title: NetBeans
page-title: How to import a Vaadin project into NetBeans
description: Learn how to import a Vaadin project into NetBeans using the Open Project option.
description: Learn how to import your project into NetBeans using the Open Project option.
meta-description: Import your Vaadin project into NetBeans by selecting Open Project and trusting the build script for a smooth setup experience.
order: 300
---


= Import into NetBeans

To import a Vaadin project into NetBeans, click [guibutton]*Open Project* on the start screen.
To import your project into NetBeans, click [guibutton]*Open Project* on the start screen.

image::images/netbeans-welcome.png[NetBeans welcome screen]

Expand Down
4 changes: 2 additions & 2 deletions articles/getting-started/dev-environment/import/vscode.adoc
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
title: Visual Studio Code
page-title: How to import a Vaadin project into Visual Studio Code
description: This guide shows how to import a Vaadin project into Visual Studio Code by opening the project folder and confirming trust settings.
description: This guide shows how to import your project into Visual Studio Code by opening the project folder and confirming trust settings.
meta-description: Import your Vaadin project into Visual Studio Code by opening the folder, trusting the authors, and enabling project-specific settings if prompted.
order: 20
---


= Import into Visual Studio Code

To import a Vaadin project into Visual Studio Code, select menu:File[Open Folder] in the menu. Then, find the project directory and click [guibutton]*Open*.
To import your project into Visual Studio Code, select menu:File[Open Folder] in the menu. Then, find the project directory and click [guibutton]*Open*.

image::images/open-dialog.png[Visual Studio Code open folder dialog]

Expand Down
4 changes: 2 additions & 2 deletions articles/getting-started/dev-environment/index.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ include::{articles}/_vaadin-version.adoc[]

= Development Environment

To develop Vaadin applications, you need a Java Development Kit (JDK) and a Java IDE. If you don't have them yet, this is the fastest path:
To build a Java application with a Vaadin UI, you need the same tools as for any other Java application: a Java Development Kit (JDK) and a Java IDE. You don't have to install any frontend tools, since Vaadin downloads the ones it needs during the build. If you don't have a JDK and an IDE yet, this is the fastest path:

. <<install-java#,Install Eclipse Temurin>>, version {vaadin-start-java-version} or newer.
. <<install-ide#,Install IntelliJ IDEA>>. The free Community Edition is enough.
. <<install-ide#,Install IntelliJ IDEA>>. You can use it for free, without a subscription.
. <<import/intellij#,Open your project in IntelliJ IDEA>> and <<run/intellij#,run it with hotswap>> using the Vaadin plugin.

The pages in this section also cover other JDK distributions, and the Visual Studio Code, Eclipse, and NetBeans IDEs. For the minimum versions of Java and the other technologies that Vaadin works with, such as Spring Boot, Maven, and application servers, see <<{articles}/compatibility#,Supported Technologies>>.
Expand Down
10 changes: 5 additions & 5 deletions articles/getting-started/dev-environment/install-ide.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ order: 10

= Install an IDE

Different IDEs have different levels of support for Java and TypeScript. You write Flow views in Java, so Java support is what matters for most Vaadin applications. TypeScript support matters only if you add <<{articles}/building-apps/react#,React views>> to your application. The following table gives a rough evaluation of language support in the most commonly used IDEs.
Different IDEs have different levels of support for Java and TypeScript. You write Flow views in Java, so Java support is what matters for most applications. TypeScript support matters only if you add <<{articles}/building-apps/react#,React views>> to your application. The following table gives a rough evaluation of language support in the most commonly used IDEs.

[%header, cols="3,1,1"]
|====
| IDE | Java | TypeScript
| link:https://www.jetbrains.com/idea/[IntelliJ IDEA Ultimate]| &star;&star;&star; | &star;&star;&star;
| link:https://www.jetbrains.com/idea/[IntelliJ IDEA Community Edition]| &star;&star;&star; | –
| link:https://www.jetbrains.com/idea/[IntelliJ IDEA], with an Ultimate subscription| &star;&star;&star; | &star;&star;&star;
| link:https://www.jetbrains.com/idea/[IntelliJ IDEA], free| &star;&star;&star; | &star;&star;
| link:https://code.visualstudio.com/[Visual Studio Code] | &star;&star; | &star;&star;&star;
| link:https://eclipseide.org/[Eclipse IDE] | &star;&star;&star; | &star;&star;
| link:https://netbeans.apache.org/[NetBeans]| &star;&star;&star; | &star;
Expand All @@ -29,13 +29,13 @@ Different IDEs have different levels of support for Java and TypeScript. You wri
Each IDE has installation packages for Windows, macOS, and Linux.

[TIP]
IntelliJ IDEA Ultimate gives the best developer experience.
IntelliJ IDEA with an Ultimate subscription gives the best developer experience. Students and teachers can get the subscription for free.


== IDE Extensions & Plugins

If you are using IntelliJ IDEA, install the link:https://plugins.jetbrains.com/plugin/23758-vaadin[Vaadin plugin].

If you are using Visual Studio Code, install the link:https://marketplace.visualstudio.com/items?itemName=vaadin.vaadin-vscode[Vaadin extension], the link:https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack[Extension Pack for Java], and the link:https://marketplace.visualstudio.com/items?itemName=vmware.vscode-boot-dev-pack[Spring Boot Extension Pack].
If you are using Visual Studio Code, install the link:https://marketplace.visualstudio.com/items?itemName=vaadin.vaadin-vscode[Vaadin extension], the link:https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack[Extension Pack for Java], and, for Spring Boot applications, the link:https://marketplace.visualstudio.com/items?itemName=vmware.vscode-boot-dev-pack[Spring Boot Extension Pack].

If you are using Eclipse IDE, you should use the Eclipse IDE for Enterprise Java and Web Developers. Install the link:https://marketplace.eclipse.org/content/vaadin-tools[Vaadin plugin] for Vaadin Copilot integration and for <<run/eclipse#enabling-hotswap-using-the-vaadin-plugin,running your application with Java hotswap>>.
4 changes: 2 additions & 2 deletions articles/getting-started/dev-environment/run/eclipse.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ order: 100

= Run in Eclipse IDE

You can run and debug your Vaadin application in Eclipse IDE as you would any other Java application. Open the main `Application` class. Then click the *Debug* button in the toolbar indicated by a red circle in this screenshot:
You can run and debug your application in Eclipse IDE as you would any other Java application. Open the main `Application` class. Then click the *Debug* button in the toolbar indicated by a red circle in this screenshot:

image::images/eclipse-debug-menu.png[Eclipse IDE debug menu]

Expand All @@ -25,7 +25,7 @@ If you use the Vaadin plugin, you don't have to install it yourself: the plugin
[[enabling-hotswap-using-the-vaadin-plugin]]
== Enabling Hotswap Using the Vaadin Plugin

The easiest way of running a Vaadin application with hotswap in Eclipse IDE is by installing the link:https://marketplace.eclipse.org/content/vaadin-tools[Vaadin plugin] from the Eclipse Marketplace. If you haven't done so already, do it now. Use the Eclipse IDE for Enterprise Java and Web Developers package. The same plugin also integrates Eclipse IDE with Vaadin Copilot, so that changes you make in the browser are written to your sources through the IDE.
The easiest way of running your application with hotswap in Eclipse IDE is by installing the link:https://marketplace.eclipse.org/content/vaadin-tools[Vaadin plugin] from the Eclipse Marketplace. If you haven't done so already, do it now. Use the Eclipse IDE for Enterprise Java and Web Developers package. The same plugin also integrates Eclipse IDE with Vaadin Copilot, so that changes you make in the browser are written to your sources through the IDE.

The plugin bundles HotswapAgent and installs it for you as [filename]`.vaadin/eclipse-plugin/hotswap-agent.jar` in your home directory, and it takes care of JetBrains Runtime as well, so there's nothing else to install.

Expand Down
6 changes: 3 additions & 3 deletions articles/getting-started/dev-environment/run/generic.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@
= Run in Any Java IDE
:toclevels: 2

You can run and debug your Vaadin application in any IDE or editor that supports Java. The `Application` class has a `main()` method, that you should run. The application starts up and you'll be able to access it at http://localhost:8080. Changes to stylesheets are applied to the browser automatically. However, to enable Java hotswap, you have to take some additional actions.
You can run and debug your application in any IDE or editor that supports Java. The `Application` class has a `main()` method, that you should run. The application starts up and you'll be able to access it at http://localhost:8080. Changes to stylesheets are applied to the browser automatically. However, to enable Java hotswap, you have to take some additional actions.

== Enabling Hotswap Manually

To manually enable hotswap support for a Vaadin application, complete the following steps:
To manually enable hotswap support for your application, complete the following steps:

1. Install JetBrains Runtime (JBR)
2. Install HotswapAgent into JBR
Expand All @@ -22,7 +22,7 @@

=== Install JetBrains Runtime

Download the latest JetBrains Runtime from the https://github.com/JetBrains/JetBrainsRuntime/releases[JetBrainsRuntime GitHub Releases] page. Pick the _JBR (vanilla)_ archive for your platform (for example, osx-aarch64, linux-x64, or windows-x64), and extract it to a suitable location. The variants _with JCEF_ add an embedded browser engine for desktop applications, which a Vaadin application doesn't need.
Download the latest JetBrains Runtime from the https://github.com/JetBrains/JetBrainsRuntime/releases[JetBrainsRuntime GitHub Releases] page. Pick the _JBR (vanilla)_ archive for your platform (for example, osx-aarch64, linux-x64, or windows-x64), and extract it to a suitable location. The variants _with JCEF_ add an embedded browser engine for desktop applications, which a web application doesn't need.

Check warning on line 25 in articles/getting-started/dev-environment/run/generic.adoc

View workflow job for this annotation

GitHub Actions / lint

[vale] reported by reviewdog 🐶 [Vaadin.Abbr] 'JCEF' has no definition. Raw Output: {"message":"[Vaadin.Abbr] 'JCEF' has no definition.","location":{"path":"articles/getting-started/dev-environment/run/generic.adoc","range":{"start":{"line":25,"column":307},"end":{"line":25,"column":311}}},"severity":"WARNING","code":{"value":"Vaadin.Abbr"}}

On macOS, the JVM is in the `Contents/Home` folder of the extracted directory. Use that folder wherever these instructions refer to the JetBrains Runtime folder.

Expand Down
10 changes: 5 additions & 5 deletions articles/getting-started/dev-environment/run/index.adoc
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
---
title: Run a Project
page-title: Run a Vaadin application in your IDE
description: Run your Vaadin application with hotswap and live reload from within your favorite IDE.
description: Run your application with hotswap and live reload from within your favorite IDE.
meta-description: Run your app directly from your IDE - IntelliJ IDEA, VS Code, Eclipse, and NetBeans - with hotswap and live reload for a faster development workflow.
order: 20
---


= Run a Project

You can run a Vaadin application from the command line with `./mvnw spring-boot:run` (`mvnw spring-boot:run` on Windows), but during development you should run it from your IDE with hotswap enabled. The quick guides for common Java IDEs are here:
You can run your application from the command line the way your platform does it, for example with `./mvnw spring-boot:run` (`.\mvnw spring-boot:run` on Windows) for a Spring Boot project. During development, though, you should run it from your IDE with hotswap enabled. The quick guides for common Java IDEs are here:

* <<intellij#,IntelliJ IDEA>> (both Ultimate and Community)
* <<intellij#,IntelliJ IDEA>>, with or without a subscription
* <<vscode#,Visual Studio Code>>
* <<eclipse#,Eclipse IDE>>
* <<netbeans#,NetBeans>>
* <<generic#,Any other Java IDE>>

[TIP]
IntelliJ IDEA Ultimate gives the best developer experience.
IntelliJ IDEA with an Ultimate subscription gives the best developer experience. Students and teachers can get the subscription for free.

There's also another option: the <<{articles}/flow/configuration/live-reload/dev-loop-cli#,Dev Loop CLI>> runs your application under a daemon that owns the edit-to-running-app loop, and gives you a single command that makes your edits live and reports whether they are. It's especially useful when an AI coding agent is doing the editing; the <<{articles}/building-apps/agentic-development/dev-loop-tutorial#,Dev Loop Tutorial>> shows that end to end.

Expand All @@ -45,6 +45,6 @@ When hot deploy mode is enabled, all JavaScript, TypeScript, and CSS files insid

When live reload is enabled, changes to your Java source files are automatically applied once they have been compiled by your IDE. This can happen either through an automatic restart of the server application, or by hotswapping the changed classes.

Not all changes to a Vaadin application can be hotswapped. For instance, if a changed class modifies some global state at application startup, you'd have to restart the application to see that change. There may also be cases where your application starts to behave strangely after having a class hotswapped. In this case, restarting the application manually is often enough to fix the problem.
Not all changes to an application can be hotswapped. For instance, if a changed class modifies some global state at application startup, you'd have to restart the application to see that change. There may also be cases where your application starts to behave strangely after having a class hotswapped. In this case, restarting the application manually is often enough to fix the problem.

The IDE guides above set up hotswap with HotswapAgent. For the other options -- Spring Boot Developer Tools, which restarts the application instead, and the commercial JRebel -- see <<{articles}/flow/configuration/live-reload#java-changes,Hot Deploy & Live Reload>>.
4 changes: 2 additions & 2 deletions articles/getting-started/dev-environment/run/intellij.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ order: 10

= Run in IntelliJ IDEA

You can run and debug your Vaadin application in IntelliJ IDEA as you would any other Java application. When you imported the project into IntelliJ IDEA, a run/debug configuration called _Application_ should have been created automatically. You can start the application by clicking the *Debug* button in the toolbar. It is indicated by a red circle in this screenshot:
You can run and debug your application in IntelliJ IDEA as you would any other Java application. When you imported the project into IntelliJ IDEA, a run/debug configuration called _Application_ should have been created automatically. You can start the application by clicking the *Debug* button in the toolbar. It is indicated by a red circle in this screenshot:

image::images/idea-debug.png[Debug button in IntelliJ IDEA]

Expand All @@ -32,7 +32,7 @@ When using hot deploy with Gradle, ensure that `frontendHotdeploy` is set to `tr

== Enabling Hotswap

The easiest way of running a Vaadin application with hotswap in IntelliJ IDEA is by installing the link:https://plugins.jetbrains.com/plugin/23758-vaadin[Vaadin plugin]. If you haven't done so already, do it now.
The easiest way of running your application with hotswap in IntelliJ IDEA is by installing the link:https://plugins.jetbrains.com/plugin/23758-vaadin[Vaadin plugin]. If you haven't done so already, do it now.

Click on the button with three small dots next to the run/debug configuration. It is highlighted on this screenshot with a red circle:

Expand Down
2 changes: 1 addition & 1 deletion articles/getting-started/dev-environment/run/netbeans.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ order: 300

= Run in NetBeans

You can run and debug your Vaadin application in NetBeans as you would any other Java application. Start by selecting menu:File[Project Properties]. Select the *Run* category and specify your *Main Class*, like this:
You can run and debug your application in NetBeans as you would any other Java application. Start by selecting menu:File[Project Properties]. Select the *Run* category and specify your *Main Class*, like this:

image::images/netbeans-properties.png[NetBeans project properties dialog]

Expand Down
Loading
Loading