DEV Community

Sami Ekblad
Sami Ekblad

Posted on • Edited on

3

Happy path: Publishing a Web Component to Vaadin Add-on Directory

Did you find an excellent custom element that would make sense in your Vaadin Java web application? Maybe that is a web component that you previously published yourself in npmjs.com?

Build and publish Vaadin add-on

In this article, I'll go through the steps of building a Java component from a previously published custom element in npmjs.com. This article is Part 2 of a two-article series I wrote when creating a SimpleTimeline component for Vaadin. Look at Part 1, how to create and publish a web component.

This article is not exactly a tutorial; it is written more as a quick "command reference" on how to do the things needed to be done when you create, build and share a Vaadin add-on.

gh repo create MyVaadinAddon --public -p vaadin/npm-addon-template
gh repo clone MyVaadinAddon
Enter fullscreen mode Exit fullscreen mode

Using Visual Studio Code and Dev Containers is an excellent way to create an isolated environment for development. I used the Alpine "Java" (16-bullseye) environment as the basis here, with Git and Maven installed.

The development of the Java component

As I said, this is not a tutorial, and I'm not going into the details of this one. An example component implementation of axa-input-text in the template needs renaming and editing. Here is an easy trick to check that you have renamed everything, you can grep through the files:

grep -r "mygroup"
grep -r "AxaInputText"
grep -r "axa-input-text"
Enter fullscreen mode Exit fullscreen mode

When coming up new name some practical tips:

  • Add-on name: Use Java naming. Spaces are ok, but single widget add-ons could just use the widget class name as an add-on name and project name: MyVaadinAddon.
  • Maven groupId: Group ID must start with org.vaadin.addons. Just use lowercase add-on name if nothing else, like here org.vaadin.addons.myvaadinddon
  • Java package name: Use the same as Maven groupId.

You can run the project simply using the following:

mvn
Enter fullscreen mode Exit fullscreen mode

This runs the default mvn jetty:run goal starts a local Jetty dev server in localhost:8080

To run the browser-based integration tests, you can use:

mvn verify -Pit
Enter fullscreen mode Exit fullscreen mode

This will run the tests using a special build profile with extra configuration and dependencies needed to run the browser-based tests.

Publishing to the add-on directory

Once you are ready to go public, you should first give a meaningful version number. The version number needs to follow SemVer, and it is good practice to start from 1.0.0

mvn versions:set -DnewVersion=1.0.0
Enter fullscreen mode Exit fullscreen mode

Then you can build the full zip package from the project:

mvn -Pdirectory clean install
Enter fullscreen mode Exit fullscreen mode

This command creates a binary package with Javadoc and source code compatible with Directory and Maven repositories.

The first time you publish, you need to go to https://vaadin.com/directory/my-components?uploadNewComponent to upload the zip file.

Finalizing the developer experience

To make the Vaadin Directory entry pleasant, some things that are good to have.

  • Icon: 512x512 size image will appear in the search results and links.
  • Summary: Briefly explain the use case for the component. Like 'Build a nice experience for web apps using this one-liner.'
  • Code examples: Some brief yet complete code examples get your users quickly on the right track.

Have a safe trip!

Billboard image

The fastest way to detect downtimes

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitoring.

Get started now

Top comments (0)

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay