Docs

Docs

Build for Production

Learn how to make a production build.

Up to this point, you’ve been running the application in development mode. As you’re now ready to deploy it to production, you have to make a production build. The production build first gathers all of the necessary frontend resources and dependencies. It then transpiles, minimizes and bundles them to make the application load faster.

Maven Plugin Configuration

In a Vaadin application, you’d use the Vaadin maven plugin to make a production build. Typically, this is done by activating the production profile, like this:

./mvnw clean package -Pproduction

In addition to configuring the plugin, you also have to exclude the development server bundle since it contains features that aren’t used in production.

Vaadin starter projects have the production build configured initially. The tutorial starter that you downloaded also has it configured. Still, you should know how to configure it in case you’re ever in a situation in which you’re adding Vaadin to an existing Maven project.

If you open the pom.xml file, you’ll find the following:

<profiles>
    <profile>
        <id>production</id> 1
        <dependencies>
            <dependency>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-core</artifactId>
                <exclusions>
                    <exclusion> 2
                        <groupId>com.vaadin</groupId>
                        <artifactId>vaadin-dev</artifactId>
                    </exclusion>
                </exclusions>
            </dependency>
        </dependencies>
        <build>
            <plugins>
                <plugin>
                    <groupId>com.vaadin</groupId>
                    <artifactId>vaadin-maven-plugin</artifactId>
                    <version>${vaadin.version}</version>
                    <executions>
                        <execution>
                            <goals>
                                <goal>build-frontend</goal> 3
                            </goals>
                            <phase>compile</phase> 4
                        </execution>
                    </executions>
                </plugin>
            </plugins>
        </build>
    </profile>
</profiles>

  1. The production build is activated by the production profile.

  2. Exclude the development server module.

  3. This goal will generate the production bundle.

  4. Bind the execution to the compile phase to make sure the production bundle gets built together with the rest of the application.

You can find more information about production builds in the Flow documentation on Production Build (that as of version 24.4 also applies to Hilla).

Try It!

You can now make your first production build of your application. Run the following command to start the build:

./mvnw clean package -Pproduction

Once the build has finished, check the target directory. You should find a JAR file called unified-chat-tutorial-1.0-SNAPSHOT.jar. Start the application from the JAR by running the following command:

java -jar unified-chat-tutorial-1.0-SNAPSHOT.jar

The application should start up in production mode. Try it out by navigating to: http://localhost:8080