Angular upgrade to 17 (#80)

* Initial commit

* package upgrade for apis

* Update in apis for expressjs

* Fix for response format

* merged

* Folder name updated, Loadbalancer implementation

* Angular upgrade, UI changes and new contact api updates

* About Project structure and how to run

* Contact list files and side menu addedd

* Documentaion link fix from home to dedicated doc

* Removed unused menu from header and sidebar

* Moving Layout module in to Core Module

* Adding grid module, removing user model:
1. renaming model to interface.
2. Grid module added to contact module
3. Updated Contacts routing
4. Fixed contacts link in siderbar

* Contact forms and stype updates

* Contact model updates

* Basic working Add and List functionality

* Modification for contact grid and routing for details page

* Updated Docker-compose file comments

* Rename dockerfile to Dockerfile

* Not required as part of db

* Configuration added for initialize login for mongo and seed data

* Style fix for login page and removed unused docker file

* Dockerfile contents added for all layers

* readme and seed data updated

* Mongo DB connection update

* Angular 10.0.2 version update

* SecretKEy sample moved to compose file

* Dotenv integration, lint and prettier configuration

* Updated configuration for package

* nginx resolver config update

* nginx config update

* app pending changes to enable devleopment mode for docker

* Angular configuration update

* Docker file update for debug

* Angular Debug in docker containers fix

* Package lock file for Angular pushing

* Docker database seed fix

* Readme updates and cleanup

* Frontend veersion update and build fix

* Typo fix in read me

* Fix dockerfile for custom Mongo Image

* Read me update

* updated read me links

* Add files via upload

* Delete dopcker-hub-build-angular.png

* Updated content link and demo video

* Updating content position in readme

* typo fix

* Typo fix and readme section

* Update Angular version to 11

* Error display fix on register, authguard added for contacts

* Error message capture from error interceptor

* Package update and login service injection error fix

* Routing order fix for static content and apis

* GitHub action for angular image

* Updated context

* expressjs actions for build

* Update express-build-and-psuh.yml

* Update angular-build-and-psuh.yml

* Actions update for build

* Action trigger updates

* docker build trigger for nginx - update

* github action modifications

* Angular version update to 11.0.9

* Angular dockerfile update and api package restore from lock file

* Meta tag update for frontend

* SSR fix

* merging

* Build fix for debug mode
Copy package.lock, Fix #18

* Angular v12 update

* Angular upgrade 12.1.2

* Read me update and packge audit fix

* Fix: debug mode dependecy installed

* validation error message display enhancement

* package upgrade

* updated configuration for api taget in debug mode

* form alingmet fixes

* angular packages update

* Other library updates

* first setup of K8s

* Angular update to 13.3.10 and API packages update

* Angular upgrade packge-lock

* update angualr version in readme

* readme fix

* Angular v14 update

* package update

* Alignment fixes for header and Forms (#49)

* Angular upgrade and Alignment fix for header (#50)

* readme update (#52)

* angular 15 upgrade and dockerfile update (#55)

* Angular upgrade to 15.0.3

* readme and dockerfile update

* Update README.md

* Update README.md

* angular 16 upgrade (#67)

* angular read me update (#75)

* angular upgrade

* merged and fixed angular version

* angular upgrade

* Angular upgrade

* Angular readme update

---------

Co-authored-by: Nitin Singh <[email protected]>

.gitignore

@@ -1,3 +1,3 @@
 data
 mongo/db
-.env
+.env

README.md

@@ -3,9 +3,48 @@
 ![Angular Build](https://github.com/nitin27may/mean-docker/workflows/Angular%20Build/badge.svg) 
 ![Nginx Build](https://github.com/nitin27may/mean-docker/workflows/Nginx%20Build/badge.svg)
 # MEAN (Stack) using Docker
+- [MEAN (Stack) using Docker](#mean-stack-using-docker)
+    - [About (MongoDB - Express - Angular - NodeJS)](#about-mongodb---express---angular---nodejs)
+  - [To Quick Run](#to-quick-run)
+  - [Demo](#demo)
+  - [Project Folders](#project-folders)
+  - [About Project](#about-project)
+    - [Built With](#built-with)
+      - [Angular (17.0.1)](#angular-16211)
+      - [Expressjs (4.17.1)](#expressjs-4171)
+      - [Mongo DB](#mongo-db)
+      - [NGINX](#nginx)
+  - [Getting started](#getting-started)
+    - [Using Docker](#using-docker)
+      - [Prerequisite](#prerequisite)
+      - [Development mode:](#development-mode)
+      - [Production mode:](#production-mode)
+        - [Using 2 containers (Express (frontend and api) and Mongo)](#using-2-containers-express-frontend-and-api-and-mongo)
+        - [Using 4 containers (Mongo,api, angular and nginx)](#using-4-containers-mongoapi-angular-and-nginx)
+      - [About Docker Compose File](#about-docker-compose-file)
+      - [Pushing Image to Registry (Github Actions)](#pushing-image-to-registry-github-actions)
+    - [Without Docker](#without-docker)
+      - [Prerequisites](#prerequisites)
+      - [Running the Project](#running-the-project)
+    - [Without Docker](#without-docker-1)
+      - [Prerequisites](#prerequisites-1)
+      - [Running the Project](#running-the-project-1)
+  - [Roadmap](#roadmap)
+  - [Contributing](#contributing)
+  - [License](#license)
+  - [Contact](#contact)
+<!-- * [Usage](#usage) -->
+<!-- * [Acknowledgements](#acknowledgements) -->
 
 ### About (MongoDB - Express - Angular - NodeJS)
 The **MEAN** stack - consisting of MongoDB, Express, Angular, and NodeJS - forms the foundation of a full-stack web application, and this project serves as an ideal starting point for creating one. The project also demonstrates a feasible approach to operating a live application on **Docker** in both development and production settings. Additionally, it features the use of **[Github actions](#pushing-image-to-registry-github-actions)** to construct and upload images to Docker Hub.
+<<<<<<< HEAD
+
+Below is the architecture of the application while it is running.
+
+![](documents/architecture.png)
+=======
+>>>>>>> 7e9a462 (Update README.md)
 
 Below is the architecture of the application while it is running.
 
@@ -39,9 +78,10 @@ The apps written in the following JavaScript frameworks/libraries:
 
 ## About Project
 The web application presented here is uncomplicated yet functional. It features a user registration and login page that are fully operational, as well as a comprehensive demonstration of **CRUD** (Create, Read, Update, Delete) functionality that incorporates Angular Routing and examples of REST API usage with Express.js. Additionally, the REST services are safeguarded by implementing **JWT** (JSON Web Tokens) for enhanced security.
+<<<<<<< HEAD
 
 ### Built With
-#### Angular (16.2.11)
+#### Angular (17.0.1)
 The frontend of this project is built with Angular, which is represented by the "A" in MEAN stack. To enable Server Side Rendering (SSR), we opted to use the Node.js Alpine image instead of a lightweight Docker image like Nginx to run the Angular application.
 
 The project includes sample code for various functionalities, such as 
@@ -52,7 +92,25 @@ The project includes sample code for various functionalities, such as
 
 Additionally, there are samples of code for implementing an authentication guard, services, HTTP interceptors, resolvers, and JWT authentication.
 
+This is a simple web application. It has working user registration, login page and there is a complete example of CRUD which contains example for Angular Routing and exprtess js rest api samples.
+Also, rest services are secure using JWT. 
+
+=======
+
+### Built With
+#### Angular (16.0.1)
+The frontend of this project is built with Angular, which is represented by the "A" in MEAN stack. To enable Server Side Rendering (SSR), we opted to use the Node.js Alpine image instead of a lightweight Docker image like Nginx to run the Angular application.
+
+The project includes sample code for various functionalities, such as 
+- User registration 
+- Login
+- Profile Management 
+- Complete CRUD example for contacts. 
 
+Additionally, there are samples of code for implementing an authentication guard, services, HTTP interceptors, resolvers, and JWT authentication.
+
+
+>>>>>>> 7e9a462 (Update README.md)
 For folder structure details refer this link: [Frontend Folder Structure] (/docs/angular-frontend-structure.md)
 
 **[Dockerfile for Production](/frontend/Dockerfile)**
@@ -217,7 +275,8 @@ services:
     container_name: mean_express
     ports:
       - "3000:3000" #specify ports forewarding
-      # Below database enviornment variable for api is helpful when you have to use database as managed service
+      # Below database enviornment variable for api is helpful when you have to use 
+      # database as managed service
     environment:
       - SECRET=Thisismysecret
       - MONGO_DB_USERNAME=admin-user
@@ -408,6 +467,94 @@ It will run Api on `http://localhost:3000` and frontend on `http://localhost:420
 
 
 
+Earlier, we were using docker hub autobuild triggers to build images and push to registry (Docker Hub), now it is using github action, we can take an example of frontend image: 
+File : 
+[angular-build-and-push.yml](/.github/workflows/angular-build-and-push.yml)
+```
+name: Angular Build
+on:
+  push:
+    branches: master
+    paths: 
+    - 'frontend/**'
+
+jobs:
+  main:
+    runs-on: Ubuntu-20.04
+    steps:
+      -
+        name: Checkout
+        uses: actions/checkout@v2
+      -
+        name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+      -
+        name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+      -
+        name: Login to DockerHub
+        uses: docker/login-action@v1 
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      -
+        name: Build and push
+        id: docker_build
+        uses: docker/build-push-action@v2
+        with:
+          context: frontend/.
+          file: frontend/Dockerfile
+          push: true
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/mean-angular:latest
+          secrets: |
+            GIT_AUTH_TOKEN=${{ secrets.MYTOKEN }}
+      -
+        name: Image digest
+        run: echo ${{ steps.docker_build.outputs.digest }}
+
+```
+
+here, DOCKERHUB_USERNAME is your docker hub username and DOCKERHUB_TOKEN,  we can generate from account settings (account settings > Security > New Access Token) section from your docker hub accounts and add under your github repo > settings > secrets 
+### Without Docker
+
+#### Prerequisites
+
+1. Install latest [Node js ](https://nodejs.org/en/)
+2. Install Nodemon as global package (To run exprerssjs in development mode)
+   `npm install -g nodemon`
+3. Optional (Install Angular CLI
+   `npm install -g @angular/cli`)
+4. Install Mongodb locally or [Signup](https://www.mongodb.com/atlas-signup-from-mlab?utm_source=mlab.com&utm_medium=referral&utm_campaign=mlab%20signup&utm_content=blue%20sign%20up%20button) for a free managed account
+5. Before running the project make sure that you are able to connect MongoDb , you can use [Robo 3T](https://robomongo.org/download) for it
+
+#### Running the Project
+
+Clone the project and run `npm install` in frontend and api folder.
+
+```
+  git clone https://github.com/nitin27may/mean-docker.git
+
+  cd mean-docker/frontend
+
+  npm i
+
+  npm start 
+
+  cd mean-docker/api
+
+  npm i
+
+  npm start 
+
+```
+For passing enviornment variables (database details) in api, Navigate to api folder, __rename `.env.example` to `.env`__ and update your mongo db details there.
+
+  Also, you can run d `npm run dev-server` from frontend folder to run frontend and api together.
+
+It will run Api on `http://localhost:3000` and frontend on `http://localhost:4200`
+
+
+
 <!-- ## Usage
 
 Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.

api/debug.dockerfile

@@ -5,6 +5,16 @@ FROM node:20-alpine
 COPY package.json package-lock.json ./
 
 
+RUN npm ci && mkdir /api && mv ./node_modules ./api
+
+# RUN npm ci
+
+RUN npm install -g nodemon
+
+# Copy dependency definitions
+COPY package.json package-lock.json ./
+
+
 RUN npm ci && mkdir /api && mv ./node_modules ./api
 
 # RUN npm ci