Vaadin web components in static HTML application

Flow
1

Hello,

I’ve been using Vaadin (JAVA) for a while now. It’s great, being served from a Tomcat servlet container. For another project I need to develop a “nice” user-interface that can be served from a simple HTTP server (just serving files, no servlet container or anything). I was thinking of using the Vaadin web components.

Hence, I’ve been experimenting a bit with these. So I learned that these components use “bare Javascript import statements”, which are not supported by browsers. This is supported by node.js (running server side) though. A solution could be to take the web component Javascript code and modify all input statements to be compliant to what is supported by a browser. However … modifying code like this is not a “good software practice” and question is whether it is even allowed by the Vaadin web component’s license.

If anybody has suggestions/feedback … very appreciated.

2

Hi. We recommend using ES dev server for the development. It handles the bare import specifiers transform, as well as transpiling code for older browsers (that don’t have ES modules implemented).

Please see https://open-wc.org/developing/es-dev-server.html for documentation on how to use it.

The server is meant to be used for development only, and for production build you could have a very simple build with [Rollup]
(https://open-wc.org/building/#rollup) that would handle the imports, minify JS and HTML etc.

3

Hello Serhii,

Thanks a lot for your reply. I didn’t know something like webpack and rollup existed. Just for your info … I ended up using only webpack. Webpack allows both packaging and minification:

  • Install webpack and the babel minify pluging using NPM:
npm install --save-dev webpack webpack-dev-server webpack-cli html-webpack-plugin
npm install babel-minify-webpack-plugin --save-dev
  • Create a JS file including the web components I need:
import '@vaadin/vaadin-button';
import '@vaadin/vaadin-text-field';
import '@vaadin/vaadin-checkbox';
import '@vaadin/vaadin-combo-box';
import '@vaadin/vaadin-form-layout';
import '@vaadin/vaadin-ordered-layout/vaadin-vertical-layout';
import '@vaadin/vaadin-radio-button';
import '@vaadin/vaadin-list-box';
import '@vaadin/vaadin-text-field/vaadin-number-field';
  • create a webpack.config.js file:
const path = require('path');
const webpack = require('webpack');
const MinifyPlugin = require("babel-minify-webpack-plugin");

module.exports = {
    mode: 'production',
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "webpack-bundle.js",
        library: 'index'
    },
    module: {
        rules: []
    },
    plugins: [
        new webpack.optimize.ModuleConcatenationPlugin(),
        new MinifyPlugin({}, {comments: ''}),
    ]
}
  • Executing webpack will generate the bundle JS file: ./node_modules/.bin/webpack.

A simple include statement in my HTML file makes the components available: <script src="./dist/webpack-bundle.js"></script>.