/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

Primary LanguageTypeScriptMIT LicenseMIT

angular-boilerplate · node_js workflow node_js workflow

Technologies Overview 🚀

Technology Purpose Documentation
Angular 18 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

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

Installation with Homebrew (MacOS)

brew install openjdk
sudo ln -sfn $HOMEBREW_PREFIX/opt/openjdk/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk.jdk

Install Maven

Installation with Homebrew (MacOS)

brew install maven

Scripts directory

All development scripts can be found under src/main/scripts.

Install dependencies

Run 01_install_fe.sh to install the JavaScript project. This runs npm install.

01_install_fe.sh

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

02_start_fe_dev_server.sh

Running unit tests

Run 03_test_fe.sh to execute the frontend unit tests via Karma.

03_test_fe.sh

Install Server

Run 10_install_server.sh to install the server project. This runs mvn clean install.

10_install_server.sh

Test Server

Run 11_test_server.sh to test the server project. This runs mvn test.

11_test_server.sh

Build

Run 20_build.sh to build the project. The build artifacts will be stored in the target/ directory.

20_build.sh

Start

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

30_start_server.sh

Open in Chrome

Run 40_open_chrome.sh to start Chrome.

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.

Steps to reproduce

New Angular Project

ng new angular-boilerplate
  • Would you like to enable autocompletion? Yes
  • Would you like to share pseudonymous usage data? No
  • Which stylesheet format would you like to use? CSS
  • Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No

Git

git init
git add *
git commit -m "initial commit"
git branch -M main
git remote add origin https://github.com/hofiorg/angular-boilerplate.git
git push -u origin main

Angular Material

ng add @angular/material
  • Choose a prebuilt theme name, or "custom" for a custom theme: Azure/Blue
  • Set up global Angular Material typography styles? Yes
  • Include the Angular animations module? Include and enable animations

Bootstrap

npm install bootstrap --save

Ngx Datatable

npm install @swimlane/ngx-datatable

NgRx Store and Effects

ng add @ngrx/store@latest
ng add @ngrx/effects@latest

TODO List