Skip to content
This repository has been archived by the owner on May 6, 2021. It is now read-only.

Latest commit

 

History

History
97 lines (64 loc) · 5.32 KB

tutorial-production-mode-advanced.asciidoc

File metadata and controls

97 lines (64 loc) · 5.32 KB
Raw
title order layout
Advanced Production Mode Topics
5
page

Advanced Production Mode Topics

Splitting the Webpack Bundle Into Multiple Chunks

This is an upcoming feature of a Vaadin Platform 14.x minor release, probably during 2020. You can follow & comment on vaadin/flow#5537 if this is important for you.

Plugin Goals and Goal Parameters

Here we describe the maven plugin goals and their usage.

prepare-frontend

This goal validates whether the node and npm tools are installed and not too old (node version 10 or later and npm version 5.6 or later), and also installs them automatically to the .vaadin folder in the user’s home directory if they are missing. If they are installed globally but too old, there will be an error message suggesting to install newer versions instead. Node.js is needed to run npm for installing frontend dependencies and webpack which bundles the frontend files served to client.

Note
 Automatic installation of Node.js and npm is available since Vaadin 14.2. Older platform versions in the 14 series requires manual installation, either globally or in the project directory using a Maven plugin.

In addition, it visits all resources used by the application and copies them under node_modules folder so they are available when webpack builds the frontend. It also creates or updates package.json, webpack.config.json and webpack.generated.json files.

Goal parameters

  • includes (default: **/*.js,**/*.css): Comma separated wildcards for files and directories that should be copied. Default is only .js and .css files.

  • npmFolder (default: ${project.basedir}): The folder where package.json file is located. Default is project root folder.

  • webpackTemplate (default: webpack.config.js): Copy the webapp.config.js from the specified URL if missing. Default is the template provided by this plugin. Set it to empty string to disable the feature.

  • webpackGeneratedTemplate (default: webpack.generated.js): Copy the webapp.config.js from the specified URL if missing. Default is the template provided by this plugin. Set it to empty string to disable the feature.

  • generatedFolder (default: ${project.build.directory}/frontend/): The folder where Flow will put generated files that will be used by Webpack.

  • require.home.node (default: false): Available since Vaadin 14.2. If set to true, always prefer Node.js automatically downloaded and installed into the .vaadin directory in the user’s home.

build-frontend

This goal builds the frontend bundle. This is a complex process involving several steps:

  • update package.json with all @NpmPackage annotation values found in the classpath and automatically install these dependencies.

  • update the JavaScript files containing code for importing everything used in the application. These files are generated in the target/frontend folder, and will be used as entry point of the application.

  • create webpack.config.js if not found, or updates it in case some project parameters have changed.

  • generate JavaScript bundles, chunks and transpile to ES5 using webpack server. Target folder in case of war packaging is target/${artifactId}-${version}/build and in case of jar packaging is target/classes/META-INF/resources/build.

Goal parameters

  • npmFolder (default: ${project.basedir}: The folder where package.json file is located. Default is project root folder.

  • generatedFolder (default: ${project.build.directory}/frontend/): The folder where Flow will put generated files that will be used by Webpack.

  • frontendDirectory (default: ${project.basedir}/frontend): A directory with project’s frontend source files.

  • generateBundle (default: true): Whether to generate a bundle from the project frontend sources or not.

  • runNpmInstall (default: true): Whether to run pnpm install (or npm install, depending on pnpmEnable parameter value) after updating dependencies.

  • generateEmbeddableWebComponents (default: true): Whether to generate embeddable web components from WebComponentExporter inheritors.

  • optimizeBundle (default: true): Whether to include only frontend resources used from application entry points (the default) or to include all resources found on the class path. Should normally be left to the default, but a value of false can be useful for faster production builds or debugging discrepancies between development and production mode. This configuration is available only in Vaadin Platform 14.1 and newer.

  • pnpmEnable (default: false): Whether to use the pnpm or npm tool to handle frontend resources. By default npm is used. This configuration is available only in Vaadin 14.2 and newer.

Production Mode Troubleshooting

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

One likely 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.