Angular 18 / Bootstrap 5 & CRUD REST API

it's a repo designed to create a **Web Application with Angular 18** * Frontend - [**Angular 18.1.0**](https://github.com/angular/angular/releases) & [**Angular CLI 18.1.0**](https://github.com/angular/angular-cli/releases/) * UI prototype - [**bootstrap 5**](https://v5.getbootstrap.com/docs/5.0/getting-started/download/) * Backend - CRUD REST API [**PostgreSQL**](https://www.postgresql.org/download/) * See the [**Live demo**](#live-demo), Test the repo with [**Quick start**](#quick-start) and for more information Read the step by step [**Tutorial**](#tutorial) or read the [**Getting started**](#getting-started)

Live Demo

Here is a working live demo : https://angular.ganatan.com/

Lighthouse Audit

Table of contents

• Status
• Quick start
• Front-end
• Back-end
• Author
• Documentation

Front-end : What's included

Dependencies

• [x] Angular : 18.1.0
• [x] Angular CLI : 18.1.0
• [x] Angular SSR : 18.1.0
• [x] Bootstrap : 5.3.3
• [x] Fontawesome : 6.4.2

Features

• [x] Routing
• [x] Lazy Loading
• [x] Server Side Rendering
• [x] Progressive Web App
• [x] Responsive Layout
• [x] Search Engine Optimization (SEO)
• [x] Components
• [x] Services
• [x] Reactive Form
• [x] Template Driven Forms
• [x] Search / Grid / Pagination

Quick start

# select a repo from github or gitlab

# download the example or clone the repo from github
git clone https://github.com/ganatan/angular-app.git

# download the example or clone the repo from gitlab
git clone https://gitlab.com/ganatan/angular-app.git

# change directory
cd angular-app
cd application-angular

# install the repo with npm
npm install

# start the server
npm start

in your browser go to http://localhost:4200

Front-end

Installation

• npm install (installing dependencies)
• npm outdated (verifying dependencies)

Developpement

• npm run start
• in your browser http://localhost:4200

Linter

• npm run lint

Tests

• npm run test
• npm run coverage

Compilation

• npm run build ( with SSR)

Production

• npm run serve:ssr
• in your browser http://localhost:4000

Angular & Docker

• build image

• docker build -t angular-starter:1.0.0 .

• run container

• docker run -d -p 4000:4000 angular-starter:1.0.0

• run container mode bash

• docker run -it angular-starter:1.0.0 /bin/bash

• in your browser http://localhost:4000

Back-end

Back-end : What's included

Tools

• [x] mysql-express-batch (with Node.js)
• [x] mysql-sql (with SQL Scripts)

• [x] postgresql-express-batch (with Node.js)
• [x] postgresql-express-crud (with Node.js and Express)
• [x] postgresql-sql (with SQL Scripts)

Features

• [x] Database Creation
• [x] Domains Creation (only PostgreSQL)
• [x] Tables Creation
• [x] Importing Data
• [x] Exporting Data
• [x] Serving RESTful CRUD API

Database Creation with PostgreSQL

Use the SQL scripts in postgresql-sql

• [x] create-database.sql
• [x] create-domains.sql
• [x] create-tables.sql
• [x] insert-data.sql

Database Creation with MySQL

Use the SQL scripts in mysql-sql

• [x] create-database.sql
• [x] create-tables.sql
• [x] insert-data.sql

Database Creation with Node.js and PostgreSQL

PostgreSQL Password

• Change settings in postgresql-express-batch/app/config
• File config/config.json
• dbUser: "postgres"
• dbPassword: "Trustno1" ! Change the Fox Mulder password by your password

# select the repo
cd application-node
cd postgresql-express-batch

# install the repo with npm
npm install

# create database and import JSON data
npm run create

# For the fun delete All data/export Files
# Export JSON data in data/export
npm run export

# Check the new files (for example movies.json) 

Database Creation with Node.js and MySQL

MySQL Password

• Change settings in mysql-express-batch/app/config
• File config/config.json
• dbUser: "root"
• dbPassword: "Trustno1" ! Change the Fox Mulder password by your password

# select the repo
cd application-node
cd mysql-express-batch

# install the repo with npm
npm install

# create database and import JSON data
npm run create

# For the fun delete All data/export Files
# Export JSON data in data/export
npm run export

# Check the new files (for example movies.json) 

Serving CRUD REST API with Node.js & Express & PostgreSQL

PostgreSQL Password

• Change settings in postgresql-express-crud/app/config
• File config/config.json
• dbUser: "postgres"
• dbPassword: "Trustno1" ! Change the Fox Mulder password by your password

# select the repo
cd application-node
cd postgresql-express-crud

# install the repo with npm
npm install

# Serve CRUD REST API : development mode with nodemon
npm run dev

# Serve CRUD REST API : local mode
npm run start

# Serve CRUD REST API : production mode
npm run prod

# Serve CRUD REST API : production mode with pm2 (process manager)
pm2 start process.config.js --env prod

Examples

• Examples Angular
• Examples Bootstrap
• Examples React
• Examples Node

Tests API & PostgreSQL

• in your browser http://localhost:5004/movies
• in your browser http://localhost:5004/shows
• in your browser http://localhost:5004/continents
• in your browser http://localhost:5004/countries
• in your browser http://localhost:5004/cities

Author

• Author : danny

Documentation

English Tutorials

• Step by Step - https://www.ganatan.com/tutorials/en

Tutoriels en français

• Etapes par étapes - https://www.ganatan.com/tutorials