Deploying a Vaadin Flow Application on Heroku

In this final chapter in the series, you learn how to deploy a Spring Boot application on Heroku.

This chapter covers:

Vaadin production builds.
Configuring PostgreSQL for production.
Creating a Heroku account.
Installing the Heroku CLI.
Creating and deploying a Heroku application.

Tip	Vaadin can be deployed on any cloud provider You can also deploy your application onto other cloud platforms. Read the Cloud Deployment tutorials for more options.

Preparing the Application for Production

It is important to build a separate production-optimized version of the application before deploying it. In development mode, Vaadin has a live-reload widget, debug logging, and uses a quick, but unoptimized, frontend build that includes source maps for easy debugging. Unoptimized frontend bundles can contain several megabytes of JavaScript.

The pom.xml file includes a production profile configuration that prepares an optimized build which is ready for production.

Using a PostgreSQL Database in Production

During development, the application has used an in-memory H2 database. This is convenient and works well for a single user. In production, you want to use something more robust and persistent. Heroku’s free tier supports PostgreSQL, so can configure your application to use that.

First, add the PostgreSQL dependency in the production profile of pom.xml:

<profile>
 <id>production</id>
 <!-- Omitted -->
 <dependencies>
   <dependency>
     <groupId>org.postgresql</groupId>
     <artifactId>postgresql</artifactId>
   </dependency>
 </dependencies>
</profile>

Next, configure how JPA should handle schema generation. Add the following two properties to the end of application.properties.

spring.jpa.generate-ddl=true
spring.jpa.hibernate.ddl-auto=create-drop

Warning

Avoid data loss

This setup recreates the database on every deployment. If you are working with real data, you should use ddl-auto=none and instead use a database migration tool like Liquibase or Flyway, so you can evolve the database schema without losing data.

Building a Production-Optimized JAR

Build the application with the production profile:

mvn clean package -Pproduction

This builds a production-optimized JAR file in the target folder.

Creating a Heroku Account and Installing the Heroku CLI

Complete the following steps to create a Heroku account and install the Heroku CLI.

Go to https://signup.heroku.com/, create a new account, and verify your email.
Go to https://devcenter.heroku.com/articles/heroku-cli and follow the instructions for installing the CLI on your operating system.

Deploying a Vaadin Application to Heroku

Use the Heroku CLI to create and deploy your application.

Log in:
```
heroku login
```
Install the Heroku Java plugin:
```
heroku plugins:install java
```
The project uses Java 11, whereas Heroku expects Java 8 projects by default. To ensure that Heroku would run a Java 11 environment, create a system.properties file under the project’s root directory with the following content:
```
java.runtime.version=11
```
Create a new application. Replace APPNAME with a name of your choice. APPNAME is part of the URL, like https://APPNAME.herokuapp.com, so choose a name that is unique and easy to remember.
```
heroku create APPNAME
```
Enable the PostgreSQL plugin for the newly created application.
```
heroku addons:create heroku-postgresql -a APPNAME
```
Deploy the production-optimized JAR file you created in the previous section.
```
heroku deploy:jar target/flowcrmtutorial-1.0-SNAPSHOT.jar -a APPNAME
```
Open the application in your browser.
```
heroku open
```
View the application logs, if anything went wrong.
```
heroku logs --tail
```

Conclusion and Next Steps

Congratulations. You have now built a full-stack PWA and deployed it to Heroku.

Did you like the tutorial? Did you find anything that did not seem right? Reach out to me on Twitter @marcushellberg or Vaadin’s Discord chat server.

Now that you have a running application, you can use it to experiment further or as a foundation for your next idea.

Happy hacking, and ping us @vaadin on Twitter to show off the cool stuff you have built!

Helpful Links

Download free e-book.
The complete guide is also available in an easy-to-follow PDF format.

Open in a
new tab
export class RenderBanner extends HTMLElement {
  connectedCallback() {
    this.renderBanner();
  }

  renderBanner() {
    let bannerWrapper = document.getElementById('tocBanner');

    if (bannerWrapper) {
      return;
    }

    let tocEl = document.getElementById('toc');

    // Add an empty ToC div in case page doesn't have one.
    if (!tocEl) {
      const pageTitle = document.querySelector(
        'main > article > header[class^=PageHeader-module--pageHeader]'
      );
      tocEl = document.createElement('div');
      tocEl.classList.add('toc');

      pageTitle?.insertAdjacentElement('afterend', tocEl);
    }

    // Prepare banner container
    bannerWrapper = document.createElement('div');
    bannerWrapper.id = 'tocBanner';
    tocEl?.appendChild(bannerWrapper);

    // Banner elements
    const text = document.querySelector('.toc-banner-source-text')?.innerHTML;
    const link = document.querySelector('.toc-banner-source-link')?.textContent;

    const bannerHtml = `<div class='toc-banner'>
          <a href='${link}'>
            <div class="toc-banner--img"></div>
            <div class='toc-banner--content'>${text}</div>
          </a>
        </div>`;

    bannerWrapper.innerHTML = bannerHtml;

    // Add banner image
    const imgSource = document.querySelector('.toc-banner-source .image');
    const imgTarget = bannerWrapper.querySelector('.toc-banner--img');

    if (imgSource && imgTarget) {
      imgTarget.appendChild(imgSource);
    }
  }
}

01A3D231-9D1B-4D4D-A6BB-CB4D37E01CBE

Documentation