Vaadin Part 1 – Create Vaadin Framework project + Maven 3 + Jetty Server

1.) First , get the vaadin plugin to your eclipse  : https://vaadin.com/eclipse

  • On Your Eclipse, Select Install New Software… from the Help -menu
  • Add new update site:
  • In eclipse , i use latest eclipse, eclipse mars, i’ll add http://vaadin.com/eclipse.

vaadin.jpg

2.) For installations, java version are jdk 8, for lower java will not support it. Below is the tools need to have:

2.1.) For Jetty Server part , get the Jetty plugin, in Help > Eclpse Marketplace, find plugin Run jetty Run.

runjettyrun.jpg

3.) Creating a project from an Archetype..

  • open CMD , and your folder  project , add this command and Enter :mvn archetype:generate -DarchetypeGroupId=com.fndongDarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion=LATEST

vaadin_proj1.jpg

  • groupId : com.fndong
  • artifactId : VaadinProjFirst
  • Version : 1
  • package: com.fndong.controller

4.) From Your Eclipse Mars, Import the project – VaadinProjFirst

vaadin2.jpg

figure 3.2.  A New Vaadin Project with Maven

2. Compiling and running using command prompt, go to the path project – VaadinProjFirst :

2.1.) Deployed the Application – VaadinProjFirst , it must be compiled and packaged as a WAR package. You can do this with the package goal as follows:

$ mvn package

2.2.) To runVaadin applications with Maven is to use the light-weight Jetty web server. After compiling the package, all you need to do is type:

$ mvn jetty:run

 2.3) Starts the jetty server in port 8080 and deploy to the application. You can open it in a web browser – http:localhost:8080/VaadinProjFirst

2.4.) Error on when load the project in browser.

Failed to load the widgetset: ./VAADIN/widgetsets/com.fndong.controller.MyAppWidgetset/com.fndong.controller.MyAppWidgetset.nocache.js?1458707674522

– For my solution: Check the Deployment Assembly, add the maven dependency.checkDeploymentAssembly.jpg

  • After Add Maven dependencies , try to maven clean and build by using – mvn package.

$ mvn package

 

  • Then run with jetty server  again .

$ mvn jetty:run

2.5.) Result on Browser to test our First Vaadin Page with Jetty Server.

success_vaadin

 

GREAT JOB MAN !

NEXT PART : Vaadin Part 2 – Creating A document viewer application