Happy path: Publishing a Web Component to Vaadin Add-on Directory
Tags: vaadin, webcomponents, java
Published: 2023-01-04 13:23:51

---
title: Happy path: Publishing a Web Component to Vaadin Add-on Directory
published: true
description: 
tags: vaadin, webcomponents, java
series: Creating Vaadin Components
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lj4omx7qb9fkzqqluddp.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-01-04 13:22 +0000
---

Did you find an excellent custom element that would make sense in your [Vaadin](https://vaadin.com/) Java web application? Maybe that is a web component that you previously published yourself in [npmjs.com](https://www.npmjs.com/package/@parttio/simple-timeline)? 

![Build and publish Vaadin add-on](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lj4omx7qb9fkzqqluddp.png)

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](https://vaadin.com/directory-beta/component/simpletimeline). Look at [Part 1](https://dev.to/samiekblad/happy-path-publishing-a-lit-based-custom-element-to-npmjscom-3n67), 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
```

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](https://www.npmjs.com/package/@axa-ch/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"
```

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
```
This runs  the default `mvn jetty:run` goal starts a local Jetty dev server in [localhost:8080](http://localhost:8080)

To run the browser-based integration tests, you can use:
```
mvn verify -Pit
```

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](https://semver.org/), and it is good practice to start from `1.0.0`

```
mvn versions:set -DnewVersion=1.0.0
```
Then you can build the full zip package from the project:

```
mvn -Pdirectory clean install
```
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!