Documentation

Documentation versions (currently viewingVaadin 23)
New Acceleration Kits: Observability Kit, SSO Kit, and Swing Kit. Read the blog post.

Configuring npm/pnpm

Configuring the front-end package manager.

npm is the recommended and default package manager for Vaadin projects.

Install a Custom Package

To install a custom front-end package into your project with npm, run npm i xxx. For example, to add the mobx package as a dependency in package.json as well as install it into node_modules, run the following command in the project directory:

npm i mobx
Note
Vaadin expects transitive platform dependencies to be available directly under node_modules. Vaadin uses the npm overrides feature (since npm 8.3.0) to lock the transitive platform dependencies versions.

Switch between npm and pnpm

npm is used as the default front-end package manager.

Vaadin also supports using pnpm (also known as performant npm). To switch to pnpm, you can set the vaadin.pnpm.enable system property to true.

When using pnpm, the framework installs it locally using npm if it isn’t installed globally. The package-lock.json file that’s used by npm is incompatible with pnpm and is removed automatically if pnpm is used. pnpm uses the pnpm-lock.yaml file instead of package-lock.json. This means that any custom dependency configurations should go to pnpm-lock.yaml.

Switch between npm and pnpm in a Spring Boot Project

For a Spring Boot-based project, you can add vaadin.pnpm.enable = true to the application.properties file.

Switch between npm and pnpm in a Plain Java or JavaEE Project

For a plain Java or a JavaEE-based project, you can set the pnpmEnable configuration property inside the vaadin-maven-plugin.

<plugin>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-maven-plugin</artifactId>
    <version>${project.version}</version>
    <executions>
        <execution>
            <goals>
                <goal>prepare-frontend</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <pnpmEnable>true</pnpmEnable>
    </configuration>
</plugin>

Alternatively, you can use the Servlet 3.0 @WebServlet annotation:

@WebServlet(urlPatterns = "/*", name = "myservlet", asyncSupported = true, loadOnStartup = 1,
  initParams = { @WebInitParam(name = "pnpm.enable", value = "true") })
public class CustomServlet extends VaadinServlet {
}

or use the traditional web.xml file:

<?xml version="1.0" encoding="UTF-8"?>
<web-app
  id="WebApp_ID" version="3.0"
  xmlns="http://java.sun.com/xml/ns/j2ee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">

  <servlet>
    <servlet-name>myservlet</servlet-name>
    <servlet-class>
        com.vaadin.flow.server.VaadinServlet
    </servlet-class>
    <load-on-startup>1</load-on-startup>

    <init-param>
      <param-name>pnpm.enable</param-name>
      <param-value>true</param-value>
    </init-param>
  </servlet>

  <servlet-mapping>
    <servlet-name>myservlet</servlet-name>
    <url-pattern>/*</url-pattern>
  </servlet-mapping>
</web-app>

For more about how to set properties, see Configuration Properties.

B8A479EF-56AF-4F64-A52B-A2C01F1E5991