Building a Java Angular application tutorial and best practices
Step-by-step guide to building a full-stack Java and Angular application. Covers setup, deployment, error handling, and best practices for a production-ready app.
In this page I try to describe step-by-step what is needed to build a fullstack application with Java (Spring Boot) and Angular.
This is a minimalistic approach that is running successfully in production in some international companies. There are multiple approaches and architecture possible and there is no 'best solution' only solutions that work best in your context.
This is a permanent work in progress project, I'll add links and video and update them. For any suggestion or contribution you can contact me.
The basis of your application
| Subject | Description | Blog | Videos |
|---|---|---|---|
| IDE choice | TBD | TBD | |
| IDE configuration | Some plugins that I usually use to simplify my workflow | TBD | TBD |
| Deploy Angular with Spring Boot in the same executable JAR / WAR | Frontend copied inside of backend | Angular with Java | |
| Deploy Angular with Spring Boot in the same executable JAR / WAR (3 tier) | Frontend, backend and delivery are separated | Deploy Java Angular One | |
| Deploy your application in Docker | Deploy Spring in Docker | ||
| Fix the 404 error when refreshing the Angular page in a Java application | fix 404 error | ||
| Fix CORS error | fix CORS error | ||
| Fix Whitelabel error | fix Whitelabel error |
| OpenAPI generator | | OpenAPI generator | |
Angular specific steps
| Steps | Description | Blog | Videos |
|---|---|---|---|
| Angular, Typescript and Node version compatibility matrix | Which version of Node.js and Angular are compatible? | https://marmo.dev/angular-typescript-node | |
| Node and Angular Setup using NVM (Linux) | https://marmo.dev/angular-docker-linux | ||
| Dev Server configuration | Configure multiple environments and add a proxy | Dev server configuration | |
| Test with Cypress | Angular with Cypress and Java | ||
| Allow public access to the Angular Dev Server during the development | External access to the dev server | ||
| Deploy Angular with Docker and NGINX | Deploy with docker and nginx | ||
| Common errors | Common errors |
Angular UI (optional)
| Description | Blog | Videos | |
|---|---|---|---|
| Display a tooltip on a disabled button | Material Tooltip | ||
| File upload | File Upload tutorial | ||
| How to store user information between sessions in a Cookie in Angular | angular-cookie | ||
| Send an image from the Java backend to Angular using REST services | Send an image from the Java backend to Angular | ||
| Export your data to CSV using Typescript | export your data to CSV using Typescript | ||
| Enums in Angular Template | how to use enums in the template | ||
| Right click menu | Right click menu | ||
| Repeat an HTTP request every x seconds / minutes | Repeat HTTP request | ||
| Angular best components | Best components | ||
| Angular Material: sort complex objects using MatTableDataSource | MatTableDataSource | ||
| Unsaved changes warning in Angular | https://marmo.dev/angular-save-on-exit | ||
| Fix: CommonJS or AMD dependencies can cause optimization bailouts | Remove moment.js | https://marmo.dev/angular-momentjs-warning | |
| Crazy: Add Angular (Web Component) to an existing website | Angular Elements using 2D canvas | https://marmo.dev/angular-rxjs-examples |
Java / Spring Boot specific steps
| Description | Blog | Videos | |
|---|---|---|---|
| Configure the Java Virtual Machine for Docker | Java Docker Setup | ||
| SpringBoot best practices | Best practices | ||
| Autoconfiguration package and the missing JPA Entities | JPA in modules | ||
| How execute code when your Spring Boot application starts | @PostConstruct and @PreDestroy | ||
| Organise and tests the exceptions using ControllerAdvice | Centralise the Exception Management | https://marmo.dev/rest-controller-advice | |
| Deploy your app with Docker | Deploy Spring Boot with Docker | ||
| Generate a Sitemap | Generate a sitemap.xml | ||
| Execute code at startup | Code at startup | ||
| Hot deployment during development | Hot redeploy | ||
| Override Maven dependencies | Useful when you are blocked by CVE | https://marmo.dev/maven-override-dependency |
Spring Boot testing
| Description | Blog | Videos | |
|---|---|---|---|
| Override properties in your test classes | Override properties defined in .properties in your test class | https://marmo.dev/spring-test-properties | |
| Liquibase with Spring for your tests | Update your database | ||
| Data Tests with H2 | H2 with Spring Boot and JPA | ||
| Test @RestController | Test @RestController | ||
| How to test our REST services | Test REST in SpringBoot |
