{"id":23213790,"url":"https://github.com/nitin27may/mean-docker","last_synced_at":"2025-04-05T00:06:34.954Z","repository":{"id":38444395,"uuid":"141950588","full_name":"nitin27may/mean-docker","owner":"nitin27may","description":"A full-stack boilerplate with Angular 19 (frontend), Express.js 4.17.1 (API), styled with Bootstrap 5 and MongoDB. Fully containerized with Docker for efficient development and deployment.","archived":false,"fork":false,"pushed_at":"2024-12-17T15:04:47.000Z","size":7454,"stargazers_count":116,"open_issues_count":0,"forks_count":66,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-28T23:05:16.682Z","etag":null,"topics":["angular","angular19","bootstrap5","docker","docker-compose","dockerfile","express","expressjs","github-actions","mean","mean-boilerplate","mean-docker-boilerplate","mongodb","nginx","nodejs","typescript"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nitin27may.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-23T02:22:51.000Z","updated_at":"2025-03-14T11:34:41.000Z","dependencies_parsed_at":"2024-12-11T16:29:45.274Z","dependency_job_id":"e1bfe831-1b2e-4a19-83d4-5fccfea1f923","html_url":"https://github.com/nitin27may/mean-docker","commit_stats":{"total_commits":25,"total_committers":2,"mean_commits":12.5,"dds":"0.040000000000000036","last_synced_commit":"86cf73f9277d0786a9e1483e657ecf2a5355386b"},"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin27may%2Fmean-docker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin27may%2Fmean-docker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin27may%2Fmean-docker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin27may%2Fmean-docker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nitin27may","download_url":"https://codeload.github.com/nitin27may/mean-docker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247266563,"owners_count":20910836,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular19","bootstrap5","docker","docker-compose","dockerfile","express","expressjs","github-actions","mean","mean-boilerplate","mean-docker-boilerplate","mongodb","nginx","nodejs","typescript"],"created_at":"2024-12-18T19:19:20.163Z","updated_at":"2025-04-05T00:06:34.933Z","avatar_url":"https://github.com/nitin27may.png","language":"HTML","readme":"![Mongo Build](https://github.com/nitin27may/mean-docker/workflows/Mongo%20Build/badge.svg)\n![Expressjs Build](https://github.com/nitin27may/mean-docker/workflows/Expressjs%20Build/badge.svg)\n![Angular Build](https://github.com/nitin27may/mean-docker/workflows/Angular%20Build/badge.svg) \n![Nginx Build](https://github.com/nitin27may/mean-docker/workflows/Nginx%20Build/badge.svg)\n# MEAN Stack Project with Docker and Bootstrap 5\n\n\n### Overview\nThis project demonstrates a MEAN (**MongoDB, Express, Angular, NodeJS**) stack application running on Docker. It is an ideal starting point for creating a full-stack web application and demonstrates both development and production setups using Docker. Additionally, it showcases using GitHub Actions for building and pushing Docker images to Docker Hub.\n\nThe architecture of the application while running:\n\n![](docs/screenshots/architecture.png)\n\n## Quick Start\nClone repo, navigate to root folder and run ` docker-compose -f 'docker-compose.nginx.yml' up`\n\n```\n  git clone https://github.com/nitin27may/mean-docker.git\n  cd mean-docker \n  docker-compose -f 'docker-compose.nginx.yml' up\n```\n\u003c!--## Demo\n\nhttps://user-images.githubusercontent.com/8065536/138562565-f601586c-ef38-43b6-8db7-67a4bdefbb96.mp4--\u003e\n\n## Project Structure \nThis project is organized into several folders, each representing a different component built with popular JavaScript frameworks and libraries:\n\n| folder          | Description                                                                                  |\n| --------------- | -------------------------------------------------------------------------------------------- |\n| **frontend** | [frontend app using **Angular**](https://github.com/nitin27may/mean-docker/tree/master/frontend)         |\n| **api** | [api using **expressjs**](https://github.com/nitin27may/mean-docker/tree/master/api) |\n| **loadbalancer** | [load balancer using **nginx**](https://github.com/nitin27may/mean-docker/tree/master/loadbalancer) |\n| **mongo** | [mongo db image setup](https://github.com/nitin27may/mean-docker/tree/master/mongo) |\n\n## Project Details\nThis 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.\n\n### Technologies Used\n#### Angular (19.0.3)\nThe 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.\n\nThe project includes sample code for various key functionalities, such as:\n- User registration \n- Login\n- Profile Management \n- Complete CRUD example for contacts. \n\nAdditionally, you'll find examples of implementing authentication guards, services, HTTP interceptors, resolvers, and JWT authentication.\n\nThis application is designed to be user-friendly, featuring a functional registration and login page, along with a comprehensive CRUD implementation that showcases Angular Routing and Express.js REST API examples. All REST services are secured using JWT for enhanced security.\n\nFor folder structure details refer this link: [Frontend Folder Structure] (/docs/angular-frontend-structure.md)\n\n**[Dockerfile for Production](/frontend/Dockerfile)**\n**[Dockerfile for Development](/frontend/debug.dockerfile)**\n\n#### Expressjs (4.17.1)\n\nIn the MEAN stack, the \"E\" stands for Express.js, which is used to develop all REST services.\n\nThis project includes samples for:\n\n1. Mongo dB connection and schema validation using Mongoose\n2. JWT implementation for Authorization\n3. API routing\n4. User registration \u0026 login APIs\n5. Complete CRUD example for Contact\n\nFor folder structure details refer this link: [API Folder Structure](/docs/expressjs-api-structure.md)\n\n**[Dockerfile for production](/api/Dockerfile)**\n**[Dockerfile for development](/api/debug.dockerfile)**\n\n#### Mongo DB\n\nWe 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.\n\n**[Seed data script](/mongo/init-db.d/init-mongo.sh)**\n\n### Data Seed\n\n We have added a seed file with data, which will be loaded on docker compose, it has 1 user and 3 contacts:\n \n | Username             |  Passsword    |\n |----------------------|---------------|\n |nitin27may@gmail.com  | P@ssword#321  |\n\n#### NGINX\n\n_Note: only if you are using docker. _\n\nWe have uses NGINX loadbalancer in case if there is a requirement that frontend and api need to be exposed on same port.\n For configutration please check [nginx.conf](/loadbalancer/nginx.conf)\n\n**Load balancer (nginx) [Dockerfile](/api/loadbalancer)**\n\n## Getting started\n\n### Using Docker\n\nRename `.env.example` to `.env` :\n\nShell\n```bash\nmv .env.example .env\n```\nPowershell\n```powershell\nRename-Item .env.example .env\n```\n\n#### Prerequisite\nInstall latest [Docker Desktop](https://www.docker.com/products/docker-desktop)\n\n#### Development mode:\n  You can start the application in debug mode (database, api and frontend) using docker-compose:\n\n  ```\n  git clone https://github.com/nitin27may/mean-docker.git\n  cd mean-docker\n  \n  docker-compose -f 'docker-compose.debug.yml' up\n  ```\n\n  It will run frontend `http://localhost:4200` and api on `http://localhost:3000`. you can also access mongodb on port 27017.\n\n  Also, it will automatically refresh (hot reload) your UI for code changes. That is also true for expressjs file changes. \n     \n#### Production mode:\n\n  For Production mode, there is 2 options: \n ##### Using 2 containers (Express (frontend and api) and Mongo)\n\n  ```\n    git clone https://github.com/nitin27may/mean-docker.git\n    cd mean-docker\n    \n    docker-compose -f 'docker-compose.yml' up\n  ```\n  or just run beow as docker consider default file name 'docker-compose.yml'\n  ``` \n    docker-compose up\n  ```\n  It will run frontend and api on `http://localhost:3000`. you can also access mongodb on port 27017\n ##### Using 4 containers (Mongo,api, angular and nginx)\n  ```\n    git clone https://github.com/nitin27may/mean-docker.git\n    cd mean-docker\n\n    docker-compose -f 'docker-compose.nginx.yml' up\n  ```\n  It will run frontend and api on `http://localhost`. you can aslo access by it's invidual ports. For Frontend `http://localhost:4000` and for api `http://localhost:3000` .you can also access mongodb on port 27017\n#### About Docker Compose File\nThe main focus of this project to show case the possible way to run a real application (Mean stack) using docker.\n\nwe have considered 3 scenarios:\n\n1. **Using 2 containers** ([docker-compose.yml](/docker-compose.yml)) \n\n   \n    * express: To host Frontend (Angular) and backend api (expressjs) together\n    * database: To host MongoDB \n\n  _Note: If in above case we are using MongoDB as managed service then we will require only one container._\n\n\n```dockerfile\nversion: \"3.8\" # specify docker-compose version\n\n# Define the services/containers to be run\nservices:\n  express: #name of the second service\n    build: # specify the directory of the Dockerfile\n      context: .\n      dockerfile: dockerfile\n      args:\n        BASE_HREF: ${BASE_HREF:-/}\n    container_name: ${ID_PROJECT:-mean}_angular_express\n    ports:\n      - \"3000:3000\" #specify ports forewarding\n      # Below database enviornment variable for api is helpful when you have to use database as managed service\n    environment:\n      - SECRET=${SECRET}\n      - MONGO_DB_USERNAME=${MONGO_DB_USERNAME}\n      - MONGO_DB_PASSWORD=${MONGO_DB_PASSWORD}\n      - MONGO_DB_HOST=${MONGO_DB_HOST}\n      - MONGO_DB_PORT=${MONGO_DB_PORT}\n      - MONGO_DB_PARAMETERS=${MONGO_DB_PORT}\n      - MONGO_DB_DATABASE=${MONGO_DB_DATABASE}  \n    links:\n      - database\n\n  database: # name of the third service\n    image: mongo:latest # specify image to build container from\n    container_name: ${ID_PROJECT:-mean}_mongo\n    environment:\n      - MONGO_INITDB_ROOT_USERNAME=${MONGO_DB_USERNAME}\n      - MONGO_INITDB_ROOT_PASSWORD=${MONGO_DB_PASSWORD}\n      - MONGO_DB_USERNAME=${MONGO_DB_USERNAME}\n      - MONGO_DB_PASSWORD=${MONGO_DB_PASSWORD}\n      - MONGO_DB=${MONGO_DB_DATABASE}\n    volumes:\n      - ./mongo:/home/mongodb\n      - ./mongo/init-db.d/:/docker-entrypoint-initdb.d/\n      - ./mongo/db:/data/db\n    ports:\n      - \"27017:27017\" # specify port forewarding\n\n```\n\n2. **Using 4 containers** ([docker-compose.nginx.yml](/docker-compose.nginx.yml))\n   \n    * angular: Application's frontend (Angular) \n    * express: Application's Rest services (expressjs)\n    * database: Application database: MongoDB\n    * nginx: As laod balancer, also expose UI and API on same ports\n\n  _Note: If in above case we are using MongoDB as managed service  then we will require only one container._\n```dockerfile\nversion: \"3.8\" # specify docker-compose version\n\n# Define the services/containers to be run\nservices:\n  angular: # name of the first service\n    build: frontend # specify the directory of the Dockerfile\n    container_name: ${ID_PROJECT:-mean}_angular\n    restart: always\n    ports:\n      - \"4000:4000\" # specify port forewarding\n    environment:\n      - NODE_ENV=dev\n\n  express: #name of the second service\n    build: api # specify the directory of the Dockerfile\n    container_name: ${ID_PROJECT:-mean}_express\n    restart: always\n    ports:\n      - \"3000:3000\" #specify ports forewarding\n      # Below database enviornment variable for api is helpful when you have to use database as managed service\n    environment:\n      - SECRET=${SECRET}\n      - MONGO_DB_USERNAME=${MONGO_DB_USERNAME}\n      - MONGO_DB_PASSWORD=${MONGO_DB_PASSWORD}\n      - MONGO_DB_HOST=${MONGO_DB_HOST}\n      - MONGO_DB_PORT=${MONGO_DB_PORT}\n      - MONGO_DB_PARAMETERS=${MONGO_DB_PORT}\n      - MONGO_DB_DATABASE=${MONGO_DB_DATABASE}  \n      - EXPRESS_PORT=${MONGO_DB_DATABASE}\n    links:\n      - database\n\n  database: # name of the third service\n    image: mongo:latest # specify image to build container from\n    container_name: ${ID_PROJECT:-mean}_mongo\n    restart: always\n    environment:\n      - MONGO_INITDB_ROOT_USERNAME=${MONGO_DB_USERNAME}\n      - MONGO_INITDB_ROOT_PASSWORD=${MONGO_DB_PASSWORD}\n      - MONGO_DB_USERNAME=${MONGO_DB_USERNAME}\n      - MONGO_DB_PASSWORD=${MONGO_DB_PASSWORD}\n      - MONGO_DB=${MONGO_DB_DATABASE}\n    volumes:\n      - ./mongo:/home/mongodb\n      - ./mongo/init-db.d/:/docker-entrypoint-initdb.d/\n      - ./mongo/db:/data/db\n    ports:\n      - \"27017:27017\" # specify port forewarding\n\n  nginx: #name of the fourth service\n    build: loadbalancer # specify the directory of the Dockerfile\n    container_name: ${ID_PROJECT:-mean}_nginx\n    restart: always\n    ports:\n      - \"80:80\" #specify ports forewarding\n    links:\n      - express\n      - angular\n\n```\n\n3. **Development Mode** ([docker-compose.debug.yml](/docker-compose.debug.yml))\n\n    It will run 3 containers which are required for development.\n\n  ```dockerfile\n version: \"3.8\" # specify docker-compose version\n\n# Define the services/containers to be run\nservices:\n  angular: # name of the first service\n    build: # specify the directory of the Dockerfile\n      context: ./frontend\n      dockerfile: debug.dockerfile\n    command: sh -c \"npm install --legacy-peer-deps \u0026\u0026 ng serve --host 0.0.0.0 --poll=2000 --disable-host-check\"\n    container_name: ${ID_PROJECT:-mean}_angular\n    volumes:\n      - ./frontend:/app\n    ports:\n      - \"4200:4200\" # specify port forewarding\n      - \"49153:49153\"\n    environment:\n      - NODE_ENV=dev\n    links: \n      - express \n\n  express: #name of the second service\n    build: # specify the directory of the Dockerfile\n      context: ./api\n      dockerfile: debug.dockerfile\n    container_name: ${ID_PROJECT:-mean}_express\n    command: sh -c \"npm install \u0026\u0026 npm run dev:server\"\n    volumes:\n      - ./api:/api\n    ports:\n      - \"3000:3000\" #specify ports forewarding\n      - \"9229:9229\"\n    environment:\n      - SECRET=${SECRET}\n      - MONGO_DB_USERNAME=${MONGO_DB_USERNAME}\n      - MONGO_DB_PASSWORD=${MONGO_DB_PASSWORD}\n      - MONGO_DB_HOST=${MONGO_DB_HOST}\n      - MONGO_DB_PORT=${MONGO_DB_PORT}\n      - MONGO_DB_PARAMETERS=${MONGO_DB_PORT}\n      - MONGO_DB_DATABASE=${MONGO_DB_DATABASE}  \n      - NODE_ENV=${NODE_ENV}\n      - MONGO_INITDB_DATABASE=${MONGO_DB_DATABASE}\n    links:\n      - database\n\n  database: # name of the third service\n    image: mongo # specify image to build container from\n    container_name: ${ID_PROJECT:-mean}_mongo\n    environment:\n      - MONGO_INITDB_ROOT_USERNAME=${MONGO_DB_USERNAME}\n      - MONGO_INITDB_ROOT_PASSWORD=${MONGO_DB_PASSWORD}\n      - MONGO_DB_USERNAME=${MONGO_DB_USERNAME}\n      - MONGO_DB_PASSWORD=${MONGO_DB_PASSWORD}\n      - MONGO_DB=${MONGO_DB_DATABASE}\n\n    volumes:\n      - ./mongo:/home/mongodb\n      - ./mongo/init-db.d/:/docker-entrypoint-initdb.d/\n      - ./mongo/db:/data/db\n    ports:\n      - \"27017:27017\" # specify port forewarding\n\n\n  ```\n#### Pushing Image to Registry (Github Actions)\n\nEarlier, 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: \nFile : \n[angular-build-and-push.yml](/.github/workflows/angular-build-and-push.yml)\n```\nname: Angular Build\non:\n  push:\n    branches: master\n    paths: \n    - 'frontend/**'\n\njobs:\n  main:\n    runs-on: Ubuntu-20.04\n    steps:\n      -\n        name: Checkout\n        uses: actions/checkout@v2\n      -\n        name: Set up QEMU\n        uses: docker/setup-qemu-action@v1\n      -\n        name: Set up Docker Buildx\n        uses: docker/setup-buildx-action@v1\n      -\n        name: Login to DockerHub\n        uses: docker/login-action@v1 \n        with:\n          username: ${{ secrets.DOCKERHUB_USERNAME }}\n          password: ${{ secrets.DOCKERHUB_TOKEN }}\n      -\n        name: Build and push\n        id: docker_build\n        uses: docker/build-push-action@v2\n        with:\n          context: frontend/.\n          file: frontend/Dockerfile\n          push: true\n          tags: ${{ secrets.DOCKERHUB_USERNAME }}/mean-angular:latest\n          secrets: |\n            GIT_AUTH_TOKEN=${{ secrets.MYTOKEN }}\n      -\n        name: Image digest\n        run: echo ${{ steps.docker_build.outputs.digest }}\n\n```\n\nhere, DOCKERHUB_USERNAME is your docker hub username and DOCKERHUB_TOKEN,  we can generate from account settings (account settings \u003e Security \u003e New Access Token) section from your docker hub accounts and add under your github repo \u003e settings \u003e secrets \n### Without Docker\n\n#### Prerequisites\n\n1. Install latest [Node js ](https://nodejs.org/en/)\n2. Install Nodemon as global package (To run exprerssjs in development mode)\n   `npm install -g nodemon`\n3. Optional (Install Angular CLI\n   `npm install -g @angular/cli`)\n4. Install Mongodb locally or [Signup](https://www.mongodb.com/atlas-signup-from-mlab?utm_source=mlab.com\u0026utm_medium=referral\u0026utm_campaign=mlab%20signup\u0026utm_content=blue%20sign%20up%20button) for a free managed account\n5. Before running the project make sure that you are able to connect MongoDb , you can use [Robo 3T](https://robomongo.org/download) for it\n\n#### Running the Project\n\nClone the project and run `npm install` in frontend and api folder.\n\n```\n  git clone https://github.com/nitin27may/mean-docker.git\n\n  cd mean-docker/frontend\n\n  npm i\n\n  npm start \n\n  cd mean-docker/api\n\n  npm i\n\n  npm start \n\n```\nFor passing enviornment variables (database details) in api, Navigate to api folder, __rename `.env.example` to `.env`__ and update your mongo db details there.\n\n  Also, you can run d `npm run dev-server` from frontend folder to run frontend and api together.\n\nIt will run Api on `http://localhost:3000` and frontend on `http://localhost:4200`\n\n\n\n\u003c!-- ## Usage\n\nUse 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.\n\nFor more examples, please refer to the [Documentation](https://example.com) --\u003e\n\n## Roadmap\n\nSee the [open issues](https://github.com/nitin27may/mean-docker/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) for a list of proposed features (and known issues).\n\n\n\u003c!-- CONTRIBUTING --\u003e\n## Contributing\n\nContributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are *greatly appreciated*.\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## License\n[MIT](https://github.com/nitin27may/mean-docker/blob/master/LICENSE/)\n  ## Contact\n  Nitin Singh - [@nitin27may](https://twitter.com/nitin27may) \n\n\u003c!-- Project Link: [https://github.com/your_username/repo_name](https://github.com/your_username/repo_name)\n   --\u003e\n  \u003c!-- ## Acknowledgements\n* [GitHub Emoji Cheat Sheet](https://www.webpagefx.com/tools/emoji-cheat-sheet)\n* [Img Shields](https://shields.io)\n* [Choose an Open Source License](https://choosealicense.com)\n* [GitHub Pages](https://pages.github.com) --\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitin27may%2Fmean-docker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnitin27may%2Fmean-docker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitin27may%2Fmean-docker/lists"}