New Vaadin 14 app fails to run, error "Failed to determine 'node' tool." Missing Node.js and npm tools

Update: Non-issue in 14.2

Vaadin 14.2 & 16 have been changed to now include automatically the necessary npm tool in a Maven-driven project. No need to manually install Node.js & npm.

To quote this blog post:

Automatic Node.js install

Starting from versions 14.2 and 16, the Node.js install (which includes npm) happens automatically. It is installed to a .vaadin folder inside the home folder, and reused from there for all Vaadin projects. As before, Node is only used to build the frontend side of things; it does not run after you deploy for production!

And further improvement: pnpm instead of npm.

Frontend dependency management that just works - pnpm Behind the scenes, npm has been used to manage frontend dependencies since 14.0. Now, we’ve added support for pnpm, which introduces the following benefits:

1. Shorter build time, compared to npm on your local machine and CI system, because pnpm only downloads packages once and reuses them from a local cache.

2. No need to delete package.json, lock file or the node_modules folder when updating the Vaadin version in your project.

In 14.2, npm is still used by default, but we encourage you to test pnpm and give us your feedback. Trying pnpm is easy: there is no migration, just enable it by using a configuration property or Maven plugin configuration. You can learn more about pnpm here. Vaadin 16 will use pnpm by default.

I have verified this works well. I have now manually removed the Node.js/npm installation from my Mac.

---

tl;dr

The Vaadin 14 team expects you to have Node.js and npm tools installed on your computer.

As alternative, Vaadin 14 seems to be working with Node.js/npm being automatically installed within your project (rather than globally on your computer) by the frontend-maven-plugin tool you can specify in your Maven POM file. See XML snippet below for your POM.

If you would prefer to install Mode/npm globally on your computer, be sure to read the other Answer by Tom Novosad.

Details

As of Vaadin 14, the Vaadin team is switching:

• From HTML Imports, Bower, and WebJars
• To ES6 Modules, npm, and Webpack, with Node.js

…as part of their transition from Polymer 2 to Polymer 3.

See blog post, Bower and npm in Vaadin 14+.

Hopefully, as Vaadin-on-Java users, we need not care about these underlying technical details… but for one thing: Unfortunately, the npm & Node.js tools are required but not bundled within your Vaadin project by default.

You have two solutions:

• Install the tools globally.
• Install within your project.

I prefer the latter. And I prefer to have Maven auto-install them within my project, with less housekeeping for me to do manually.

CAVEAT: I do not know the limitations or ramifications of my node/npm-per-project solution. I barely have any idea of the purpose or nature of either node/npm, and have no idea how Vaadin makes use of them. So use this solution at your own risk. All I can say is that it seems to be working for me.

Add frontend-maven-plugin to your project

The frontend-maven-plugin tool can be used by Maven to download and install Node.js with npm within your Vaadin project.

Open the Maven POM file within your Vaadin project.

Add the following block inside the <build> <defaultGoal>jetty:run</defaultGoal> <plugins> element of that POM.

    <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <!-- Use the latest released version:
        https://repo1.maven.org/maven2/com/github/eirslett/frontend-maven-plugin/ -->
        <version>1.8.0</version>

        <executions>
            <execution>
                <!-- optional: you don't really need execution ids, but it looks nice in your build log. -->
                <id>install node and npm</id>
                <goals>
                    <goal>install-node-and-npm</goal>
                </goals>
                <!-- optional: default phase is "generate-resources" -->
                <phase>generate-resources</phase>
            </execution>
        </executions>
        <configuration>
            <nodeVersion>v10.16.3</nodeVersion>

            <!-- optional: with node version greater than 4.0.0 will use npm provided by node distribution -->
            <!--                    <npmVersion>2.15.9</npmVersion>-->

            <!-- optional: where to download node and npm from. Defaults to https://nodejs.org/dist/ -->
            <!--                    <downloadRoot>http://myproxy.example.org/nodejs/</downloadRoot>-->
        </configuration>
    </plugin>

Of course, you can tweak that snippet to use the latest version numbers. Check the Node.js page for the latest versions number.

Notice that we commented-out the npm item, as that tool is bundled with the latest versions of Node.js.

Remaining steps:

1. In the Maven panel within IntelliJ, run the Lifecycle items named clean and install. Wait a moment as some more items are downloaded and configured. (Notice the item "Installing node version v10.16.3" in your console history.)
2. In that same panel, in the section Plugins > jetty, run the jetty:run item. Wait a moment as the Jetty server launches to run your Vaadin app.

On the console you should see something like this (that mysterious Quiet Time warning is perennial with all releases of Vaadin):

[INFO] Started Jetty Server
[INFO] Using Non-Native Java sun.nio.fs.PollingWatchService
[WARNING] Quiet Time is too low for non-native WatchService [sun.nio.fs.PollingWatchService]: 1000 < 5000 ms (defaulting to 5000 ms)

3. Point your web browser to: http://localhost:8080/ to see the "Click Me" button appear, as your app successfully runs.

This solution came from the project page for the Maven plugin frontend-maven-plugin. Note that the example POM fragment there is incorrect, failing to wrap the <execution> tag within a plural <executions> tag. I filed ticket # 838 there.

You may want to follow this discussion in the Vaadin Forums.

For your reference, here is a complete POM file to compare to yours.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>work.basil.example</groupId>
    <artifactId>acme</artifactId>
    <name>acme</name>
    <version>2.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <properties>
        <maven.compiler.source>13</maven.compiler.source>
        <maven.compiler.target>13</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <failOnMissingWebXml>false</failOnMissingWebXml>

        <vaadin.version>14.0.5</vaadin.version>

        <drivers.downloader.phase>pre-integration-test</drivers.downloader.phase>
    </properties>

    <repositories>
        <repository>
            <id>central</id>
            <url>https://repo1.maven.org/maven2/</url>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </repository>
        <!-- Repository used by many Vaadin add-ons -->
        <repository>
            <id>Vaadin Directory</id>
            <url>https://maven.vaadin.com/vaadin-addons</url>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </repository>
    </repositories>

    <pluginRepositories>
        <pluginRepository>
            <id>central</id>
            <url>https://repo1.maven.org/maven2/</url>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </pluginRepository>
    </pluginRepositories>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-bom</artifactId>
                <type>pom</type>
                <scope>import</scope>
                <version>${vaadin.version}</version>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <dependencies>
        <dependency>
            <groupId>com.vaadin</groupId>
            <!-- Replace artifactId with vaadin-core to use only free components -->
            <artifactId>vaadin</artifactId>
            <exclusions>
                <!-- Webjars are only needed when running in Vaadin 13 compatibility mode -->
                <exclusion>
                    <groupId>com.vaadin.webjar</groupId>
                    <artifactId>*</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>org.webjars.bowergithub.insites</groupId>
                    <artifactId>*</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>org.webjars.bowergithub.polymer</groupId>
                    <artifactId>*</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>org.webjars.bowergithub.polymerelements</groupId>
                    <artifactId>*</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>org.webjars.bowergithub.vaadin</groupId>
                    <artifactId>*</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>org.webjars.bowergithub.webcomponents</groupId>
                    <artifactId>*</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

        <!-- Added to provide logging output as Vaadin uses -->
        <!-- the unbound SLF4J no-operation (NOP) logger implementation -->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-simple</artifactId>
        </dependency>

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-testbench</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <defaultGoal>jetty:run</defaultGoal>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
            </plugin>
            <!-- Jetty plugin for easy testing without a server -->
            <plugin>
                <groupId>org.eclipse.jetty</groupId>
                <artifactId>jetty-maven-plugin</artifactId>
                <version>9.4.19.v20190610</version>
                <configuration>
                    <!-- If using IntelliJ IDEA with autocompilation, this
                    might cause lots of unnecessary compilations in the
                    background.-->
                    <scanIntervalSeconds>2</scanIntervalSeconds>
                    <!-- Use war output directory to get the webpack files -->
                    <webAppConfig>
                        <allowDuplicateFragmentNames>true</allowDuplicateFragmentNames>
                    </webAppConfig>
                </configuration>
            </plugin>

            <!--
                Take care of synchronizing java dependencies and imports in
                package.json and main.js files.
                It also creates webpack.config.js if not exists yet.
            -->
            <plugin>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-maven-plugin</artifactId>
                <version>${vaadin.version}</version>
                <executions>
                    <execution>
                        <goals>
                            <goal>prepare-frontend</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>

            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <!-- Use the latest released version:
                https://repo1.maven.org/maven2/com/github/eirslett/frontend-maven-plugin/ -->
                <version>1.8.0</version>

                <executions>
                    <execution>
                        <!-- optional: you don't really need execution ids, but it looks nice in your build log. -->
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <!-- optional: default phase is "generate-resources" -->
                        <phase>generate-resources</phase>
                    </execution>
                </executions>
                <configuration>
                    <nodeVersion>v10.16.3</nodeVersion>

                    <!-- optional: with node version greater than 4.0.0 will use npm provided by node distribution -->
                    <!--                    <npmVersion>2.15.9</npmVersion>-->

                    <!-- optional: where to download node and npm from. Defaults to https://nodejs.org/dist/ -->
                    <!--                    <downloadRoot>http://myproxy.example.org/nodejs/</downloadRoot>-->
                </configuration>
            </plugin>

        </plugins>
    </build>

    <profiles>
        <profile>
            <!-- Production mode is activated using -Pproduction -->
            <id>production</id>
            <properties>
                <vaadin.productionMode>true</vaadin.productionMode>
            </properties>

            <dependencies>
                <dependency>
                    <groupId>com.vaadin</groupId>
                    <artifactId>flow-server-production-mode</artifactId>
                </dependency>
            </dependencies>

            <build>
                <plugins>
                    <plugin>
                        <groupId>com.vaadin</groupId>
                        <artifactId>vaadin-maven-plugin</artifactId>
                        <executions>
                            <execution>
                                <goals>
                                    <goal>build-frontend</goal>
                                </goals>
                                <phase>compile</phase>
                            </execution>
                        </executions>
                    </plugin>
                </plugins>
            </build>
        </profile>

        <profile>
            <id>integration-tests</id>
            <build>
                <plugins>
                    <plugin>
                        <groupId>org.eclipse.jetty</groupId>
                        <artifactId>jetty-maven-plugin</artifactId>
                        <version>9.4.19.v20190610</version>
                        <configuration>
                            <scanIntervalSeconds>0</scanIntervalSeconds>
                            <stopPort>8081</stopPort>
                            <stopWait>5</stopWait>
                            <stopKey>${project.artifactId}</stopKey>
                        </configuration>
                        <executions>
                            <execution>
                                <id>start-jetty</id>
                                <phase>pre-integration-test</phase>
                                <goals>
                                    <goal>deploy-war</goal>
                                </goals>
                            </execution>
                            <execution>
                                <id>stop-jetty</id>
                                <phase>post-integration-test</phase>
                                <goals>
                                    <goal>stop</goal>
                                </goals>
                            </execution>
                        </executions>
                    </plugin>

                    <!-- Runs the integration tests (*IT) after the server is started -->
                    <plugin>
                        <groupId>org.apache.maven.plugins</groupId>
                        <artifactId>maven-failsafe-plugin</artifactId>
                        <version>3.0.0-M3</version>
                        <executions>
                            <execution>
                                <goals>
                                    <goal>integration-test</goal>
                                    <goal>verify</goal>
                                </goals>
                            </execution>
                        </executions>
                        <configuration>
                            <trimStackTrace>false</trimStackTrace>
                            <enableAssertions>true</enableAssertions>
                            <systemPropertyVariables>
                                <!-- Pass location of downloaded webdrivers to the tests -->
                                <webdriver.chrome.driver>${webdriver.chrome.driver}</webdriver.chrome.driver>
                            </systemPropertyVariables>
                        </configuration>
                    </plugin>

                    <plugin>
                        <groupId>com.lazerycode.selenium</groupId>
                        <artifactId>driver-binary-downloader-maven-plugin</artifactId>
                        <version>1.0.17</version>
                        <configuration>
                            <onlyGetDriversForHostOperatingSystem>true
                            </onlyGetDriversForHostOperatingSystem>
                            <rootStandaloneServerDirectory>
                                ${project.basedir}/drivers/driver
                            </rootStandaloneServerDirectory>
                            <downloadedZipFileDirectory>
                                ${project.basedir}/drivers/driver_zips
                            </downloadedZipFileDirectory>
                            <customRepositoryMap>
                                ${project.basedir}/drivers.xml
                            </customRepositoryMap>
                        </configuration>
                        <executions>
                            <execution>
                                <!-- use phase "none" to skip download step -->
                                <phase>${drivers.downloader.phase}</phase>
                                <goals>
                                    <goal>selenium</goal>
                                </goals>
                            </execution>
                        </executions>
                    </plugin>
                </plugins>
            </build>
        </profile>
    </profiles>
</project>

The Problem is in method

FrontendUtils::getNpmExecutable(String baseDir)

from flow-server.jar. This method tries to locate

node/node_modules/npm/bin/npm-cli.js

in $baseDir (which is project root folder in case of prepare-frontend goal). When that path does not exist, code continues executing "where/which npm.cmd" to get absolute path of 'npm.cmd'. In my case, got NodeJS installed globally, it returns correct path.

Subsequently code continues trying to execute "path-to-npm.cmd\npm.cmd -v", to ensure that npm.cmd exists and is runnable.

And here is the problem in method:

ProcessBuilder FrontEndUtils::createProcessBuilder(List<String> command)

In this method under certain circumstances program code sets environment variable 'PATH' to path of npm.cmd (since ProcssBuilder.environment() returns map which does not contain 'PATH' variable).

Next when trying to execute command 'path-to-npm\npm.cmd -v', the exit value of the process is 1, and stderr is non-empty, because 'chcp' command is called before other stuff in 'npm.cmd' (probably SETLOCAL command), but since now 'chcp' is not in PATH.

Following code evaluates these conditions (exit code 1, stderr nonempty) as an error in execution of npm.cmd and

Failed to determine 'npm.cmd' tool.

message is printed.

This happens on my Windows 10, Vaadin Flow 14.0.1, NodeJS 10.16.3 installed globally.

Also got the same issues when running tomcat server with an application, since $baseDir variable contains path to tomcat bin directory.

Workaround

As a workaround it is sufficient to make symbolic link of NodeJS directory into your project root (and if application running on Tomcat, also make link of NodeJS to Tomcat's bin directory).