tutorial-production-mode-basic.asciidoc

title	order	layout
Preparing your application for Production	1	page

Preparing your application for Production

Simple steps for production mode build

By default (such as when downloading a project from vaadin.com/start), Vaadin applications are set up to run in the development mode. This requires a bit more memory and CPU power, but enables easier debugging. When deploying your app to your users, you will want to switch to the production mode instead.

The main difference between the development and production modes is that in the development mode Vaadin uses Webpack to serve JavaScript files to the browser, instead of the Java server the app is running on. This is so that if you change a JS or CSS file, your changes are picked up and served automatically. When in production mode, you do not want this extra overhead since the files will not change; it is more efficient to prepare JavaScript and CSS files once, during build, and let one server (the Java Server) serve all requests. At the same time, the client resources can be optimized and minified to reduce the load on the network and browser even further.

All Vaadin POM files downloaded from vaadin.com have the following built-in Maven configuration for creating a production mode build:

pom.xml

<profiles>
    <profile>
        <id>production</id>
        <properties>
            <vaadin.productionMode>true</vaadin.productionMode>
        </properties>

        <!--
		.. configuration depending on environment ..
		 -->
         <executions>
             <execution>
                 <goals>
                     <goal>build-frontend</goal>
                 </goals>
                 <phase>compile</phase>
             </execution>
         </executions>
		 <!--
		 .. more configuration ..
		 -->
    </profile>
</profiles>

The actual content of the profile will depend on what environment your app is running in, but all of the variations do two things:

1. Setting the property vaadin.productionMode to true

2. Calling the Maven goal vaadin:build-frontend

To create a production build, you can call mvn clean package -Pproduction. This will build a JAR or WAR file with all the dependencies and transpiled front end resources, ready to be deployed. The file can be found in the target folder after the build completes.

If you do not have the the production Maven profile in your POM file, the easiest way to get it is to get a project base from https://vaadin.com/start matching your environment (Spring boot, Jakarta EE, or plain Java), and copy the production profile from the downloaded POM file.

Having production mode be a separate Maven profile is recommended so that you do not get any unexpected problems due to production settings when running in the development mode.

Note	If your OS is 64-bit, please make sure to use a 64-bit JDK installation as well. There are known issues when running the build on 32-bit JDKs in 64-bit environments.

Note	For an older project running in the compatibility mode (bower mode), please see the V10 documentation about the production mode build.

What Is Transpilation and Bundling

Transpilation in Vaadin means converting all ES6 JavaScript to ES5 JavaScript format for older browsers. All Vaadin components are written using ES6, and consist of several JavaScript and CSS files. Transpilation makes sure this newer JavaScript code also works in older browsers, such as IE11.

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.

During the build, minimization is done to make the files smaller. When minifying code, it is often obscured, which makes it harder to read, hence this is not done in the development mode.

Bundling is an optimization where we merge multiple files to a single collection so that the browser doesn’t need to request so many files from the server. This makes the application load faster.