Technology | Purpose | Documentation |
---|---|---|
Angular 19 | Base Framework | https://angular.dev/ |
Bootstrap v5.3 | Grid System | https://getbootstrap.com/docs/5.3/layout/grid/#how-it-works |
NgRx | State Handling | https://ngrx.io/ |
Angular Material | Components | https://material.angular.io/components/categories |
ngx-datatable | Table Component | http://swimlane.github.io/ngx-datatable/ |
Spring Boot (REST + JSON) |
Server | https://spring.io/projects/spring-boot |
A boilerplate for modern web apps using Angular 19 with Bootstrap, Angular Material, and NgRx for responsive, stateful UIs. Back-end is powered by Spring Boot with a RESTful JSON API. Features include modular architecture and advanced table handling with ngx-datatable.
- Node.js / npm (or nvm instructions)
- Java (JDK)
- Maven
nvm install lts/jod
nvm use lts/jod
nvm alias default lts/jod
npm install -g @angular/cli
brew install openjdk
sudo ln -sfn $HOMEBREW_PREFIX/opt/openjdk/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk.jdk
brew install maven
Run 01_install_fe.sh
to install the frontend dependencies (via npm install
).
cd src/main/scripts
01_install_fe.sh
Run 02_start_fe_dev_server.sh
for a frontend development server. Navigate to http://localhost:4200/
. The application will automatically reload if you change any of the source files.
cd src/main/scripts
02_start_fe_dev_server.sh
Run 03_test_fe.sh
to execute the frontend unit tests via Karma.
cd src/main/scripts
03_test_fe.sh
Run 10_install_server.sh
to install the server project. This runs mvn clean install
.
cd src/main/scripts
10_install_server.sh
Run 11_test_server.sh
to test the server project. This runs mvn test
.
cd src/main/scripts
11_test_server.sh
Run 20_build.sh
to build the project. The build artifacts will be stored in the target/
directory.
cd src/main/scripts
20_build.sh
Run 30_start_server.sh
to start the Spring Boot server with Java.
cd src/main/scripts
30_start_server.sh
Run 40_open_chrome.sh
to start Chrome.
cd src/main/scripts
40_open_chrome.sh
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
For more help with the Angular CLI use ng help
or go check out the Angular CLI Overview and Command Reference page.