ginkishi / angular11-app Goto Github PK

This project forked from ganatan/angular-app

Angular 11 ,Bootstrap 5, Node.js, Express.js, CRUD REST API, PWA, SSR, SEO, Angular Universal, Lazy Loading, PostgreSQL, MYSQL

JavaScript 51.69% TypeScript 15.92% HTML 18.91% CSS 13.47%

angular11-app's Introduction

Angular 11 / Bootstrap 5 & CRUD REST API

it's a repo designed to create a Web Application with Angular 11

Frontend - Angular 11.2.0 & Angular CLI 11.2.0
UI prototypes - bootstrap 5 & bootstrap 4
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/

Front-end : What's included

Dependencies

Features

Quick start

# select a repo from github, gitlab or bitbucket

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

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

# download the example or clone the repo from bitbucket
git clone https://bitbucket.org/ganatan/angular11-app.git

# change directory
cd angular11-app
cd frontend

# 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

Settings

you can select one of these Datasources
Change settings in src/app/modules/application/movies-images-list
File config/config.service.ts
default: LOCAL JSON
LOCAL REST API CRUD : http://localhost:5004

Tests (Use Chrome Version 87 minimum)

npm run lint
npm run test
npm run e2e

Compilation

npm run build ( without SSR)
npm run build:ssr ( with SSR)

Production

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

Bootstrap UI Prototypes

change directory cd ui (Bootstrap 4) or ui-v5 (Bootstrap 5)
Launch html pages in your browser

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