vaadin / base-starter-connect

Basic project starter for Vaadin Connect

This project has been archived

Vaadin Connect is being integrated into Vaadin Flow. You can build a project with Vaadin Starter.

Vaadin Connect starter

This is the Vaadin Connect starter that can be used to simplify the new Vaadin Connect based project creation.

The project contains the required dependencies and basic set up that you can experiment with to create your own application.

To access it directly from GitHub, clone the repository and import the project to the IDE of your choice as a Maven project.

Prerequisites

You need to have Java 8 or newer and Node 8 or newer installed.

Running

First, install the required frontend dependencies by running npm install (or yarn install is supported also).

To run the app in dev mode just type npm start. Then navigate to http://localhost:8080 to see the UI.

If you prefer to start each process separatly, you need to run npm run start:webpack which watches and transpiles any change in the frontend code, and then ./mvnw spring-boot:run or mvn spring-boot:run in a different terminal to start the backend server. In order to automatically recompile and run the generator on any backend change, you need to run ./mvnw fizzed-watcher:run (or mvn fizzed-watcher:run) to start the watcher.

Live reload support

For the frontend code, webpack will watch any change under the frontend folder and transpile it.

For the backend part, when a Java file under src/main/java is changed, it is recompiled by the backend watcher as well the resources generator is run.

When a change in frontend or backend happens, you will need to reload the browser. Though optionally, you might want to install the live-reload extension that automatically reloads your browser on any change.

OpenApi browser

The project has the support for displaying the project's OpenApi spec via the browser task: run npm run start:apibrowser and open http://localhost:8082 to check out the Vaadin Connect api available.

Unit tests

To run backend unit tests, use ./mvnw test or mvn test.

To run frontend unit tests, use npm run test:unit.

To run selected frontend unit suites or tests, use the grep RegExp argument:

$ npm run test:unit -- grep="greet with a name"

To attach a Node debugger on the test runner, run the following command:

$ NODE_DEBUG_OPTION=--inspect-brk npm run test:unit

Then open Chrome and navigate to the chrome://inspect URL and click on the inspect link for the intern process.

Note that it is important to make the logic of every unit tested on its own, without involving other dependencies in unit testing, such as the backend, browser APIs, and so on. To follow that principle, the frontend unit tests are running in a Node.js environment, and are using stubs instead of the actual Vaadin Connect client methods. The frontend tests command does start neither the backend nor the frontend application servers.

Normally, a frontend application framework provides abstractions over the browser APIs, and defines conventions on how to structure the application to isolate the logic in separately testable units. However, this project aims to be agnostic to particular frontend frameworks. Instead, the view wrapper classes are used to keep the frontend logic in the controllers free of using the browser APIs.

Integration tests

We provide an integration test placed in the e2e folder that you can run by executing npm test, or if you prefer the Java way, execute ./mvnw verify or mvn verify if you already have Maven installed.

The script starts the backend Java server, the Node.js frontend server, and finally it runs intern a JavaScript testing system able to open the application in a browser and interact with it. The test uses Leadfoot for driving actions in the browser, and Chai for making the assertions. To run selected end-to-end unit suites or tests, use the grep RegExp argument:

$ npm run test -- grep="show the greeting"

By default, the end-to-end test runner starts the Chrome browser automatically. Optionally, you can also run the end-to-end tests against an existing Chrome instance to be able to use DevTools for debugging end-to-end tests. Follow these steps:

1. In a terminal, run $ npm start to start the application servers.

2. Launch Chrome with --remote-debugging-port=9222 argument.

   # Mac OS
   $ open -a "Google Chrome" http://localhost:8080 --args --remote-debugging-port=9222
   
   # Linux
   $ google-chrome --remote-debugging-port=9222 http://localhost:8080
   
   # Windows
   $ chrome.exe --remote-debugging-port=9222 http://localhost:8080

   NOTE: See also the running Chromium with flags guide to adjust the command for your system.

3. In the Chrome, open DevTools, navigate to Sources, and set breakpoints.

4. Use the following command to run the end-to-end tests against the Chrome instance:

   $ npm run test:e2e -- -- config=@debug-chrome

Packaging the application for production

You can generate the final artefact by runing either ./mvnw package, mvn package or npm run build.

In the target folder you will get a .jar file with everything set to run the application by typing java -jar target/base-starter-connect-0.0.1-SNAPSHOT.jar, then you can use the application from any supported browser navigating to the url http://localhost:8080/

base-starter-connect's Issues

'npm start' fails after fresh git clone

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

avoid an unexpected login popup

When evaluating the base starter it is unexpected that there is a Login prompt popup after I press the 'Greet' button.

To avoid confusion, let's make the greet method public, and add another method that greets the logged-in user (see the screen recording below.

convert unit and e2e tests to TS

in the base starter
child of vaadin/vaadin-connect#295

enable live reload for backend code / resources

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:

• no manual steps such as re-building the project or restarting the server are necessary
• one manual page reload is acceptable
• changed Java classes are hot swapped into the running app using Spring DevTools
• changes in Java sources trigger regeneration of JS service wrappers
• the README file is updated with the description of the live reload capabilities of the dev mode

re-organize java packages

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).

Remove security alert

Currently, GitHub shows a minor security alert for the project: https://github.com/vaadin/base-starter-connect/network/alerts

Needs to be fixed.

add a 'build a production package' commands for maven and npm

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:

• there is a production maven profile in pom.xml
• running ./mvnw package -Pproduction
  • builds the backend code
  • generates the OpenAPI JSON spec file, the default Vaadin client config file, and JS service wrappers
  • runs npm run build:frontend to create an optimized production build of the frontend code
  • creates an executable .jar file (in the Spring Boot way, i.e. with an embedded Tomcat)
• it all works together when running the production-built .jar package
• the integration tests in the base starter repo are changed to run against the production build with all supported browsers (including IE11)
• npm run build is an alias for ./mvnw package -Pproduction
• the README is updated with the accurate 'how to build for production' information

show maven build progress in `npm start`

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:

• maven output is visible when running npm start
• maven output is visible also in other cases when maven is triggered from npm

Spring boot remains running if api browser startup fails

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

add an integration test

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:

• there is an end-to-end integration test that emulates an end user interaction with the app (frontend and backend) and verifies that it works as expected. The test scenario can be as simple as 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.
• there is a test:e2e npm script that runs the end-to-end test in the local Chrome browser (assuming that backend is already running)
• the ./mvnw verify command starts the backend, runs end-to-end tests, and stops the backend after that
• the README is updated to cover:
  • where in the project are end-to-end tests
  • how to run them
  • what test runner is used, what helper APIs are available for tests

Add livereload script in devmode

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

Add login form

Right now the app has hardcoded the login process. Real apps should have a way for getting credentials from user.

`npm start` must never run `npm install` if node_modules exist

It is really unexpected that

npm start

alters an existing node_modules folder and in (at least) two cases makes the content invalid:

1. If you use 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
2. If you have a version conflict and resolve it using 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

configure the production .jar to serve an index.html that loads the correct bundle

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:

• there is and index.html file that dynamically selects the correct bundle
• it works together when running the production-built .jar package
• the integration tests in the base starter repo are changed to run against the production build with all supported browsers (including IE11)

add a frontend part of a Hello World app

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:

• when starting a freshly cloned copy of the starter app on my local machine I see a web UI similar to that of the FW8 tutorial app
  
• vaadin-text-field and vaadin-button are used as the UI components

Is this abandoned?

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...

Align with connect-demo

Since we are not using two web servers anymore in connect-demo we need to remove it from starter.

add frontend unit tests

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:

• there is a unit test covering the frontend JS logic. It can be as simple as checking that when the 'click me' button click listener is invoked the Greeter service (mock) is called
• there is a test:frontend npm script that starts frontend unit tests in NodeJS
• the README is updated to cover:
  • where in the project are unit tests for frontend JS code
  • how to run them
  • what test runner is used, what assertion libraries are available

replace favicon with vaadin version

current favicon is a spring leaf, we can't have that ;)

Make starter work in IE11

Currently the starter does not work in IE11.

This needs to be fixed and SauceLabs tests extended to run tests in IE11 also.

use LitElement instead of vanilla JS for views

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 getting a new app from the base starter, all views are done with LitElement

add a 'run all tests' commands for maven and npm

When evaluating the Vaadin Connect base starter...

• ... as a frontend developer I want to run tests with npm run test so that I do not have to read any docs and can apply the default approach common for frontend projects.
• ... as a Java developer I want to run tests with ./mvnw verify so that I do not have to read any docs and can apply the default approach common for Java / Maven projects.

DoD:

• running npm run test or ./mvnw verify when the backend is not started yet:
  • runs the backend unit tests
  • runs the frontend unit tests
  • starts the backend (in the dev mode)
  • runs the end-to-end tests
  • stops the backend after the end-to-end tests are completed
• the README is updated with the accurate 'how to run tests' information

set up a production frontend build

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:

• there is a build:frontend npm script that
  • process the frontend code for production use: transpile, minify, bundle
  • creates two bundles: ES5 (for browsers that do not support ES6 classes, including IE11) and ES6 (for all other browsers)
  • builds the 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 capabilities
  • adds the necessary polyfills so that the app runs in all supported browsers
• the build output can be served with any static server (and works in IE11)
• build configuration is out of scope of this task (it's OK to use Polymer CLI and polymer.json)

Updating index.html has no effect

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.

it should be easy to debug frontend tests

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:

• there is a 'debugging tests' section in the README file that describes
  • how to run an individual frontend unit test
  • how to run an individual end-to-end test
  • how to set a break point / attach a debugger to a unit test / end-to-end test
• it is possible to set a break point in the Chrome DevTools in an end-to-end test
• it is possible to set a break point in the IDE (IDEA, VS Code) in an frontend unit test
• stack is developer-readable (funciton names are not mangled)
• local variables names are as in the source (not minified)
• step-in works for Vaadin Connect JS code

'npm run test' should stop all started processes on failure

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:

• Make sure nothing is running on the port 8080
• run $ npm start -- -- false
• Wait until it fails
• Boom, java is still running in the background, taking ports 8080 and 9001

Does not start on Windows

Running 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.

Missing output when Webpack build fails

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 🚫

Steps to reproduce:

• start the starter with npm start (make sure it starts normally)
• edit the index.js file so that it won't build (e.g. add a import './non-existing.js'; line)
• see that the console output is as above

Expected behavior:

When webpack build fails, then

• the full error details are visible in the console
  ideally, there should be a full path to the file, a line number, and a position in the line pointing to the place that causes the issue
• the message does not claim that the changes are reloaded: instead of Vaadin Connect Webpack has reloaded changes, it should be along the lines of Vaadin Connect Webpack failed to build or similar.

the console output of `npm start` should be easy to understand

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.

  example of extra logs hiding 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

  example of extra logs after `npm start` stops

  ^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
  

The API browser does not work

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.

rewrite the starter in TypeScript

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:

• the build pipeline is updated to allow TypeScript sources
• the frontend part of the starter is rewritten in TS instead of JS
• the README file is updated

child of vaadin/vaadin-connect#295

npm script to start Swagger UI to browse the backend APIs

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:

• there is a apibrowser npm script defined in package.json
• running the script starts a Swagger UI server on localhost (on a different port than the backend or the frontend)
• when the Swagger UI server is opened it shows the backend API of the project (no manual step to select / open an OpenAPI spec file is necessary)
• applies both to the starter and the demo app

`npm run start:webpack` does not work as described in README

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 with npm 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 own start: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:

• README contains correct instructions on how to start only the front-end in the dev mode
• (it may require adding a new script into @vaadin/connect-scripts)

enable live reload for frontend resources

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:

• no manual steps such as re-building the project or restarting the server are necessary
• one manual page reload is acceptable
• the 1 second limit applies to the last 2 versions of the evergreen browsers: Edge, Chrome, Safari, Firefox (and does not apply to other supported browsers such as IE11)
• changes to any of the following source types are supported:
  • JavaScript sources in frontend/src/
  • node modules in node_modules/
  • static resources such as HTML, styles, images, fonts, json under static/ or under frontend/
• the README file is updated with the description of the live reload capabilities of the dev mode

reduce the first maven build time

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:

• there is a comment to this ticket with the research results (explaining the slow build)
• there is a list of proposed corrective actions to make the build quicker than the target

StackOverflowError when starting the application for the first time

Step to reproduce

1. Clean the project (mvn clean or git clean -fdx)
2. Run npm install && npm start
3. Go to http://localhost:8080/

Actual behavior

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 

Expected behavior

Works

Reason

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.

add a 'start in dev mode' command for maven and npm

When evaluating the Vaadin Connect base starter...

• ... as a frontend developer I want to start the project with npm start so that I do not have to read any docs and can apply the default approach common for frontend projects.
• ... as a Java developer I want to start the project with ./mvnw so that I do not have to read any docs and can apply the default approach common for Java / Maven projects.

DoD:

• running npm start or ./mvnw when the backend is not started yet:
  • starts the backend (in the dev mode)
  • starts the frontend (in the dev mode)
  • starts a watcher that regenerates the OpenAPI spec file after every relevant source file change
  • starts a watcher that regenerates the default JS client config and the JS service wrappers after every relevant change to the properties file / the OpenAPI spec file
• the README is updated with the accurate 'how to start' information

Add command for killing potentially running server(s)

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.

Misleading output when Spring Boot fails to start

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