Feature/angular 19 upgrade (#91)

* Fix docker compose debug - Updated init-mongo.sh for this mongo version - Fixed Angular freezing while Building - Add npm install every start, after mount volume - Add disable-host-check for angular to resolve on host * Updated componenet and files for Angular 19 update * fixes for the docker compose and env variables --------- Co-authored-by: Damián Torres <[email protected]>
nitin27may · Dec 11, 2024 · 86cf73f · 86cf73f
1 parent b0558e3
commit 86cf73f
Show file tree

Hide file tree

Showing 33 changed files with 4,753 additions and 3,488 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,7 @@
+.git
+.vscode
+.gitignore
+Makefile
+README.md
+docs
+.github
diff --git a/.env.example b/.env.example
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ This project demonstrates a MEAN (**MongoDB, Express, Angular, NodeJS**) stack a
 
 The architecture of the application while running:
 
-![](documents/architecture.png)
+![](docs/screenshots/architecture.png)
 
 ## Quick Start
 Clone repo, navigate to root folder and run ` docker-compose -f 'docker-compose.nginx.yml' up`
@@ -38,7 +38,7 @@ This project is organized into several folders, each representing a different co
 This application includes features such as user registration, login, and a complete CRUD (Create, Read, Update, Delete) example. It utilizes Angular Routing for navigation and provides REST API samples built with Express.js. The REST services are secured using JWT (JSON Web Tokens), ensuring safe and efficient user authentication.
 
 ### Technologies Used
-#### Angular (18.1.0)
+#### Angular (19.0.3)
 The frontend of this project is developed using Angular, the "A" in the MEAN stack. For Server-Side Rendering (SSR), we chose the Node.js Alpine image over a lightweight Docker image like Nginx to run the Angular application.
 
 The project includes sample code for various key functionalities, such as:
@@ -77,8 +77,15 @@ For folder structure details refer this link: [API Folder Structure](/docs/expre
 
 We are using Mongodb for database. MongoDB is a cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas.
 
-**[Seed data script](/mongo/init-db.d/01.Seed.sh)**
-**[Database user creation script](/mongo/init-db.d/02.Users.sh)**
+**[Seed data script](/mongo/init-db.d/init-mongo.sh)**
+
+### Data Seed
+
+ We have added a seed file with data, which will be loaded on docker compose, it has 1 user and 3 contacts:
+
+ | Username             |  Passsword    |
+ |----------------------|---------------|
+ |[email protected]  | P@ssword#321  |
 
 #### NGINX
 
@@ -93,6 +100,17 @@ We have uses NGINX loadbalancer in case if there is a requirement that frontend
 
 ### Using Docker
 
+Rename `.env.example` to `.env` :
+
+Shell
+```bash
+mv .env.example .env
+```
+Powershell
+```powershell
+Rename-Item .env.example .env
+```
+
 #### Prerequisite
 Install latest [Docker Desktop](https://www.docker.com/products/docker-desktop)
 
@@ -157,36 +175,39 @@ services:
     build: # specify the directory of the Dockerfile
       context: .
       dockerfile: dockerfile
-    container_name: mean_angular_express
+      args:
+        BASE_HREF: ${BASE_HREF:-/}
+    container_name: ${ID_PROJECT:-mean}_angular_express
     ports:
       - "3000:3000" #specify ports forewarding
       # 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
-      - MONGO_DB_PASSWORD=admin-password
-      - MONGO_DB_HOST=database
-      - MONGO_DB_PORT=
-      - MONGO_DB_PARAMETERS=?authSource=admin
-      - MONGO_DB_DATABASE=mean-contacts
+      - SECRET=${SECRET}
+      - MONGO_DB_USERNAME=${MONGO_DB_USERNAME}
+      - MONGO_DB_PASSWORD=${MONGO_DB_PASSWORD}
+      - MONGO_DB_HOST=${MONGO_DB_HOST}
+      - MONGO_DB_PORT=${MONGO_DB_PORT}
+      - MONGO_DB_PARAMETERS=${MONGO_DB_PORT}
+      - MONGO_DB_DATABASE=${MONGO_DB_DATABASE}  
     links:
       - database
 
   database: # name of the third service
     image: mongo:latest # specify image to build container from
-    container_name: mean_mongo
+    container_name: ${ID_PROJECT:-mean}_mongo
     environment:
-      - MONGO_INITDB_ROOT_USERNAME=admin-user
-      - MONGO_INITDB_ROOT_PASSWORD=admin-password
-      - MONGO_DB_USERNAME=admin-user1
-      - MONGO_DB_PASSWORD=admin-password1
-      - MONGO_DB=mean-contacts
+      - MONGO_INITDB_ROOT_USERNAME=${MONGO_DB_USERNAME}
+      - MONGO_INITDB_ROOT_PASSWORD=${MONGO_DB_PASSWORD}
+      - MONGO_DB_USERNAME=${MONGO_DB_USERNAME}
+      - MONGO_DB_PASSWORD=${MONGO_DB_PASSWORD}
+      - MONGO_DB=${MONGO_DB_DATABASE}
     volumes:
       - ./mongo:/home/mongodb
       - ./mongo/init-db.d/:/docker-entrypoint-initdb.d/
       - ./mongo/db:/data/db
     ports:
       - "27017:27017" # specify port forewarding
+
 ```
 
 2. **Using 4 containers** ([docker-compose.nginx.yml](/docker-compose.nginx.yml))
@@ -204,39 +225,42 @@ version: "3.8" # specify docker-compose version
 services:
   angular: # name of the first service
     build: frontend # specify the directory of the Dockerfile
-    container_name: mean_angular
+    container_name: ${ID_PROJECT:-mean}_angular
+    restart: always
     ports:
       - "4000:4000" # specify port forewarding
     environment:
       - NODE_ENV=dev
 
   express: #name of the second service
     build: api # specify the directory of the Dockerfile
-    container_name: mean_express
+    container_name: ${ID_PROJECT:-mean}_express
+    restart: always
     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
-      - MONGO_DB_PASSWORD=admin-password
-      - MONGO_DB_HOST=database
-      - MONGO_DB_PORT=
-      - MONGO_DB_PARAMETERS=?authSource=admin
-      - MONGO_DB_DATABASE=mean-contacts
+      - SECRET=${SECRET}
+      - MONGO_DB_USERNAME=${MONGO_DB_USERNAME}
+      - MONGO_DB_PASSWORD=${MONGO_DB_PASSWORD}
+      - MONGO_DB_HOST=${MONGO_DB_HOST}
+      - MONGO_DB_PORT=${MONGO_DB_PORT}
+      - MONGO_DB_PARAMETERS=${MONGO_DB_PORT}
+      - MONGO_DB_DATABASE=${MONGO_DB_DATABASE}  
+      - EXPRESS_PORT=${MONGO_DB_DATABASE}
     links:
       - database
 
   database: # name of the third service
     image: mongo:latest # specify image to build container from
-    container_name: mean_mongo
+    container_name: ${ID_PROJECT:-mean}_mongo
+    restart: always
     environment:
-      - MONGO_INITDB_ROOT_USERNAME=admin-user
-      - MONGO_INITDB_ROOT_PASSWORD=admin-password
-      - MONGO_DB_USERNAME=admin-user1
-      - MONGO_DB_PASSWORD=admin-password1
-      - MONGO_DB=mean-contacts
+      - MONGO_INITDB_ROOT_USERNAME=${MONGO_DB_USERNAME}
+      - MONGO_INITDB_ROOT_PASSWORD=${MONGO_DB_PASSWORD}
+      - MONGO_DB_USERNAME=${MONGO_DB_USERNAME}
+      - MONGO_DB_PASSWORD=${MONGO_DB_PASSWORD}
+      - MONGO_DB=${MONGO_DB_DATABASE}
     volumes:
       - ./mongo:/home/mongodb
       - ./mongo/init-db.d/:/docker-entrypoint-initdb.d/
@@ -246,75 +270,82 @@ services:
 
   nginx: #name of the fourth service
     build: loadbalancer # specify the directory of the Dockerfile
-    container_name: mean_nginx
+    container_name: ${ID_PROJECT:-mean}_nginx
+    restart: always
     ports:
       - "80:80" #specify ports forewarding
     links:
       - express
       - angular
+
 ```
 
 3. **Development Mode** ([docker-compose.debug.yml](/docker-compose.debug.yml))
 
     It will run 3 containers which are required for development.
 
   ```dockerfile
-  version: "3.8" # specify docker-compose version
-
-  # Define the services/containers to be run
-  services:
-    angular: # name of the first service
-      build: # specify the directory of the Dockerfile
-        context: ./frontend
-        dockerfile: debug.dockerfile
-      container_name: mean_angular
-      volumes:
-        - ./frontend:/frontend
-        - /frontend/node_modules
-      ports:
-        - "4200:4200" # specify port forewarding
-        - "49153:49153"
-      environment:
-        - NODE_ENV=dev
-
-    express: #name of the second service
-      build: # specify the directory of the Dockerfile
-        context: ./api
-        dockerfile: debug.dockerfile
-      container_name: mean_express
-      volumes:
-        - ./api:/api
-        - /api/node_modules
-      ports:
-        - "3000:3000" #specify ports forewarding
-      environment:
-        - SECRET=Thisismysecret
-        - NODE_ENV=development
-        - MONGO_DB_USERNAME=admin-user
-        - MONGO_DB_PASSWORD=admin-password
-        - MONGO_DB_HOST=database
-        - MONGO_DB_PORT=
-        - MONGO_DB_PARAMETERS=?authSource=admin
-        - MONGO_DB_DATABASE=mean-contacts
-      links:
-        - database
-
-    database: # name of the third service
-      image: mongo # specify image to build container from
-      container_name: mean_mongo
-      environment:
-        - MONGO_INITDB_ROOT_USERNAME=admin-user
-        - MONGO_INITDB_ROOT_PASSWORD=admin-password
-        - MONGO_DB_USERNAME=admin-user1
-        - MONGO_DB_PASSWORD=admin-password1
-        - MONGO_DB=mean-contacts
-
-      volumes:
-        - ./mongo:/home/mongodb
-        - ./mongo/init-db.d/:/docker-entrypoint-initdb.d/
-        - ./mongo/db:/data/db
-      ports:
-        - "27017:27017" # specify port forewarding
+ version: "3.8" # specify docker-compose version
+
+# Define the services/containers to be run
+services:
+  angular: # name of the first service
+    build: # specify the directory of the Dockerfile
+      context: ./frontend
+      dockerfile: debug.dockerfile
+    command: sh -c "npm install --legacy-peer-deps && ng serve --host 0.0.0.0 --poll=2000 --disable-host-check"
+    container_name: ${ID_PROJECT:-mean}_angular
+    volumes:
+      - ./frontend:/app
+    ports:
+      - "4200:4200" # specify port forewarding
+      - "49153:49153"
+    environment:
+      - NODE_ENV=dev
+    links: 
+      - express 
+
+  express: #name of the second service
+    build: # specify the directory of the Dockerfile
+      context: ./api
+      dockerfile: debug.dockerfile
+    container_name: ${ID_PROJECT:-mean}_express
+    command: sh -c "npm install && npm run dev:server"
+    volumes:
+      - ./api:/api
+    ports:
+      - "3000:3000" #specify ports forewarding
+      - "9229:9229"
+    environment:
+      - SECRET=${SECRET}
+      - MONGO_DB_USERNAME=${MONGO_DB_USERNAME}
+      - MONGO_DB_PASSWORD=${MONGO_DB_PASSWORD}
+      - MONGO_DB_HOST=${MONGO_DB_HOST}
+      - MONGO_DB_PORT=${MONGO_DB_PORT}
+      - MONGO_DB_PARAMETERS=${MONGO_DB_PORT}
+      - MONGO_DB_DATABASE=${MONGO_DB_DATABASE}  
+      - NODE_ENV=${NODE_ENV}
+      - MONGO_INITDB_DATABASE=${MONGO_DB_DATABASE}
+    links:
+      - database
+
+  database: # name of the third service
+    image: mongo # specify image to build container from
+    container_name: ${ID_PROJECT:-mean}_mongo
+    environment:
+      - MONGO_INITDB_ROOT_USERNAME=${MONGO_DB_USERNAME}
+      - MONGO_INITDB_ROOT_PASSWORD=${MONGO_DB_PASSWORD}
+      - MONGO_DB_USERNAME=${MONGO_DB_USERNAME}
+      - MONGO_DB_PASSWORD=${MONGO_DB_PASSWORD}
+      - MONGO_DB=${MONGO_DB_DATABASE}
+
+    volumes:
+      - ./mongo:/home/mongodb
+      - ./mongo/init-db.d/:/docker-entrypoint-initdb.d/
+      - ./mongo/db:/data/db
+    ports:
+      - "27017:27017" # specify port forewarding
+
 
   ```
 #### Pushing Image to Registry (Github Actions)

diff --git a/api/debug.dockerfile b/api/debug.dockerfile
@@ -5,7 +5,7 @@ WORKDIR /api
 
 COPY package*.json ./
 
-RUN npm i --legacy-peer-deps --unsafe-perm=true --allow-root
+RUN npm install
 
 COPY . /api/
 # Expose the port the app runs in

diff --git a/docker-compose.debug.yml b/docker-compose.debug.yml
@@ -6,7 +6,7 @@ services:
     build: # specify the directory of the Dockerfile
       context: ./frontend
       dockerfile: debug.dockerfile
-    command: sh -c "npm install && ng serve --host 0.0.0.0 --poll=2000 --disable-host-check"
+    command: sh -c "npm install --legacy-peer-deps && ng serve --host 0.0.0.0 --poll=2000 --disable-host-check"
     container_name: ${ID_PROJECT:-mean}_angular
     volumes:
       - ./frontend:/app
@@ -23,34 +23,35 @@ services:
       context: ./api
       dockerfile: debug.dockerfile
     container_name: ${ID_PROJECT:-mean}_express
+
     command: sh -c "npm install && npm run dev:server"
     volumes:
       - ./api:/api
     ports:
       - "3000:3000" #specify ports forewarding
       - "9229:9229"
     environment:
-      - SECRET=Thisismysecret
-      - NODE_ENV=development
-      - MONGO_INITDB_DATABASE=admin
-      - MONGO_DB_USERNAME=admin-user
-      - MONGO_DB_PASSWORD=admin-password
-      - MONGO_DB_HOST=database
-      - MONGO_DB_PORT=
-      - MONGO_DB_PARAMETERS=?authSource=admin
-      - MONGO_DB_DATABASE=mean-contacts
+      - SECRET=${SECRET}
+      - MONGO_DB_USERNAME=${MONGO_DB_USERNAME}
+      - MONGO_DB_PASSWORD=${MONGO_DB_PASSWORD}
+      - MONGO_DB_HOST=${MONGO_DB_HOST}
+      - MONGO_DB_PORT=${MONGO_DB_PORT}
+      - MONGO_DB_PARAMETERS=${MONGO_DB_PORT}
+      - MONGO_DB_DATABASE=${MONGO_DB_DATABASE}  
+      - NODE_ENV=${NODE_ENV}
+      - MONGO_INITDB_DATABASE=${MONGO_DB_DATABASE}
     links:
       - database
 
   database: # name of the third service
     image: mongo # specify image to build container from
     container_name: ${ID_PROJECT:-mean}_mongo
     environment:
-      - MONGO_INITDB_ROOT_USERNAME=admin-user
-      - MONGO_INITDB_ROOT_PASSWORD=admin-password
-      - MONGO_DB_USERNAME=admin-user1
-      - MONGO_DB_PASSWORD=admin-password1
-      - MONGO_DB=mean-contacts
+      - MONGO_INITDB_ROOT_USERNAME=${MONGO_DB_USERNAME}
+      - MONGO_INITDB_ROOT_PASSWORD=${MONGO_DB_PASSWORD}
+      - MONGO_DB_USERNAME=${MONGO_DB_USERNAME}
+      - MONGO_DB_PASSWORD=${MONGO_DB_PASSWORD}
+      - MONGO_DB=${MONGO_DB_DATABASE}
 
     volumes:
       - ./mongo:/home/mongodb