From 774b395f65304c38558a17d6352e59f44575b832 Mon Sep 17 00:00:00 2001 From: Nitin Singh Date: Thu, 16 Nov 2023 03:59:58 -0500 Subject: [PATCH] 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 * 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 --- README.md | 23 +------------- api/Dockerfile | 2 +- api/config/database.js | 19 ++++++++++++ api/config/env.js | 12 ++++++++ api/debug.dockerfile | 41 ++++++++++++++++++++++--- api/package.json | 1 + api/server.js | 3 +- frontend/Dockerfile | 2 ++ frontend/browserslist | 12 ++++++++ frontend/debug.dockerfile | 2 +- frontend/e2e/tsconfig.json | 2 +- frontend/tsconfig.base.json | 20 ++++++++++++ mongo/init-db.d/init-mongo.sh | 58 +++++++++++++++++++++++++++++++++++ 13 files changed, 167 insertions(+), 30 deletions(-) create mode 100644 api/config/database.js create mode 100644 api/config/env.js create mode 100644 frontend/browserslist create mode 100644 frontend/tsconfig.base.json create mode 100644 mongo/init-db.d/init-mongo.sh diff --git a/README.md b/README.md index 136d9cf..152c23b 100644 --- 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 index 5c9a0c1..af041e3 100644 --- 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 new file mode 100644 index 0000000..973ce1b --- /dev/null +++ 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 new file mode 100644 index 0000000..0d32352 --- /dev/null +++ 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 index 6f073db..c586b13 100644 --- 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 index 87bc935..6dc6ad2 100644 --- 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 index 600fdd5..9a94304 100644 --- 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 index 225d334..36cfe6f 100644 --- 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 new file mode 100644 index 0000000..8084853 --- /dev/null +++ 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'. \ No newline at end of file diff --git a/frontend/debug.dockerfile b/frontend/debug.dockerfile index 6b6b8b8..e0023b0 100644 --- 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 index eddd492..612ad2f 100644 --- 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 new file mode 100644 index 0000000..f69f654 --- /dev/null +++ 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 new file mode 100644 index 0000000..49c6731 --- /dev/null +++ b/mongo/init-db.d/init-mongo.sh @@ -0,0 +1,58 @@ +mongo -- "$MONGO_INITDB_DATABASE" <