https://github.com/hofiorg/angular-boilerplate
A boilerplate for modern web apps using Angular 18 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.
https://github.com/hofiorg/angular-boilerplate
angular angular-material bootstrap ngrx ngx-datatable springboot
Last synced: 1 day ago
JSON representation
A boilerplate for modern web apps using Angular 18 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.
- Host: GitHub
- URL: https://github.com/hofiorg/angular-boilerplate
- Owner: hofiorg
- Created: 2024-11-04T08:54:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-22T06:28:53.000Z (about 1 year ago)
- Last Synced: 2025-01-25T06:42:12.233Z (about 1 year ago)
- Topics: angular, angular-material, bootstrap, ngrx, ngx-datatable, springboot
- Language: TypeScript
- Homepage:
- Size: 340 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- trackawesomelist - angular-boilerplate (⭐1) - A boilerplate for modern web apps using Angular 18 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. (Recently Updated / [Nov 23, 2024](/content/2024/11/23/README.md))
- fucking-awesome-angular - angular-boilerplate - Angular 18 + Bootstrap/Material + NgRx + Spring Boot starter with modular architecture and ngx-datatable. (Site Templates / Free Templates)
- awesome-angular - angular-boilerplate - Angular 18 + Bootstrap/Material + NgRx + Spring Boot starter with modular architecture and ngx-datatable. (Site Templates / Free Templates)
README
# angular-boilerplate
[](https://angular.io/)
[](https://getbootstrap.com/)
[](https://ngrx.io/)
[](https://spring.io/projects/spring-boot)
[](LICENSE)
[](https://github.com/hofiorg/angular-boilerplate/actions/workflows/node.js.yml)
[](https://github.com/hofiorg/angular-boilerplate/actions/workflows/maven.yml)
## 📋 Overview
### 🔧 Technologies Used
| Technology | Purpose | Documentation |
|:------------------------------|:----------------|:--------------------------------------------------------------|
| Angular 19 | Base Framework | |
| Bootstrap v5.3 | Grid System | |
| NgRx | State Handling | |
| Angular Material | Components | |
| ngx-datatable | Table Component | |
| Spring Boot
(REST + JSON) | Server | |
### 📖 Project Description
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.
## 🚦 Getting Started
### 🛠️ Prerequisites
- Node.js / npm (or nvm instructions)
- Java (JDK)
- Maven
### 📥 Installation
#### Install node/npm
```sh
nvm install lts/jod
nvm use lts/jod
nvm alias default lts/jod
```
#### Install Angular Command Line Interface (CLI)
```sh
npm install -g @angular/cli
```
#### Install Java
##### Install Java with Homebrew (MacOS)
```sh
brew install openjdk
sudo ln -sfn $HOMEBREW_PREFIX/opt/openjdk/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk.jdk
```
#### Install Maven
##### Install Maven with Homebrew (MacOS)
```sh
brew install maven
```
## 🚀 Development
### 🖥️ Frontend
#### Installing the Project Dependencies
Run `01_install_fe.sh` to install the frontend dependencies (via `npm install`).
```sh
cd src/main/scripts
01_install_fe.sh
```
#### Running the Dev Server
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.
```sh
cd src/main/scripts
02_start_fe_dev_server.sh
```
#### Running Unit Tests
Run `03_test_fe.sh` to execute the frontend unit tests via [Karma](https://karma-runner.github.io).
```sh
cd src/main/scripts
03_test_fe.sh
```
### 🗄️ Backend
#### Installing the Server
Run `10_install_server.sh` to install the server project. This runs `mvn clean install`.
```sh
cd src/main/scripts
10_install_server.sh
```
#### Testing the Server
Run `11_test_server.sh` to test the server project. This runs `mvn test`.
```sh
cd src/main/scripts
11_test_server.sh
```
#### Building the Project
Run `20_build.sh` to build the project. The build artifacts will be stored in the `target/` directory.
```sh
cd src/main/scripts
20_build.sh
```
#### Running the Server
Run `30_start_server.sh` to start the Spring Boot server with Java.
```sh
cd src/main/scripts
30_start_server.sh
```
## 🧑💻 Usage
### Open in Chrome
Run `40_open_chrome.sh` to start Chrome.
```sh
cd src/main/scripts
40_open_chrome.sh
```
### Code scaffolding
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`.
### Further help
For more help with the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
## 🧪 How to create this project
[Steps to reproduce](docs/steps-to-reproduce.md)
## 🗒️ TODO List
[TODO List](docs/todo.md)