Trouble with @JavaScript annotation (not deploying assets)


I am having trouble getting the @JavaScript annotation to work with an AbstractJavaScriptExtension class (also tried an AbstractJavaScriptComponent) it just does not seem to be picked up.

I have followed what I believe are all the correct rules around file naming, Googled and found lots of references, but most of them seem to suggest that what I have should work.

The problem is when looking in say Chrome, the “APP/PUBLISHED” dir does not appear and nor do my js files.

What I have done is as follows:

Started from a archetype with the latest version:

mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion=8.1.4

Added the following class to the same location as the UI (in my case, com.ccfraser.vaadin.testing)

package com.ccfraser.vaadin.testing;

import com.vaadin.annotations.JavaScript;
import com.vaadin.server.AbstractJavaScriptExtension;

public class TestJS extends AbstractJavaScriptExtension {
public void test() {
[/code]Added the following test.js file to the resources dir with the same path:

window.com_ccfraser_vaadin_testing_TestJS = function() { this.test = function() { window.alert("Hi, I am here"); } } Now my java script knowledge is not that great, but whether it works or not, it should still get deployed based on the @JavaScript annotation as far as I can tell.

I also make a small change to the UI class:

button.addClickListener( e -> { layout.addComponent(new Label("Thanks " + name.getValue() + ", it works!")); TestJS testJS = new TestJS(); testJS.test(); }); I then do a “mvn package jetty:run” and I would expect to see the “APP…” dir in chrome but I don’t.

I would also expect that when I hit the “Click Me” button, that something would happen, either an alert or an error in the Chrome console… but I get neither.

If the Javascript failed to deploy I would expect to see an error when starting jetty… but I don’t.

As I said at the beginning, it is as if the @JavaScript annotation did not get processed… but then I would still expect some error in the Chrome console as I would then be calling a non existing javascript function.

Any help appreciated… been Googling and trying lots of things for a few hours now…


A quick and dirty way to check it out: create a new project using the
. That should give you the correct setup and you can model that to your own app.


Well, thanks for that, I am not sure what is different (other than the Vaadin website which seems to have had an update in the last couple of hours :-)), but your javascript example works.

Chrome shows the APP/PUBLISHED directory, not sure what is different from mine, but at least I have a fairly simple example template to try and figure out what has happened :slight_smile:

Thanks again,

Good luck! :slight_smile: