|
| 1 | +# Project Base for Vaadin and Spring Boot |
| 2 | + |
| 3 | +This project can be used as a starting point to create your own Vaadin application with Spring Boot. |
| 4 | +It contains all the necessary configuration and some placeholder files to get you started. |
| 5 | + |
| 6 | +The best way to create your own project based on this starter is [start.vaadin.com](https://start.vaadin.com/) - you can get only the necessary parts and choose the package naming you want to use. |
| 7 | + |
| 8 | +## Running the Application |
| 9 | +There are two ways to run the application : using `mvn spring-boot:run` or by running the `Application` class directly from your IDE. |
| 10 | + |
| 11 | +You can use any IDE of your preference,but we suggest Eclipse or Intellij IDEA. |
| 12 | +Below are the configuration details to start the project using a `spring-boot:run` command. Both Eclipse and Intellij IDEA are covered. |
| 13 | + |
| 14 | +#### Eclipse |
| 15 | +- Right click on a project folder and select `Run As` --> `Maven build..` . After that a configuration window is opened. |
| 16 | +- In the window set the value of the **Goals** field to `spring-boot:run` |
| 17 | +- You can optionally select `Skip tests` checkbox |
| 18 | +- All the other settings can be left to default |
| 19 | + |
| 20 | +Once configurations are set clicking `Run` will start the application |
| 21 | + |
| 22 | +#### Intellij IDEA |
| 23 | +- On the right side of the window, select Maven --> Plugins--> `spring-boot` --> `spring-boot:run` goal |
| 24 | +- Optionally, you can disable tests by clicking on a `Skip Tests mode` blue button. |
| 25 | + |
| 26 | +Clicking on the green run button will start the application. |
| 27 | + |
| 28 | +After the application has started, you can view your it at http://localhost:8080/ in your browser. |
| 29 | + |
| 30 | + |
| 31 | +If you want to run the application locally in the production mode, use `spring-boot:run -Pproduction` command instead. |
| 32 | +### Running Integration Tests |
| 33 | + |
| 34 | +Integration tests are implemented using [Vaadin TestBench](https://vaadin.com/testbench). The tests take a few minutes to run and are therefore included in a separate Maven profile. We recommend running tests with a production build to minimize the chance of development time toolchains affecting test stability. To run the tests using Google Chrome, execute |
| 35 | + |
| 36 | +`mvn verify -Pit,production` |
| 37 | + |
| 38 | +and make sure you have a valid TestBench license installed. |
| 39 | + |
| 40 | +Profile `it` adds the following parameters to run integration tests: |
| 41 | +```sh |
| 42 | +-Dwebdriver.chrome.driver=path_to_driver |
| 43 | +-Dcom.vaadin.testbench.Parameters.runLocally=chrome |
| 44 | +``` |
| 45 | + |
| 46 | +If you would like to run a separate test make sure you have added these parameters to VM Options of JUnit run configuration |
| 47 | + |
| 48 | +### Live Reload (optional) |
| 49 | + |
| 50 | +With live reload, you can see the results of your code changes immediately. |
| 51 | +When you edit your Java code and recompile it, the application changes will be automatically reloaded and the browser is refreshed. |
| 52 | +This is done by leveraging [Spring Boot Developer Tools](https://docs.spring.io/spring-boot/docs/2.1.5.RELEASE/reference/html/using-boot-devtools.html). |
| 53 | +To be able to see the changes in the browser tab, the page still needs to be reloaded. |
| 54 | +That can also be automated via a LiveReload browser extension. |
| 55 | +One such extension for Google Chrome is [LiveReload](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei). |
| 56 | +In Firefox, [LiveReload - Web extension](https://addons.mozilla.org/en-US/firefox/addon/livereload-web-extension/) can be used. |
| 57 | +You can find such similar extensions for other major browsers too. |
| 58 | +These extensions add an icon to your browser next to the address bar. |
| 59 | +To enable the extension, you should click that icon after you opened your application. |
| 60 | + |
| 61 | +You can find more information at [Live Reload in Spring Boot Applications](https://vaadin.com/docs/flow/workflow/tutorial-spring-boot-live-reload.html) document. |
| 62 | + |
| 63 | +## Structure |
| 64 | + |
| 65 | +Vaadin web applications are full-stack and include both client-side and server-side code in the same project. |
| 66 | + |
| 67 | +| Directory | Description | |
| 68 | +|:-------------------------------------------| :--- | |
| 69 | +| `src/main/frontend/` | Client-side source directory | |
| 70 | +| `index.html` | HTML template | |
| 71 | +| `index.ts` | Frontend entrypoint | |
| 72 | +| `main-layout.ts` | Main layout Web Component (optional) | |
| 73 | +| `views/` | UI views Web Components (TypeScript / HTML) | |
| 74 | +| `styles/` | Styles directory (CSS) | |
| 75 | +| `src/main/java/<groupId>/` | Server-side source directory | |
| 76 | +| `Application.java` | Server entrypoint | |
| 77 | +| `AppShell.java` | application-shell configuration | |
| 78 | + |
| 79 | +## Code Formatting |
| 80 | + |
| 81 | +The project includes the Spotless code formatter. |
| 82 | + |
| 83 | +To use it in IntelliJ, install the [https://plugins.jetbrains.com/plugin/22455-spotless-applier](IntelliJ plugin) |
| 84 | +To use it in VS Code, install the [https://marketplace.visualstudio.com/items?itemName=richardwillis.vscode-spotless-gradle ](VS Code extension) |
| 85 | +To use it from the command line, run `mvn spotless:apply` |
| 86 | + |
| 87 | +## Useful links |
| 88 | + |
| 89 | +- Read the documentation at [vaadin.com/docs](https://vaadin.com/docs). |
| 90 | +- Follow the tutorials at [vaadin.com/tutorials](https://vaadin.com/tutorials). |
| 91 | +- Watch training videos and get certified at [vaadin.com/learn/training](https://vaadin.com/learn/training). |
| 92 | +- Create new projects at [start.vaadin.com](https://start.vaadin.com/). |
| 93 | +- Search UI components and their usage examples at [vaadin.com/components](https://vaadin.com/components). |
| 94 | +- View use case applications that demonstrate Vaadin capabilities at [vaadin.com/examples-and-demos](https://vaadin.com/examples-and-demos). |
| 95 | +- Discover Vaadin's set of CSS utility classes that enable building any UI without custom CSS in the [docs](https://vaadin.com/docs/latest/ds/foundation/utility-classes). |
| 96 | +- Find a collection of solutions to common use cases in [Vaadin Cookbook](https://cookbook.vaadin.com/). |
| 97 | +- Find Add-ons at [vaadin.com/directory](https://vaadin.com/directory). |
| 98 | +- Ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/vaadin) or join our [Discord channel](https://discord.gg/MYFq5RTbBn). |
| 99 | +- Report issues, create pull requests in [GitHub](https://github.com/vaadin/platform). |
0 commit comments