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" <