Vaadin 24.4 integrates with React, unifies Flow and Hilla development, and more!
Blog

Vaadin on Heroku

By  
A.Mahdy AbdelAziz
·
On Feb 1, 2018 11:11:00 AM
·

A big part of my time I get busy creating Vaadin tutorials, and I always wish I can deploy them somewhere publicly for demo purposes. But that has not always been easy, since I need a backend server ready for Vaadin Framework. I also need to occasionally update the server, whenever I make changes in my app.

 

If you are facing similar problems, that is you want to quickly deploy your Vaadin app for a showcase, proof of concept, or maintain a demo of your Github hosted app; then I have some good news for you. There is a very easy solution offered by Heroku cloud, and after trying it now, I’m impressed how dead simple it is. Probably the most tedious task is to sign up for a free account, but then after that all the steps are easy and straightforward. Here is what I’ve done:

 

Prepare the project

Your project needs to be prepared for Heroku. Since we are talking about a demo and not a production app, we also will need some sort of application server runner to initiate the application server. I’ve used jetty-runner and placed some dependencies in the pom.xml file.

We will also need the so called Procfile to tell Heroku the nature of the app, and how to run it in its servers.

 

Create a Heroku app

You have a Heroku account, you have a Vaadin project ready, let’s mix them together. After logging into Heroku, click on “New”, then choose “Create new app” and give it a name:

 

Once the app has been created, you get redirected to the deploy section. Scroll a bit down and select the location of your source code. It would be ideal if it’s a Git repository for smooth continuous deployment. Here I’m using Github, search for the repo:

Then connect it:

 

And now automatic deployment comes handy. Everytime you push something into the specified branch, it will get re-deployed on Heroku so your app will always be up to date:

 

 

If you can’t wait, and you want to test it out right away, or if you want manual deployment, then all you have to do is to scroll a bit more down and select the Git branch, then click on “Deploy Branch”.

 

 

That’s it! Once deployment is successful, you can open the app right away using the given subdomain under herokuapp.com.

Limitation:

JavaEE based applications won’t be that easy to deploy since jetty-runner is not enough. A container might be needed in this case.

A.Mahdy AbdelAziz
AMahdy is an international technical speaker, Google developer expert (GDE), trainer and developer advocate. Passionate about Web and Mobile apps development, including PWA, offline-first design, in-browser database, and cross platform tools. Also interested in Android internals such as building custom ROMs and customize AOSP for embedded devices. AMahdy.net
Other posts by A.Mahdy AbdelAziz