Configuring npm/pnpm

Types of Switching 

In the below section, we will discuss npm and pnpm between various switches in detail in a simple spring boot project, a java project. So let’s get started with the various types of switching explained below.

Switch between npm and pnpm 

NPM(Node Package Manager) downloads the packages and their dependencies for web, java projects. Npm is called the default front-end package manager.

Vaadin also supports pnpm (also known as performant npm) where PNPM is the alternative package manager for the Node. js. The main purpose of the PNPM is to use them if needed by the other projects too by creating the hard links of it. To use pnpm, you need to set the vaadin.pnpm.enable system property to be true.

If pnpm is not installed globally, the framework will install it locally using npm. The package-lock.json file used by npm is incompatible with pnpm and is immediately destroyed if pnpm is used. Instead of package-lock.json, pnpm uses the pnpm-lock.yaml file means that any customized dependent configurations should be included in pnpm-lock.yaml.

Switch between npm and pnpm in a spring boot project

To run a project based on spring boot, you need to add vaadin.pnpm.enable=true to the application.properties file.

Switch between npm and pnpm in a plain java and JavaEE project

To run a normal java and JavaEE project, you need to set the pnpmEnable configuration property under the vaadin-maven-plugin.

Here in the below code, we are setting up the pnpmEnable configuration property.

<plugin>
    <groupId>com.vaadin configuring npm/pnpm</groupId>
    <artifactId>vaadin-maven-plugin configuring npm/pnpm</artifactId>
    <version>${project(configuring npm/pnpm).version}</version>
    <executions>
        <execution>
            <goals>
                <goal>preparing-frontend</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <pnpmEnable>true</pnpmEnable>
    </configuration>
</plugin>


You can also use the Servlet 3.0 @WebServlet annotation:


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


Or we can use the older methods of using the 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>configuring npm/pnpm</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>configuring npm/pnpm</servlet-name>
    <url-pattern>/*</url-pattern>
  </servlet-mapping>
</web-app>

Frequently Asked Questions

What does the pnpm setup do?

pnpm is used to install all the dependencies for a project. In a CI environment, the installation fails if a lock file is present but must be updated. Pnpm install downloads all dependencies in all projects within a workspace.

Which one is better, Yarn or npm?

NPM downloads packages sequentially, while Yarn installs them in parallel, which improves speed and performance. NPM has managed to resolve vulnerabilities, though Yarn is still considered more secure than NPM. Yarn also has advanced features such as Plug'n'Play and Zero-Install.

Define pnpm?

PNPM, which stands for "Performant NPM," is an alternative package manager for Node. Js. The primary goal of PNPM is to keep all packages in a global (centralized) storage and use them as needed by other projects by making hard links with them.

Conclusion

In this article, we have learned the introduction to Vaadin, installation of npm/pnpm packages, switch between npm and pnpm, switch between npm and pnpm in a spring boot, and switch between npm and pnpm in a plain java and JavaEE project.

After reading about configuring npm/pnpm, are you not feeling excited to read/explore more articles on the topic of vaadin? Don't worry; Coding Ninjas has you covered. If you want to check out play-related articles, refer to the Vaadin-Design System Resources, Vaadin-Core Elements, Vaadin-Environment Setup, Vaadin-Confirm Dialog, Vaadin-Grid, and Vaadin-Combo Box.

Recommended Readings:

NPX vs NPM

Visit our website to read more such blogs. Make sure that you enroll in the courses we provide, take mock tests, solve problems available, and interview puzzles. Also, you can pay attention to interview stuff- interview experiences and an interview bundle for placement preparations. Do upvote our blog to help fellow ninjas grow.

Happy Learning!