This package contains all Vaadin web components (free and commercial).
See https://github.com/vaadin/web-components for more details.
Basic project starter for Vaadin Connect
Home Page: https://github.com/vaadin/vaadin-connect
License: The Unlicense
This package contains all Vaadin web components (free and commercial).
See https://github.com/vaadin/web-components for more details.
If you run npm start
and then the terminal window dies for whatever reason, the processes keep running and there is no easy way to stop or restart the server. There should be some way to kill all the related processes of a given project.
When building the project for production deployment I want to include the entire app into a single runnable .jar file, so that I can deploy it using the default approach common for Java / Maven projects.
DoD:
production
maven profile in pom.xml
./mvnw package -Pproduction
npm run build:frontend
to create an optimized production build of the frontend codenpm run build
is an alias for ./mvnw package -Pproduction
If you take starter 0.5.1 and add a compilation error to Application.java
, the output of npm start
is:
π Vaadin Connect Backend is starting ...
...
π« Vaadin Connect Unable to start the backend. Check whether another instance is already running
π Vaadin Connect Backend is running at: http://localhost:8080/
π Vaadin Connect Watching for Java changes on ./src/main/java
π Vaadin Connect API browser is starting ...
π Vaadin Connect OpenApi UI is running at: http://localhost:8082
π Vaadin Connect Webpack is watching for changes on ./frontend
π Vaadin Connect Application Ready at http://localhost:8080/ π
The startup should be aborted after
π« Vaadin Connect Unable to start the backend. Check whether another instance is already running
When building the project for production deployment I want to have separate frontend bundles built for production: ES5 and ES6 so that my users have better experience when using modern browsers, and older browsers are still supported.
DoD:
build:frontend
npm script that
frontend/index.html
file for production: adds a bundle-loader inline script that selects and loads the correct bundle at the run time depending on the browser capabilitiespolymer.json
)To avoid the user installing livereload extension, we might rewrite index.html
by adding <script src="http://localhost:35729/livereload.js"></script>
We might consider some webpack plugin like https://www.npmjs.com/package/webpack-livereload-plugin
When running the project with npm start
I want to see the output of the maven build, so that I can understand that something is happening and the build is not stuck. This is especially important during the first build when maven caches are empty.
DoD:
npm start
When starting an app from the base starter, I want to see an example of using LitElement so that I have an example with something simial to what I will actually use in my app.
DoD:
When evaluation the base starter project I want to see the frontend part of it written in TypeScript so that I have an example of how to write an app with Vaadin Connect in TS.
DoD:
child of vaadin/vaadin-connect#295
When packaging a SPA built with Vaadin Connect and Vaadin Components for deployment I want to differentially serve production-build bundles of Web Components, and necessary polyfills from a single runnable .jar file, so that I can deploy SPAs built with Vaadin platform in the simplest possible way known to Java developers.
DoD:
The starter does not start after a fresh clone:
git clone --depth 1 https://github.com/vaadin/base-starter-connect
cd base-starter-connect
npm install
npm start
the result is
$ npm start
> [email protected] start /Users/viktor/IdeaProjects/vaadin-services/jens-starter
> webpack --mode development --silent && npm run start:backend -- -- npm run start:apibrowser -- -- npm run start:webpack
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] start: `webpack --mode development --silent && npm run start:backend -- -- npm run start:apibrowser -- -- npm run start:webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/viktor/.npm/_logs/2019-01-22T12_10_45_736Z-debug.log
hey, I noticed that the Vaadin Connect starter app (https://github.com/vaadin/base-starter-connect) gives an
error npm ERR! missing script: start:webpack
if you try to run the processes separately withnpm run start:webpack
.
It looks like the README is out of date. You either have to run
npm start
(which runs webpack, backend and apibrowser) or write your ownstart:webpack
script if you want to run only webpack
The way to do that manually would be
./node_modules/.bin/webpack --mode development --watch
DoD:
@vaadin/connect-scripts
)When evaluating the Vaadin Connect base starter...
npm run test
so that I do not have to read any docs and can apply the default approach common for frontend projects../mvnw verify
so that I do not have to read any docs and can apply the default approach common for Java / Maven projects.DoD:
npm run test
or ./mvnw verify
when the backend is not started yet:
for Spring apps, it's custom to have Application and conf files in their own package, usually .app
Services classes should be under .services (and data under .data if you add that).
When fixing a failing end-to-end or frontend unit test I want to start an individual test locally and use the browser dev tools to set break points, inspect the stack trace, and step through the code, so that I get a good DX and can be productive.
DoD:
Is this abandoned?
I think this is the best approach, when it came out in "labs" (https://vaadin.com/labs/vaadin-connect) I was thinking "that's it - finally they did it!", but I see it's not moving...
in the base starter
child of vaadin/vaadin-connect#295
It is really unexpected that
npm start
alters an existing node_modules
folder and in (at least) two cases makes the content invalid:
npm link
to use a local version of a dependency then npm start
will remove the linked version and instead install the published version. This is the behavior of npm install
yarn
and resolutions
, then the resolution will be ignored as the start script runs npm install
and npm
does not support resolutions
in package.json
When changing a frontend source in the base starter project that is running locally in the dev mode, I want to see the changes applied in the browser in under 1 second, so that I can have a quick feedback loop for my frontend changes.
DoD:
frontend/src/
node_modules/
static/
or under frontend/
When getting started with the Vaadin Connect base starter I want to see an example of an end-to-end integration test so that I do not have to put effort into researching how to add a new end-to-end test and how to run it.
DoD:
when I type a name into the text field and press the 'click me' button, the label is updated with the 'Hello, name!' text within 1 second after the click
.test:e2e
npm script that runs the end-to-end test in the local Chrome browser (assuming that backend is already running)./mvnw verify
command starts the backend, runs end-to-end tests, and stops the backend after thatcurrent favicon is a spring leaf, we can't have that ;)
git clone [email protected]:vaadin/base-starter-connect.git
cd base-starter-connect
npm start
open http://localhost:8080
This shows a text field and a button, as expected.
Now remove the <vaadin-*>
tags from index.html and save.
Webpack does some recompilation but http://localhost:8080 still shows the text field and button.
Stop the server, run npm start
again. The page still contains a text field and a button.
When running the starter app on my local machine I want it to see a text field, a button, and a text label so that I can see an example of how to call a backend method in response to a frontend event, and how to update the frontend UI after the backend call completes.
DoD:
Currently the starter does not work in IE11.
This needs to be fixed and SauceLabs tests extended to run tests in IE11 also.
When exploring a Vaadin Connect app I want to have a short command that starts an interactive API browser showing the backend APIs so that I can check the available API methods and call them without writing JS code for that.
DoD:
apibrowser
npm script defined in package.jsonmvn clean
or git clean -fdx
)npm install && npm start
http://localhost:8080/
Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.
Fri Jan 18 18:05:23 EET 2019
There was an unexpected error (type=Internal Server Error, status=500).
No message available
java.lang.StackOverflowError at org.apache.catalina.core.ApplicationHttpRequest.removeSpecial(ApplicationHttpRequest.java:812) at org.apache.catalina.core.ApplicationHttpRequest.removeAttribute(ApplicationHttpRequest.java:281) at
Works
The script runs backend with compile spring-boot:start -Dspring-boot.run.fork
. The compile
phase doesn't trigger the frontend build, so when the spring-boot:start
runs when there is no frontend resources in the /target/classes
=> Error
If we stop the process and run npm start
again, now it works because there are frontend resources generated from the last time.
When the app is running (and webpack is watching file changes), if a change causes webpack to fail the console output is confusing:
π Vaadin Connect Webpack has reloaded changes. π« There are compilation errors in frontend code π«
npm start
(make sure it starts normally)import './non-existing.js';
line)When webpack build fails, then
Java backend remains running after failing frontend tests. That makes is cumbersome to retry tests because re-running them fails due to some local ports being busy.
Steps to reproduce:
$ npm start -- -- false
When evaluating the Vaadin Connect base starter...
npm start
so that I do not have to read any docs and can apply the default approach common for frontend projects../mvnw
so that I do not have to read any docs and can apply the default approach common for Java / Maven projects.DoD:
npm start
or ./mvnw
when the backend is not started yet:
Currently, GitHub shows a minor security alert for the project: https://github.com/vaadin/base-starter-connect/network/alerts
Needs to be fixed.
When getting started with the Vaadin Connect base starter I want to see an example of frontend unit tests so that I do not have to put effort into researching how to add a new unit test and how to run it.
DoD:
when the 'click me' button click listener is invoked the Greeter service (mock) is called
test:frontend
npm script that starts frontend unit tests in NodeJSRunning npm start
on Windows results in an error.
One reason is that the mvn
might not be found in the PATH
. Suggestion is to use ./mvnw
or mvnw.cmd
in the scripts/start/backend.js
for the Maven binary depending on the platform.
Fix any other startup errors too.
If you run npm start
when port 8082 is in use, the project will fail to start:
π Vaadin Connect API browser is starting ...
...
Error: listen EADDRINUSE: address already in use 127.0.0.1:8082
...
π« Vaadin Connect Unable to continue
but Spring Boot remains running on port 8080
When starting the app with npm start
I want to see a clear indication of progress while the app starts, a clear indication when the app has started, and not have any additional logs to the console after the npm script is stopped with Ctrl+C
, so that the npm start
command is more usable.
DoD:
there is a clear indication of progress in the console when long-running tasks are running (this includes installing npm and maven dependencies, running webpack, etc)
Currently, this is working fine: maven output is visible and it's clear for the developers that something is happening when they have to wait. But it is still mentioned here because there was an attempt to hide maven output and that was not OK (see #45)
when the the app starts and is ready to be opened in a browser, that should be the last message displayed in the console
Currently, that's not the case because webpack outputs a few dozens of lines after the app has started, and that hides the 'app has started' message.
Started Vaadin Connect OpenApi UI at: http://localhost:8082/
> [email protected] start:webpack /Users/viktor/IdeaProjects/vaadin-services/base-starter-connect
> webpack --mode development -w
webpack is watching the filesβ¦
Hash: d76fa387c9d4ad606f5c
Version: webpack 4.29.0
Time: 2451ms
Built at: 01/24/2019 11:19:49 AM
Asset Size Chunks Chunk Names
README.txt 108 bytes [emitted]
index.es5.js 1.12 MiB index.es5 [emitted] [big] index.es5
index.es5.js.map 1.15 MiB index.es5 [emitted] index.es5
index.html 944 bytes [emitted]
index.js 889 KiB index [emitted] [big] index
index.js.map 1.11 MiB index [emitted] index
polyfills.es5.js 29.6 KiB polyfills.es5 [emitted] polyfills.es5
polyfills.es5.js.map 46.8 KiB polyfills.es5 [emitted] polyfills.es5
polyfills.js 27.1 KiB polyfills [emitted] polyfills
polyfills.js.map 45.5 KiB polyfills [emitted] polyfills
webcomponentsjs/LICENSE.md 1.52 KiB [emitted]
webcomponentsjs/README.md 10.5 KiB [emitted]
webcomponentsjs/bundles/webcomponents-ce.js 16.5 KiB [emitted]
webcomponentsjs/bundles/webcomponents-ce.js.map 102 KiB [emitted]
webcomponentsjs/bundles/webcomponents-sd-ce-pf.js 106 KiB [emitted]
webcomponentsjs/bundles/webcomponents-sd-ce-pf.js.map 632 KiB [emitted]
webcomponentsjs/bundles/webcomponents-sd-ce.js 79.1 KiB [emitted]
webcomponentsjs/bundles/webcomponents-sd-ce.js.map 506 KiB [emitted]
webcomponentsjs/bundles/webcomponents-sd.js 63.5 KiB [emitted]
webcomponentsjs/bundles/webcomponents-sd.js.map 404 KiB [emitted]
webcomponentsjs/custom-elements-es5-adapter.js 942 bytes [emitted]
webcomponentsjs/entrypoints/custom-elements-es5-adapter-index.js 656 bytes [emitted]
webcomponentsjs/entrypoints/webcomponents-bundle-index.js 1.66 KiB [emitted]
webcomponentsjs/entrypoints/webcomponents-ce-index.js 672 bytes [emitted]
webcomponentsjs/entrypoints/webcomponents-sd-ce-index.js 851 bytes [emitted]
webcomponentsjs/entrypoints/webcomponents-sd-ce-pf-index.js 1.2 KiB [emitted]
webcomponentsjs/entrypoints/webcomponents-sd-index.js 761 bytes [emitted]
webcomponentsjs/package.json 3 KiB [emitted]
webcomponentsjs/webcomponents-bundle.js 107 KiB [emitted]
webcomponentsjs/webcomponents-bundle.js.map 634 KiB [emitted]
webcomponentsjs/webcomponents-loader.js 6.01 KiB [emitted]
Entrypoint polyfills = polyfills.js polyfills.js.map
Entrypoint polyfills.es5 = polyfills.es5.js polyfills.es5.js.map
Entrypoint index [big] = index.js index.js.map
Entrypoint index.es5 [big] = index.es5.js index.es5.js.map
[./generated/StatusService.js?babel-target=es5] 1.67 KiB {index.es5} [built]
[./generated/StatusService.js?babel-target=es6] 1.65 KiB {index} [built]
[./generated/connect-client.default.js?babel-target=es5] 131 bytes {index.es5} [built]
[./index.js?babel-target=es5] .?babel-target=es5 1.09 KiB {index.es5} [built]
[./index.js?babel-target=es6] .?babel-target=es6 414 bytes {index} [built]
[./login-controller.js?babel-target=es5] 3.01 KiB {index.es5} [built]
[./login-controller.js?babel-target=es6] 955 bytes {index} [built]
[./login-view.js?babel-target=es5] 1.95 KiB {index.es5} [built]
[./login-view.js?babel-target=es6] 1.52 KiB {index} [built]
[./polyfills.js?babel-target=es5] 190 bytes {polyfills.es5} [built]
[./polyfills.js?babel-target=es6] 190 bytes {polyfills} [built]
[./status-controller.js?babel-target=es5] 1.91 KiB {index.es5} [built]
[./status-controller.js?babel-target=es6] 650 bytes {index} [built]
[./status-view.js?babel-target=es5] 2.12 KiB {index.es5} [built]
[./status-view.js?babel-target=es6] 1.64 KiB {index} [built]
+ 229 hidden modules
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[../node_modules/html-webpack-plugin/lib/loader.js!./index.html] 961 bytes {0} [built]
+ 3 hidden modules
there is no output to the console after the npm start
script stops (e.g. from Crtl+C
)
Currently, that's not the case because the maven process stops after npm start
, and that outputs extra lines to the console. It is annoying because it hides the console input typed right after stopping the npm start
script
^Cmvn [ '-e', 'spring-boot:stop', '-Dspring-boot.stop.fork' ] {}
2019-01-24 11:37:44.602 INFO 62931 --- [ Thread-10] o.s.s.concurrent.ThreadPoolTaskExecutor : Shutting down ExecutorService 'applicationTaskExecutor'
$ base-starter-connect > typ [INFO] Error stacktraces are turned on.
[INFO] Scanning for projects...
[INFO]
[INFO] ------------------------------------------------------------------------
[INFO] Building Vaadin Connect Starter 0.0.1-SNAPSHOT
[INFO] ------------------------------------------------------------------------
[INFO]
[INFO] --- spring-boot-maven-plugin:2.1.0.RELEASE:stop (default-cli) @ base-starter-connect ---
[INFO] Stopping application...
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 1.047 s
[INFO] Finished at: 2019-01-24T11:37:46+02:00
[INFO] Final Memory: 18M/309M
[INFO] ------------------------------------------------------------------------
ing is interrupted
Right now the app has hardcoded the login process. Real apps should have a way for getting credentials from user.
Since we are not using two web servers anymore in connect-demo we need to remove it from starter.
When trying to call the StatusService.update()
method via the API browser, I am getting an error in the Swagger UI: TypeError: Failed to execute 'fetch' on 'Window': Failed to parse URL from http://localhost:8082connect/StatusService/update
.
Apparently, the backend URL is not calculated correctly and one slash is missing in the URL.
When changing a backend source file or a resource in the base starter project that is running locally in the dev mode, I want to see the changes applied in the browser in under 5 second after the changed source files are recompiled, so that I can have a quick feedback loop for my backend changes.
DoD:
When building the starter project with empty maven caches it takes over 9 minutes on a high-end laptop with a 200Mbps connection. For comparison, for a JHipster-generated Spring Boot project with sufficiently more dependencies, it takes about 1.5 minutes.
This task is to investigate the slow build and propose corrective actions. The clean build of the Connect base Starter should be quicker than the clean build of a JHipster-generated project with simple default settings:
Welcome to JHipster v5.7.2
? Which *type* of application would you like to create? Monolithic application (recommended for simple projects)
? What is the base name of your application? jhipster
? What is your default Java package name? com.mycompany.myapp
? Do you want to use the JHipster Registry to configure, monitor and scale your application? No
? Which *type* of authentication would you like to use? JWT authentication (stateless, with a token)
? Which *type* of database would you like to use? SQL (H2, MySQL, MariaDB, PostgreSQL, Oracle, MSSQL)
? Which *production* database would you like to use? MySQL
? Which *development* database would you like to use? H2 with in-memory persistence
? Do you want to use the Spring cache abstraction? Yes, with the Ehcache implementation (local cache, for a single node)
? Do you want to use Hibernate 2nd level cache? Yes
? Would you like to use Maven or Gradle for building the backend? Maven
? Which other technologies would you like to use?
? Which *Framework* would you like to use for the client? React
? Would you like to enable *SASS* stylesheet preprocessor? No
? Would you like to enable internationalization support? No
? Besides JUnit and Jest, which testing frameworks would you like to use?
? Would you like to install other generators from the JHipster Marketplace? No
DoD:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.