Production Mode and Cloud Deployment to Heroku

In this last chapter, you prepare the CRM application for production and deploy it to Heroku. The tutorial uses Heroku because it’s simple and comes with a free tier that does not require a credit card when signing up. The free tier also includes PostgreSQL support.

Tip	You can deploy Vaadin applications on any cloud provider You can deploy Vaadin applications on any cloud provider or hosting service that supports Java. The project also contains a `Dockerfile` that you can use for container deployments. Learn more about deploying to different cloud providers.

This chapter covers:

Vaadin production builds.
Creating a Heroku account.
Installing the Heroku CLI.
Creating and deploying a Heroku app.

Preparing the Application for Production

It’s 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 build includes a production profile configuration that prepares an optimized build that’s ready for production.

Using a PostgreSQL Database in Production

During development, the application has used an in-memory H2 database. It 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 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.

Configure the correct Java version:

echo "java.runtime.version=11" > system.properties

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 app. Replace APPNAME with a name of your choice. APPNAME is part of the URL, like https://APPNAME.herokuapp.com, so choose a name that’s unique and easy to remember.
```
heroku create APPNAME
```

Create a secret key for your application:

heroku config:set APP_SECRET=$(openssl rand -base64 32)

Enable the PostgreSQL plugin for the newly created app:
```
heroku addons:create heroku-postgresql -a APPNAME
```
Deploy the production-optimized JAR file you created in the previous section.
```
heroku deploy:jar target/fusioncrmtutorial-1.0-SNAPSHOT.jar -a APPNAME
```
Open the application in your browser.
```
heroku open
```
View the application logs and see if anything goes 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 didn’t 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 use it as a foundation for your next idea.

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

Docs