|
1 | | -angular_bootstrap_spring |
2 | | -======================== |
3 | | -[](https://travis-ci.org/Rob-Leggett/angular_bootstrap_spring) |
| 1 | +# Angular Bootstrap Spring |
4 | 2 |
|
5 | | -Angular JS with Bootstrap and Spring 4 and Spring Security. |
| 3 | +[](https://github.com/Rob-Leggett/angular_bootstrap_spring/actions/workflows/ci.yml) |
| 4 | +[](https://openjdk.org/projects/jdk/21/) |
| 5 | +[](https://spring.io/projects/spring-boot) |
| 6 | +[](https://angular.dev/) |
| 7 | +[](https://getbootstrap.com/) |
6 | 8 |
|
7 | | -This example is an angular js single page application (SPA) with bootstrap for the widgets and styling. |
| 9 | +A modern single-page application built with **Angular 19** and **Bootstrap 5** for the frontend, backed by **Spring Boot 3.3** with **Spring Security 6** for the API. |
8 | 10 |
|
9 | | -The application has been broken into two modules API and CLIENT, both are built separately and both are deployed separately. |
| 11 | +## Tech Stack |
10 | 12 |
|
11 | | -The API can run on any web server, but it has been tested against Tomcat 8, the server required http DELETE and PUT, so ensure your web server can support those http methods. |
| 13 | +### Backend (API) |
| 14 | +- **Java 21** (LTS) |
| 15 | +- **Spring Boot 3.3** with Spring Security 6 |
| 16 | +- **Stateless JWT-style token authentication** |
| 17 | +- **HSQLDB** in-memory database (for demo purposes) |
| 18 | +- **JPA/Hibernate** for persistence |
| 19 | +- **JUnit 5** for testing |
12 | 20 |
|
13 | | -The CLIENT currently is run via gulp, for a production release you could extract the .zip artefact and run the static client via Apache. |
| 21 | +### Frontend (Client) |
| 22 | +- **Angular 19** with standalone components |
| 23 | +- **Bootstrap 5.3** for styling |
| 24 | +- **TypeScript 5.7** |
| 25 | +- **Angular CLI** for builds |
14 | 26 |
|
15 | | -Ensure that you proxy the API so that you have the same domain otherwise you will experience CORS related issues. (deployed artefacts only) |
| 27 | +## Architecture |
16 | 28 |
|
17 | | -### Gulp: |
18 | | -Used as the build tool for the client, this has been written using ES6 |
| 29 | +The application is split into two modules: |
19 | 30 |
|
20 | | -### Spring 4: |
21 | | -Used to create RESTful controller interfaces which in turn gets called through ajax requests. |
22 | | - |
23 | | -### Spring Security 4: |
24 | | -Used for a stateless api that allows authentication via basic authentication or token authentication. |
| 31 | +- **API** - Spring Boot REST backend (stateless, token-based auth) |
| 32 | +- **Client** - Angular SPA frontend |
25 | 33 |
|
26 | | -Upon authentication a token is attached to the header response which can in turn be used for sequential requests to be authenticated against. |
| 34 | +## Quick Start |
27 | 35 |
|
28 | | -When an authentication fails a 401 will always be returned. |
| 36 | +### Prerequisites |
| 37 | +- **Java 21** or higher |
| 38 | +- **Maven 3.8+** |
| 39 | +- **Node.js 22** (optional - Maven downloads it automatically) |
29 | 40 |
|
30 | | -### Login Details as per database inject.sql: |
31 | | -**Username =** user@tester.com.au |
| 41 | +### Build Everything |
32 | 42 |
|
33 | | -**Password =** password |
| 43 | +```bash |
| 44 | +mvn clean package |
| 45 | +``` |
34 | 46 |
|
35 | | -Testing |
36 | | -==================== |
37 | | -Simply run on the parent pom to have node and modules auto install and execute all tests. **(REQUIRED FOR FIRST RUN)** |
| 47 | +This builds both the API and client modules. |
38 | 48 |
|
39 | | -Ensure you have Maven 3.2.0+ |
| 49 | +### Run the API |
40 | 50 |
|
41 | | -**mvn clean install** |
| 51 | +```bash |
| 52 | +cd api |
| 53 | +mvn spring-boot:run |
| 54 | +``` |
42 | 55 |
|
43 | | -To run specific profiles please run mvn clean install and simple pass the profile you wish to execute. |
| 56 | +The API will be available at `http://localhost:8080/api` |
44 | 57 |
|
45 | | -This will execute Java and Jasmine tests that will test both java classes and angular js files. |
| 58 | +### Run the Client (Development) |
46 | 59 |
|
47 | | -You can also run jasmine only tests if you wish via the front end: |
| 60 | +```bash |
| 61 | +cd client |
| 62 | +npm install |
| 63 | +npm start |
| 64 | +``` |
48 | 65 |
|
49 | | -**http://localhost:4444/test** |
| 66 | +The client dev server runs at `http://localhost:4200` with API proxy to `http://localhost:8080`. |
50 | 67 |
|
51 | | -Running |
52 | | -==================== |
| 68 | +## Authentication |
53 | 69 |
|
54 | | -### Recommendations: |
| 70 | +The API uses stateless token-based authentication: |
55 | 71 |
|
56 | | -Use IntelliJ 16+ to run the application. |
| 72 | +1. Login with Basic Auth to `/api/auth/login` |
| 73 | +2. Receive a token in the `X-AUTH-TOKEN` response header |
| 74 | +3. Include the token in subsequent requests via `X-AUTH-TOKEN` header |
57 | 75 |
|
58 | | -### Run the API via Tomcat 8: |
| 76 | +### Default Credentials |
59 | 77 |
|
60 | | -Deploy exploded artefact to Tomcat 8 and ensure the root context is set to API. |
| 78 | +| Username | Password | |
| 79 | +|----------|----------| |
| 80 | +| user@tester.com.au | password | |
61 | 81 |
|
62 | | -### Run the CLIENT via gulp.babel.js: |
| 82 | +## API Endpoints |
63 | 83 |
|
64 | | -Where PATH is the directory to your checked out project. |
| 84 | +| Method | Endpoint | Description | Auth Required | |
| 85 | +|--------|----------|-------------|---------------| |
| 86 | +| POST | `/api/auth/login` | Login (Basic Auth) | No | |
| 87 | +| GET | `/api/user` | Get current user | Yes | |
| 88 | +| GET | `/api/customer` | List all customers | Yes | |
| 89 | +| GET | `/api/customer/{id}` | Get customer by ID | Yes | |
| 90 | +| POST | `/api/customer` | Create customer | Yes | |
| 91 | +| PUT | `/api/customer/{id}` | Update customer | Yes | |
| 92 | +| DELETE | `/api/customer/{id}` | Delete customer | Yes | |
65 | 93 |
|
66 | | -**Gulp File:** PATH\angular_bootstrap_spring\client\gulpfile.babel.js |
| 94 | +## Development |
67 | 95 |
|
68 | | -**Tasks:** run |
| 96 | +### Backend Development |
69 | 97 |
|
70 | | -**Node Interpreter:** PATH\angular_bootstrap_spring\client\node\node.exe |
| 98 | +```bash |
| 99 | +cd api |
| 100 | +mvn clean verify # Run tests |
| 101 | +mvn spring-boot:run # Run with hot reload |
| 102 | +``` |
71 | 103 |
|
72 | | -**Gulp package:** PATH\angular_bootstrap_spring\client\node_modules\gulp |
| 104 | +### Frontend Development |
73 | 105 |
|
74 | | -### The application is set to run on |
| 106 | +```bash |
| 107 | +cd client |
| 108 | +npm install # Install dependencies |
| 109 | +npm start # Dev server with hot reload |
| 110 | +npm run build # Production build |
| 111 | +npm run test # Run unit tests |
| 112 | +``` |
75 | 113 |
|
76 | | -**http://localhost:4444** |
| 114 | +### IDE Setup |
77 | 115 |
|
78 | | -Donations |
79 | | -==================== |
| 116 | +**IntelliJ IDEA** is recommended. Import the project as a Maven project. |
80 | 117 |
|
81 | | -### How you can help? |
| 118 | +For the frontend, ensure the Angular Language Service plugin is installed. |
82 | 119 |
|
83 | | -Any donations received will be able to assist me provide more blog entries and examples via GitHub, any contributions provided is greatly appreciated. |
| 120 | +## Project Structure |
84 | 121 |
|
85 | | -Thanks for your support. |
| 122 | +``` |
| 123 | +angular_bootstrap_spring/ |
| 124 | +├── api/ # Spring Boot backend |
| 125 | +│ ├── src/main/java/ |
| 126 | +│ │ └── au/com/example/ |
| 127 | +│ │ ├── Application.java # Spring Boot entry point |
| 128 | +│ │ ├── spring/ # Security & config |
| 129 | +│ │ ├── controller/ # REST controllers |
| 130 | +│ │ ├── service/ # Business logic |
| 131 | +│ │ ├── repository/ # Data access |
| 132 | +│ │ └── entity/ # JPA entities |
| 133 | +│ └── src/main/resources/ |
| 134 | +│ ├── application.properties |
| 135 | +│ └── data.sql # Sample data |
| 136 | +├── client/ # Angular frontend |
| 137 | +│ ├── src/app/ |
| 138 | +│ │ ├── components/ # Angular components |
| 139 | +│ │ ├── services/ # HTTP services |
| 140 | +│ │ ├── guards/ # Route guards |
| 141 | +│ │ └── models/ # TypeScript interfaces |
| 142 | +│ └── angular.json |
| 143 | +└── pom.xml # Parent POM |
| 144 | +``` |
| 145 | + |
| 146 | +## License |
| 147 | + |
| 148 | +[MIT License](LICENSE) |
| 149 | + |
| 150 | +## Author |
| 151 | + |
| 152 | +**Robert Leggett** |
| 153 | +- [Blog](https://robertleggett.com.au) |
| 154 | + |
| 155 | +--- |
| 156 | + |
| 157 | +## Support |
| 158 | + |
| 159 | +If you find this project helpful, consider supporting further development: |
86 | 160 |
|
87 | 161 | [](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=EV2ZLZBABFJ34&lc=AU&item_name=Research%20%26%20Development¤cy_code=AUD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted) |
0 commit comments