Deploying to Production

Guidance if you have problems taking Vaadin applications to production.

Verifying the Production Mode Artifact

Vaadin Servlet configures itself from the flow-build-info.json file, which is located in the META-INF/VAADIN/config/ resource package. The location of resources differs for different artifact types, for example:

  • Spring Boot jar file places resources into the BOOT-INF/classes/ folder in the jar file;

  • WAR archive places resources into the WEB-INF/classes/ folder.

If the production mode has been activated properly, the contents of the flow-build-info.json should be as follows:

Show code

flow-build-info.json

Expand code

  1. {
  2.   "compatibilityMode": false,
  3.   "productionMode": true,      (1)
  4.   "enableDevServer": false,
  5.   "chunks": {
  6.     "fallback": {
  7.       "jsModules": [
  8.         "@vaadin/vaadin-icons/vaadin-icons.js",
  9.         "@vaadin/vaadin-grid/src/vaadin-grid-tree-toggle.js",
  10. // etc etc
  11.         "frontend://ironListConnector.js"
  12.       ],
  13.       "cssImports": [
  14.       ]
  15.     }
  16.   }
  17. }
  1. Note that the productionMode property is set to true

It’s very important to have this file on classpath in production mode exactly once.

If the file is missing, Vaadin Servlet will use other means to examine whether it’s running in production mode: the value of the vaadin.productionMode system property, or the flow-server-production-mode.jar being present on the classpath, or similar. Depending on the outcome, Vaadin may throw an exception at runtime:

Show code

Expand code

  1. Failed to determine project directory for dev mode...

or

Show code

Expand code

  1. The compatibility mode is explicitly set to 'false', but there are neither 'flow-build-info.json' nor 'webpack.config.js' files

Vaadin may also decide to start in development mode; the Vaadin configuration is then governed by a different set of rules (for example, the project.basedir property or similar).

The project flow-build-info.json file is generated by Vaadin plugin, in the prepare-frontend Maven goal, then modified in build-frontend task to enable production mode.

If the file is present multiple times on the classpath, then Vaadin tries to choose which one is the right one which should be coming from the main project. Sometimes it’s not possible to do so, and then Vaadin prints a warning message and chooses the first flow-build-info.json file, which depends on the classpath ordering which in turn may depend on the ordering of files on the file system or in the WAR/JAR archive.

This can happen when a Vaadin addon incorrectly includes the flow-build-info.json file in the jar file. That’s a bug in the addon packaging which need to be fixed and the flow-build-info.json file removed from addon’s jar file.

For the reasons stated above, keep in mind to have the flow-build-info.json file on the classpath only once, and always coming from your main project.

A file named META-INF/VAADIN/config/stats.json is generated by Maven Plugin as well – it’s important to check for the presence of this file in the resources folder.

When packaging for production a webpack executable is run; this happens in the build-frontend Maven goal. Webpack is then responsible for packaging everything from frontend/ and node_modules into the precompiled JavaScript files bundle. The bundle is located in the META-INF/VAADIN/build/ resource folder. The folder contents should look like this (the hash is going to differ on every build):

Show code

Expand code

  1. ├── vaadin-2-18d67c4ccff7e93b081a.cache.js
  2. ├── vaadin-2-18d67c4ccff7e93b081a.cache.js.gz
  3. ├── vaadin-3-b0147df339bf18eb7618.cache.js
  4. ├── vaadin-3-b0147df339bf18eb7618.cache.js.gz
  5. ├── vaadin-4-ee1d2e45569f7eca4292.cache.js
  6. ├── vaadin-4-ee1d2e45569f7eca4292.cache.js.gz
  7. ├── vaadin-5-5e9292474e82143d0a27.cache.js
  8. ├── vaadin-5-5e9292474e82143d0a27.cache.js.gz
  9. ├── vaadin-bundle-19a00eae62ad7cddd291.cache.js
  10. ├── vaadin-bundle-19a00eae62ad7cddd291.cache.js.gz
  11. ├── vaadin-bundle.es5-b1c1a3cc054c62ad7949.cache.js
  12. ├── vaadin-bundle.es5-b1c1a3cc054c62ad7949.cache.js.gz
  13. └── webcomponentsjs
  14.     ├── bundles
  15.     │   ├── webcomponents-ce.js
  16.     │   ├── webcomponents-ce.js.map
  17.     │   ├── webcomponents-sd-ce.js
  18.     │   ├── webcomponents-sd-ce.js.map
  19.     │   ├── webcomponents-sd-ce-pf.js
  20.     │   ├── webcomponents-sd-ce-pf.js.map
  21.     │   ├── webcomponents-sd.js
  22.     │   └── webcomponents-sd.js.map
  23.     ├── custom-elements-es5-adapter.js
  24.     ├── LICENSE.md
  25.     ├── package.json
  26.     ├── README.md
  27.     ├── src
  28.     │   └── entrypoints
  29.     │       ├── custom-elements-es5-adapter-index.js
  30.     │       ├── webcomponents-bundle-index.js
  31.     │       ├── webcomponents-ce-index.js
  32.     │       ├── webcomponents-sd-ce-index.js
  33.     │       ├── webcomponents-sd-ce-pf-index.js
  34.     │       └── webcomponents-sd-index.js
  35.     ├── webcomponents-bundle.js
  36.     ├── webcomponents-bundle.js.map
  37.     └── webcomponents-loader.js

Common Issues

After adding the flow-server-production-mode dependency, the application no longer starts

One potential cause of this problem is that the build-frontend of the flow-maven-plugin was not executed, either because the plugin is missing from the pom.xml or it is missing configuration. To fix this, add the flow-maven-plugin to your maven build block (make sure it is visible in your production mode profile), and enable the build-frontend goal.