hofiorg/angular-boilerplate

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

angular-boilerplate

📋 Overview

🔧 Technologies Used

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

📖 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

nvm install lts/jod
nvm use lts/jod
nvm alias default lts/jod

Install Angular Command Line Interface (CLI)

npm install -g @angular/cli

Install Java

Install Java with Homebrew (MacOS)

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)

brew install maven

🚀 Development

🖥️ Frontend

Installing the Project Dependencies

Run 01_install_fe.sh to install the frontend dependencies (via npm install).

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.

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.

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.

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.

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.

cd src/main/scripts
20_build.sh

Running the Server

Run 30_start_server.sh to start the Spring Boot server with Java.

cd src/main/scripts
30_start_server.sh

🧑‍💻 Usage

Open in Chrome

Run 40_open_chrome.sh to start Chrome.

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 page.

🧪 How to create this project

Steps to reproduce

🗒️ TODO List

TODO List