Taking your Application into Production

Simple steps for production mode build

To get your application prepped for production you want to add the vaadin-maven-plugin into the pom.xml and then create a production mode profile:

pom.xml

  1. <profiles>
  2.     <profile>
  3.         <id>production</id>
  5.         <dependencies>
  6.             <dependency>
  7.                 <groupId>com.vaadin</groupId>
  8.                 <artifactId>flow-server-production-mode</artifactId>
  9.             </dependency>
  10.         </dependencies>
  12.         <build>
  13.             <plugins>
  14.                 <plugin>
  15.                     <groupId>com.vaadin</groupId>
  16.                     <artifactId>vaadin-maven-plugin</artifactId>
  17.                     <version>${vaadin.version}</version>
  18.                     <executions>
  19.                         <execution>
  20.                             <goals>
  21.                                 <goal>copy-production-files</goal>
  22.                                 <goal>package-for-production</goal>
  23.                             </goals>
  24.                         </execution>
  25.                     </executions>
  26.                 </plugin>
  27.             </plugins>
  28.         </build>
  29.     </profile>
  30. </profiles>

The profile is recommended so that you don’t get any unexpected problems due to production settings when running in development mode.

Note
For users who use Vaadin Flow only, you can use flow-maven-plugin as artifactId and match the version number with current Flow version

After this all that is needed is to run mvn clean package -Pproduction. This will then do transpilation, minimisation and bundling on the application resources and build a production ready war.

The simplest way to get a production ready setup is to get a project base from https://vaadin.com/start

To locally run the application in production mode with jetty you should add to the production profile:

XML

  1. <plugin>
  2.     <groupId>org.eclipse.jetty</groupId>
  3.     <artifactId>jetty-maven-plugin</artifactId>
  4.     <version>${jetty.version}</version>
  5.     <configuration>
  6.         <webAppConfig>
  7.             <resourceBases>
  8.                 <resourceBase>${transpilation.output}</resourceBase>
  9.             </resourceBases>
  10.         </webAppConfig>
  11.     </configuration>
  12. </plugin>

With this the server can be started with mvn jetty:run -Pproduction.

Note
transpilation.output should by default be ${project.build.directory}/${project.build.finalName}/.

When not using the default transpilation.output target the vaadin-maven-plugin will require the configuration:

XML

  1. <executions>
  2.     <execution>
  3.         ...
  4.         <configuration>
  5.             <transpileOutputDirectory>${transpilation.output}</transpileOutputDirectory>
  6.         </configuration>
  7.     </execution>
  8. <executions>

What is transpilation and bundling

Transpilation in Flow means converting all ES6 JavaScript to ES5 JavaScript format for older browsers which for us is IE 11 and Safari 9.

Note
IOS 10 has a known issue with let bindings in for loops are incorrectly treated as function-scoped instead of block scoped, in this case, all browsers running on it need the transpilation, too.

Minimisation is done to make the file smaller. When minifying the code of also often obscured making it harder to read.

Bundling is an optimisation where we merge multiple files to a collection so that the browser doesn’t need to request so many files making loading faster.

Bundling can also be made to create multiple bundle fragments. For information on this see Customizing Bundling