Docs

Docs

Troubleshooting Production Mode

Guidance for when having problems taking Hilla applications to production.

This article offers guidance in the event that you have problems taking Hilla applications to production.

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

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

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

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

{
  "compatibilityMode": false,
  "productionMode": true,
  "enableDevServer": false,
  "chunks": {
    "fallback": {
      "jsModules": [
        "@vaadin/vaadin-grid/src/vaadin-grid-tree-toggle.js",
// etc etc
        "frontend://ironListConnector.js"
      ],
      "cssImports": [
      ]
    }
  }
}

Notice that the productionMode property is set to true.

It’s very important to have this file on the class path in production mode only 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 class path, or similar.

Depending on the outcome, Vaadin may throw an exception at runtime:

Failed to determine project directory for dev mode...

Or it might read like this:

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. If so, the Vaadin configuration is then governed by a different set of rules (e.g., the project.basedir property or similar).

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

If the file is present multiple times on the class path, Vaadin tries to choose the right one, which should come from the main project. Sometimes it’s not possible to do so. In that case, Vaadin prints a warning message and chooses the first flow-build-info.json file, which depends on the class path 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 add-on incorrectly includes the flow-build-info.json file in the JAR file. This is a bug in the add-on packaging that needs to be fixed. The flow-build-info.json file should be removed from the add-on’s JAR file.

For the reasons stated above, be sure to have the flow-build-info.json file on the class path only once, and always coming from your main project.

A file named META-INF/VAADIN/config/stats.json is generated by the 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. Hence, webpack is responsible for packaging everything from src/main/frontend/ and node_modules into the pre-compiled 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):

├── vaadin-2-18d67c4ccff7e93b081a.cache.js
├── vaadin-2-18d67c4ccff7e93b081a.cache.js.gz
├── vaadin-3-b0147df339bf18eb7618.cache.js
├── vaadin-3-b0147df339bf18eb7618.cache.js.gz
├── vaadin-4-ee1d2e45569f7eca4292.cache.js
├── vaadin-4-ee1d2e45569f7eca4292.cache.js.gz
├── vaadin-5-5e9292474e82143d0a27.cache.js
├── vaadin-5-5e9292474e82143d0a27.cache.js.gz
├── vaadin-bundle-19a00eae62ad7cddd291.cache.js
├── vaadin-bundle-19a00eae62ad7cddd291.cache.js.gz
├── vaadin-bundle.es5-b1c1a3cc054c62ad7949.cache.js
├── vaadin-bundle.es5-b1c1a3cc054c62ad7949.cache.js.gz
└── webcomponentsjs
    ├── bundles
    │   ├── webcomponents-ce.js
    │   ├── webcomponents-ce.js.map
    │   ├── webcomponents-sd-ce.js
    │   ├── webcomponents-sd-ce.js.map
    │   ├── webcomponents-sd-ce-pf.js
    │   ├── webcomponents-sd-ce-pf.js.map
    │   ├── webcomponents-sd.js
    │   └── webcomponents-sd.js.map
    ├── custom-elements-es5-adapter.js
    ├── LICENSE.md
    ├── package.json
    ├── README.md
    ├── src
    │   └── entrypoints
    │       ├── custom-elements-es5-adapter-index.js
    │       ├── webcomponents-bundle-index.js
    │       ├── webcomponents-ce-index.js
    │       ├── webcomponents-sd-ce-index.js
    │       ├── webcomponents-sd-ce-pf-index.js
    │       └── webcomponents-sd-index.js
    ├── webcomponents-bundle.js
    ├── webcomponents-bundle.js.map
    └── webcomponents-loader.js

Common Issues

A common problem that may occur is that after adding the flow-server-production-mode dependency, the application no longer starts.

One potential cause of this is that the build-frontend of the flow-maven-plugin wasn’t executed, either because the plugin is missing from the pom.xml or it’s missing configuration.

To fix this, add flow-maven-plugin to your Maven build block (make sure it’s visible in your production mode profile), and enable the build-frontend goal.