In this tutorial, we’re going to show you how to avoid redundant downloads of npm dependencies while building Vaadin applications.![]()
Why does npm cause slow development turnaround times?
npm is the equivalent of Maven in the JavaScript environment. It manages the front-end dependencies for a Vaadin application. The packages will be downloaded during the build time and, depending on your environment, stored in a local repository.
You have two options to set up npm. The first option is to install npm and Node globally. This will create a global repository and provide the packages across all your projects in a central location. The second option is to install npm locally with the frontend-maven-plugin and keep the dependencies in your project directory. You might want to opt for the second option if you don’t have an npm installation or if you are on a test environment, which is deleted after completion.
To speed up the build process, we will cache all dependencies with a Docker image that is running a Nexus server on a local port and provide an npm registry.
Installation
To install the npm registry with Docker, please do the following:
-
Install Docker.
-
Download the docker-nexus-npm-registry image from public Docker Hub Registry
$ docker pull sebak/nexus_npm_registry_vaadin
or, you can build an image from the given Dockerfile:
$ docker build -t="npm-registry" .
Usage
$ docker run -dit -p 8081:8081 npm-registry
To link npm to your local registry add a configuration to your local npm
$ npm config set registry http://localhost:8081/repository/npmjs-org/
or add [frontend-maven-plugin](https://repo1.maven.org/maven2/com/github/eirslett/frontend-maven-plugin/) to your project pom. You can find an example project with a proper configuration in the vaadin-example folder.
After setting up the docker image, you need to compile a Vaadin project on your machine with
$ mvn install -Pproduction --file vaadin-example/pom.xml
|
Tip
|
You can add "-Dvaadin.version=<vaadin version no.>" to download the dependencies for a specific vaadin version. The available version numbers of the Vaadin framework can be found here. |
Note that you need to have an internet connection available if you want to add web components which are not part of the default web-component set to the project later.
To check the content of the npm registry, you can go to localhost:8081 and log in with username "admin" and password "admin."
Source code on GitHub.