79 docker compose dev mode (#81)

* 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 * docker compose dev mode fix * Angular upgrade, UI changes and new contact api updates * Configuration added for initialize login for mongo and seed data * Mongo DB connection update * Docker file update for debug * Frontend veersion update and build fix * Typo fix in read me * Updated content link and demo video * Update Angular version to 11 * Build fix for debug mode Copy package.lock, Fix #18 * Angular v12 update * Angular upgrade 12.1.2 * Fix: debug mode dependecy installed * package upgrade * angular packages update * Other library updates * first setup of K8s * Angular upgrade packge-lock * update angualr version in readme * readme fix * Angular v14 update * package update * Angular upgrade and Alignment fix for header (#50) * angular 15 upgrade and dockerfile update (#55) * Angular upgrade to 15.0.3 * Update README.md * angular 16 upgrade (#67) * angular upgrade * merged and fixed angular version * angular upgrade * Angular upgrade * Angular readme update * configuration update * 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 <singhknitin@hotmail.com> * Angular upgrade, UI changes and new contact api updates * Docker file update for debug * Frontend veersion update and build fix * Build fix for debug mode Copy package.lock, Fix #18 * Fix: debug mode dependecy installed * merged and fixed angular version * Angular upgrade * docker compose dev mode fix * Angular upgrade, UI changes and new contact api updates * Typo fix in read me * Updated content link and demo video * Angular upgrade 12.1.2 * package upgrade * angular packages update * first setup of K8s * Angular upgrade packge-lock * Angular v14 update * package update * Angular upgrade and Alignment fix for header (#50) * angular 15 upgrade and dockerfile update (#55) * Angular upgrade to 15.0.3 * Update README.md * angular 16 upgrade (#67) * angular upgrade * merged and fixed angular version * angular upgrade * Angular readme update * package lock file * read me update * debug file * user service added * from master * frontend fix --------- Co-authored-by: Nitin Singh <singhknitin@hotmail.com>
nitin27may · Nov 16, 2023 · 774b395 · 774b395
1 parent 42853ea
commit 774b395
Show file tree

Hide file tree

Showing 13 changed files with 167 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@
   - [Project Folders](#project-folders)
   - [About Project](#about-project)
     - [Built With](#built-with)
-      - [Angular (17.0.1)](#angular-16211)
+      - [Angular (17.0.1)](#angular-1701)
       - [Expressjs (4.17.1)](#expressjs-4171)
       - [Mongo DB](#mongo-db)
       - [NGINX](#nginx)
@@ -38,13 +38,10 @@
 
 ### 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.
 
@@ -60,7 +57,6 @@ Clone repo, navigate to root folder and run ` docker-compose -f 'docker-compose.
 ```
 ## Demo
 
-
 https://user-images.githubusercontent.com/8065536/138562565-f601586c-ef38-43b6-8db7-67a4bdefbb96.mp4
 
 
@@ -78,7 +74,6 @@ 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 (17.0.1)
@@ -95,22 +90,6 @@ Additionally, there are samples of code for implementing an authentication guard
 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)**

diff --git a/api/Dockerfile b/api/Dockerfile
@@ -8,7 +8,7 @@ RUN npm set strict-ssl false
 
 
 ## installing and Storing node modules on a separate layer will prevent unnecessary npm installs at each build
-RUN npm ci && mkdir /app && mv ./node_modules ./app
+RUN npm i && mkdir /app && mv ./node_modules ./app
 
 # Change directory so that our commands run inside this new directory
 WORKDIR /app

diff --git a/api/config/database.js b/api/config/database.js
@@ -0,0 +1,19 @@
+const env = require("./env");
+
+env.get();
+module.exports = {
+  mongodb: {
+    uri:
+      "mongodb://" +
+      process.env.MONGO_DB_USERNAME +
+      ":" +
+      process.env.MONGO_DB_PASSWORD +
+      "@" +
+      process.env.MONGO_DB_HOST +
+      (process.env.MONGO_DB_PORT
+        ? ":" + process.env.MONGO_DB_PORT + "/"
+        : "/") +
+      process.env.MONGO_DB_DATABASE +
+      process.env.MONGO_DB_PARAMETERS,
+  },
+};
diff --git a/api/config/env.js b/api/config/env.js
@@ -0,0 +1,12 @@
+const appRootPath = require("app-root-path");
+const fileExists = require("file-exists");
+const env = require("node-env-file");
+
+module.exports = {
+  get: () => {
+    const envFileLocation = appRootPath + "/.env";
+    if (fileExists.sync(envFileLocation)) {
+      env(envFileLocation);
+    }
+  },
+};
diff --git a/api/debug.dockerfile b/api/debug.dockerfile
@@ -1,14 +1,47 @@
 # Create image based off of the official node:18.9.0-alpine3.16
-FROM node:20-alpine
+FROM node:20
 
+WORKDIR /api
 # Copy dependency definitions
-COPY package.json package-lock.json ./
+#COPY package.json package-lock.json ./
 
+RUN sudo chown -R node:node /api
 
-RUN npm ci && mkdir /api && mv ./node_modules ./api
+COPY --chown=node:node package*.json .
+RUN npm ci
+
+RUN sudo chmod -R 777 node_modules
+RUN sudo chmod -R 777 .angular
+# RUN npm ci
+
+RUN npm install -g nodemon
+
+WORKDIR /api
+# Copy dependency definitions
+#COPY package.json package-lock.json ./
+
+RUN sudo chown -R node:node /api
+
+#RUN npm ci && mkdir /api && mv ./node_modules ./api
 
+RUN sudo chmod -R 777 node_modules
+RUN sudo chmod -R 777 .angular
 # RUN npm ci
 
+#RUN npm install -g nodemon
+
+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
+
+#RUN npm install -g nodemon
+
 RUN npm install -g nodemon
 
 # Copy dependency definitions
@@ -23,7 +56,7 @@ RUN npm install -g nodemon
 
 COPY . /api/
 
-WORKDIR /api
+
 
 # Expose the port the app runs in
 EXPOSE 3000

diff --git a/api/package.json b/api/package.json
@@ -8,6 +8,7 @@
     "dev-server": "nodemon server.js"
   },
   "dependencies": {
+    "app-root-path": "^3.0.0",
     "bcryptjs": "^2.1.0",
     "body-parser": "^1.19.0",
     "cors": "^2.8.1",

diff --git a/api/server.js b/api/server.js
@@ -9,6 +9,8 @@ const { expressjwt: expressjwt } = require("express-jwt");
 // Import Mongoose
 let mongoose = require("mongoose");
 
+const config = require("./config.json");
+
 app.use(cors());
 app.use(bodyParser.urlencoded({ extended: true }));
 app.use(bodyParser.json());
@@ -95,7 +97,6 @@ app.use(
 
 const HOST = "0.0.0.0";
 const port = Number(process.env.EXPRESS_PORT) || 3000;
-
 // start server
 // Launch app to listen to specified port
 app.listen(port, () => {

diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -4,6 +4,8 @@ FROM node:20-alpine as builder
 # Copy dependency definitions
 COPY package.json package-lock.json ./
 
+RUN npm install -g npm@9.1.2
+
 ## installing and Storing node modules on a separate layer will prevent unnecessary npm installs at each build
 ## --legacy-peer-deps as ngx-bootstrap still depends on Angular 14
 RUN npm i --legacy-peer-deps && mkdir /app && mv ./node_modules ./app

diff --git a/frontend/browserslist b/frontend/browserslist
@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.
diff --git a/frontend/debug.dockerfile b/frontend/debug.dockerfile
@@ -8,7 +8,7 @@ WORKDIR /app
 COPY package*.json ./
 
 ## installing and Storing node modules on a separate layer will prevent unnecessary npm installs at each build
-RUN npm i --legacy-peer-deps
+RUN npm i --legacy-peer-deps --unsafe-perm=true --allow-root
 
 RUN npm install -g @angular/cli
 

diff --git a/frontend/e2e/tsconfig.json b/frontend/e2e/tsconfig.json
@@ -1,6 +1,6 @@
 /* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
-  "extends": "../tsconfig.json",
+  "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "../out-tsc/e2e",
     "module": "commonjs",

diff --git a/frontend/tsconfig.base.json b/frontend/tsconfig.base.json
@@ -0,0 +1,20 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2015",
+    "module": "es2020",
+    "lib": [
+      "es2018",
+      "dom"
+    ]
+  }
+}
diff --git a/mongo/init-db.d/init-mongo.sh b/mongo/init-db.d/init-mongo.sh
@@ -0,0 +1,58 @@
+mongo -- "$MONGO_INITDB_DATABASE" <<EOF
+    var rootUser = '$MONGO_INITDB_ROOT_USERNAME';
+    var rootPassword = '$MONGO_INITDB_ROOT_PASSWORD';
+    var admin = db.getSiblingDB('admin');
+    admin.auth(rootUser, rootPassword);
+
+    db.createUser({user: rootUser, pwd: rootPassword, roles: ["readWrite"]});
+
+
+db.users.drop();
+db.users.insertMany([
+  {
+    _id: 1,
+    firstName: "John",
+    lastName: "Doe",
+    mobile: "9876543210",
+    username: "john.doe@gmail.com",
+    email: "john.doe@gmail.com",
+   "password" : "$2a$10$85qQuOuD4cDtXOoxbtv0/e79ijARyN/4vpN438N2i8MKLQPUvSX46",
+    create_date: Date(),
+  }
+  ]);
+
+db.contacts.drop();
+db.contacts.insertMany([
+  {
+    _id: 1,
+    firstName: "Nitin",
+    lastName: "Singh",
+    mobile: "9876543243",
+    email: "nitin27may@gmail.com",
+    city: "Mumbai",
+    postalCode: "421201",
+    create_date: Date(),
+  },
+  {
+    _id: 2,
+    firstName: "Sachin",
+    lastName: "Singh",
+    mobile: "9876540000",
+    email: "saching@gmail.com",
+    city: "Pune",
+    postalCode: "421201",
+    create_date: Date(),
+  },
+  {
+    _id: 3,
+    firstName: "Vikram",
+    lastName: "Singh",
+    mobile: "9876540000",
+    email: "saching@gmail.com",
+    city: "Pune",
+    postalCode: "421201",
+    create_date: Date(),
+  }
+]);
+
+EOF