Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ganatan/angular-app
Angular 17 ,Bootstrap 5, Node.js, Express.js, CRUD, PWA, SSR, SEO, Lazy Loading, Examples Angular & React nrwl
https://github.com/ganatan/angular-app
angular angular-cli angular-seed angular-starter angular-universal angular16 angular17 bootstrap4 bootstrap5 eslint httpclient lazy-loading modal nrwl pwa react seo ssr starter
Last synced: 4 days ago
JSON representation
Angular 17 ,Bootstrap 5, Node.js, Express.js, CRUD, PWA, SSR, SEO, Lazy Loading, Examples Angular & React nrwl
- Host: GitHub
- URL: https://github.com/ganatan/angular-app
- Owner: ganatan
- Created: 2018-11-26T16:43:12.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-08T05:32:27.000Z (6 months ago)
- Last Synced: 2024-04-08T06:33:34.025Z (6 months ago)
- Topics: angular, angular-cli, angular-seed, angular-starter, angular-universal, angular16, angular17, bootstrap4, bootstrap5, eslint, httpclient, lazy-loading, modal, nrwl, pwa, react, seo, ssr, starter
- Language: HTML
- Homepage:
- Size: 39.7 MB
- Stars: 609
- Watchers: 26
- Forks: 304
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular 18 / Bootstrap 5 & CRUD REST API
it's a repo designed to create a **Web Application with Angular 18**
* Frontend - [**Angular 18.2.1**](https://github.com/angular/angular/releases) & [**Angular CLI 18.2.1**](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](#live-demo)
Here is a working live demo : https://angular.ganatan.com/
# Lighthouse Audit
## Table of contents
- [Status](#status)
- [Quick start](#quick-start)
- [Front-end](#front-end)
- [Back-end](#back-end)
- [Author](#author)
- [Documentation](#documentation)
### Front-end : What's included
> Dependencies
- [x] Angular : 18.2.1
- [x] Angular CLI : 18.2.1
- [x] Angular SSR : 18.2.1
- [x] Bootstrap : 5.3.3
- [x] Fontawesome : 6.6.0
> 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
```bash
# 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](http://localhost:4200)
## Front-end
### Installation
* `npm install` (installing dependencies)
* `npm outdated` (verifying dependencies)
### Developpement
* `npm run start`
* in your browser [http://localhost:4200](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](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](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
```bash
# 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
```bash
# 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
```bash
# 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](http://localhost:5004/movies)
* in your browser [http://localhost:5004/shows](http://localhost:5004/shows)
* in your browser [http://localhost:5004/continents](http://localhost:5004/continents)
* in your browser [http://localhost:5004/countries](http://localhost:5004/countries)
* in your browser [http://localhost:5004/cities](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