Angular 18 / Bootstrap 5 & CRUD REST API

it's a repo designed to create a Web Application with Angular 18 Frontend - Angular 18.0.6 & Angular CLI 18.0.7 UI prototype - bootstrap 5 Backend - CRUD REST API PostgreSQL See the Live demo, Test the repo with Quick start and for more information Read the step by step Tutorial or read the 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

• Angular : 18.0.6
• Angular CLI : 18.0.7
• Angular SSR : 18.0.7
• Bootstrap : 5.3.3
• Fontawesome : 6.4.2

Features

• Routing
• Lazy Loading
• Server Side Rendering
• Progressive Web App
• Responsive Layout
• Search Engine Optimization (SEO)
• Components
• Services
• Reactive Form
• Template Driven Forms
• 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

• mysql-express-batch (with Node.js)

• mysql-sql (with SQL Scripts)

• postgresql-express-batch (with Node.js)

• postgresql-express-crud (with Node.js and Express)

• postgresql-sql (with SQL Scripts)

Features

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

Database Creation with PostgreSQL

Use the SQL scripts in postgresql-sql

• create-database.sql
• create-domains.sql
• create-tables.sql
• insert-data.sql

Database Creation with MySQL

Use the SQL scripts in mysql-sql

• create-database.sql
• create-tables.sql
• 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