Developer Guide UI

Developer Guide Commons UI

Develop ERP Application

Run From Command Line

To run quickly from the command-line in development mode:

./gradlew run (1)
1 Your app will be running on http://localhost:8080.

Run From IDE

  • Run ./gradle vaadinPrepareFrontend in the project, to configure Vaadin for npm mode.

  • Run/Debug the EmbeddedJetty class as an application (run the _main()- method). The app will use npm to download all javascript libraries (will take a long time) and will start in development mode. Your app will be running on http://localhost:8080.

If in trouble, you can find and kill the server on a specific port address, here 8080 with the following commands.

lsof -i :8080 | grep LISTEN (1)
ps -ef pid
kill pid (2)
1 to get the pid of process using port 8080
2 kill the process using port 8080

Deploy ERP Application

Packaging for production

To package in production mode:

/gradlew build -PproductionMode=true

The project packages itself as a zip file with dependencies. The file is in build/distributions/net.tangly.ui-X.Y.Z.zip

Running in production mode

To build and run the zip file:

gradle build -PproductionMode=true (1)
cd build/distributions/
unzip net.tangly.ui-X.Y.Z.zip
cd net.tangly.ui-X.Y.Z/bin
export NET_TANGLY_UI_OPTS=--enable-preview (2)
./net.tangly.ui (3)
1 Create the distribution as a zip file with all dependencies for production
2 Enable preview mode for the JVM to support preview features
3 Head to localhost:8080/

If you do not have nodeJS installed in your CI environment, you can use the Vaadin plugin to download node.js for you beforehand:

gradle clean vaadinPrepareNode build -Pvaadin.productionMode

Running in Docker

To build and package this project as a docker image:

gradle build -Pvaadin.productionMode=true
unzip build/distributions/build/distributions/net.tangly.ui-X.Y.Z.zip
# modify run shell and update NET_TANGLY_UI_OPTS="--enable-preview" or JVM_ARGS="-enable-preview"
docker build --no-cache -t test/erp-tangly:latest . (1)
docker run --rm -ti -p8080:8080 test/erp-tangly (2)
1 Docker will run the Dockerfile and build a docker image. Beware the dot tells docker that the Dockerfile is in the local directory
2 Run the image, head to localhost:8080/

Tips and Tricks

  • The application works well with Google Chrome, Safari, and Firefox. We have trouble with iPad Safari. The menu bar and button bars are not always visible, and scrolling is slow and bumpy.

  • Using addAndExpand(Components …​) instead of add(Components …​) displays the button bar of a vertical component in iPad Safari.