To learn how to set up a project like this one, check out the Integrate Angular with a Spring Boot project post.
This project is a multi-module application, using the following frameworks: Spring Boot for the backend and Angular for the frontend. The project can be built into a single jar file using Maven.
- Getting Started
- Profiles summary
- API documentation
- Client code generation
- Working with frontend on a local environment
- Running test suits
- SonarQube analysis on a local environment
- Forking this repository
- Built With
Backend:
- JDK 13+
- Maven (or you can use
mvnwprovided in the project) - Docker
- Docker Compose
Frontend:
- Node.js version that you specify in the
frontend-maven-pluginconfiguration - Angular requires an active or maintenance LTS version of Node.js. For the reference, you can check out this unofficial compatibility matrix.
First, clone this repository.
Then, build it locally with:
mvn clean installYou can run the project from command line with:
mvn spring-boot:run -Dspring-boot.run.profiles=devAs a result, you should be able to visit the home page on http://localhost:8080/:
The project can be built with various different profiles to allow for flexible configuration. Below you'll find a short summary of the available profiles.
dev- for local development. Allows things like handling requests fromhttp://localhost:4200/.angular- special profile used for client code generation. Applied automatically when theangularMaven profile is enabled.
sonar-cloud- for code analysis on push tomastercode-coverage- for including code coverage reports from thebackendmodule during a sonar analysisfrontend-pre-sonar- for including code coverage reports from thefrontendmodule during a sonar analysisfrontend-sonar- for running only a sonar analysis for thefrontend moduleangular- for generating client code
The backend module serves one endpoint for testing purposes. First, build and run the application. Then you'll be able to reach the API docs.
The Swagger UI page: http://localhost:8080/swagger-ui.html.
- The OpenAPI description in the
jsonformat is available at the following url: http://localhost:8080/v3/api-docs. - The API specification is also available in the
yamlformat under the http://localhost:8080/v3/api-docs.yaml link.
Right now openapi-generator supports Angular 11.0.0. Although the generated code works with Angular 12+ used in this
project, it's strongly recommended to update the generator plugin as soon as it starts supporting Angular 12.0.0
(see Issue #9511).
To run client code generation
using the openapi-generator-maven-plugin execute the following command:
cd backend
mvn clean verify -Pangular -DskipTestsThe application will be started so that the API specification can be obtained from the Open API endpoint.
The generated code is available in the frontend/src/main/angular/src/backend directory. Don't edit those files manually.
If you want to see how changes you make in the frontend code affect the application you don't need to build it together
with the backend module every time (mvn clean install). Use the following commands:
mvn spring-boot:run -Dspring-boot.run.profiles=devcd frontend/src/main/angular
ng serveand visit http://localhost:4200/. The frontend application reloads automatically on code change.
Run unit tests with the following command in the project directory:
mvn testRun all tests with the following command in the project directory:
mvn verifyRun all tests for the Angular code with:
cd frontend/src/main/angular
ng test
- Read the Boost project quality with SonarQube – local code analysis post to set up dependencies properly.
- You'll need Chrome installed on your machine for running a frontend analysis with code coverage.
- Read the How to add an Angular module built with Maven to a SonarQube analysis to learn more about analysing a multi-module maven application.
You can run analysis for the whole project (both backend and frontend):
mvn clean verify sonar:sonar -Pfrontend-pre-sonar -Pcode-coverage -Dsonar.login=your_username -Dsonar.password=your_passwordYou can run a separate analysis for the backend module:
cd backend
mvn clean verify sonar:sonar -Pcode-coverage -Dsonar.login=your_username -Dsonar.password=your_passwordYou can run a separate analysis for the frontend module:
cd frontend
mvn sonar:sonar -Pfrontend-pre-sonar -Dsonar.login=your_username -Dsonar.password=your_passwordOr use the shell script which you can find in the closing paragraphs of the How to add an Angular module built with Maven to a SonarQube analysis post.
Visit the Projects page and choose the right project. Depending on which modules were analysed you should see one, two, or three projects.
- Make sure to provide your own values for
<name>,<description>,<artifactId>and<groupId>in thepom.xml,backend/pom.xmlandfrontend/pom.xmlfiles.
- Remove the
.github/workflows/build.ymlfile if you don't want to configure GitHub Actions for your repository. - If you don't want to configure SonarCloud for your repository: remove the
sonar-cloudprofile frompom.xml,<sonar.projectKey>and<sonar.projectName>frombackend/pom.xmland all<sonar…>properties fromfrontend/pom.xml - If you do want to configure GitHub Actions and SonarCloud analysis, add your own SONAR_TOKEN to your repository
and customize all mentioned above
<sonar…>properties in thepom.xmlfiles.
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}