Configuring npm/pnpm

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

Install a Custom Package

To install a custom frontend 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 frontend 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, if pnpm is not installed globally the framework will install it locally using npm. The package-lock.json file which is used by npm is incompatible with pnpm and it’s removed automatically if pnpm is used. pnpm uses pnpm-lock.yaml file instead of package-lock.json. This means that any custom dependency configurations should go to pnpm-lock.yaml.

For a Spring Boot based project, you can put vaadin.pnpm.enable = true into the application.properties file.

For a plain Java or a JavaEE based project, you can use Servlet 3.0 @WebServlet annotation:

@WebServlet(urlPatterns = "/*", name = "myservlet", asyncSupported = true, 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>

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

To read more about how to set properties, see the Configuration Properties.

Alternatively, the property can be also set to the vaadin-maven-plugin, using pnpmEnable. Note that this only works for production mode.

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

Docs

Docs

Configuring npm/pnpm

Install a Custom Package

Switch Between npm and pnpm