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
<profiles>
<profile>
<id>production</id>
<dependencies>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>flow-server-production-mode</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-maven-plugin</artifactId>
<version>${vaadin.version}</version>
<executions>
<execution>
<goals>
<goal>copy-production-files</goal>
<goal>package-for-production</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
</profile>
</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
<plugin>
<groupId>org.eclipse.jetty</groupId>
<artifactId>jetty-maven-plugin</artifactId>
<version>${jetty.version}</version>
<configuration>
<webAppConfig>
<resourceBases>
<resourceBase>${transpilation.output}</resourceBase>
</resourceBases>
</webAppConfig>
</configuration>
</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
<executions>
<execution>
...
<configuration>
<transpileOutputDirectory>${transpilation.output}</transpileOutputDirectory>
</configuration>
</execution>
<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