{"id":18340701,"url":"https://github.com/yousabu/contacts-system-frontend","last_synced_at":"2025-04-09T20:45:07.762Z","repository":{"id":252649073,"uuid":"840933396","full_name":"yousabu/contacts-system-frontend","owner":"yousabu","description":"contacts-system-frontend","archived":false,"fork":false,"pushed_at":"2024-08-12T07:44:13.000Z","size":169,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-15T13:18:06.015Z","etag":null,"topics":["angular","nginx-proxy"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yousabu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2024-08-11T06:14:20.000Z","updated_at":"2024-08-12T07:44:16.000Z","dependencies_parsed_at":"2024-11-05T20:31:56.194Z","dependency_job_id":null,"html_url":"https://github.com/yousabu/contacts-system-frontend","commit_stats":null,"previous_names":["yousabu/contacts-system-frontend"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yousabu%2Fcontacts-system-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yousabu%2Fcontacts-system-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yousabu%2Fcontacts-system-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yousabu%2Fcontacts-system-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yousabu","download_url":"https://codeload.github.com/yousabu/contacts-system-frontend/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248111096,"owners_count":21049568,"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","nginx-proxy"],"created_at":"2024-11-05T20:23:29.123Z","updated_at":"2025-04-09T20:45:07.738Z","avatar_url":"https://github.com/yousabu.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# APP (Angular) \n\nThis project contains the Angular Application\n\n## Features\n\n- Docker Compose for Angular and Nginx service\n- Dockerfile to create a Docker image for the app\n- Azure Pipeline to build and push the image\n- The pipeline will use a Helm chart template located in another repo, update the values.yaml, and then deploy\n\n\n## Development server\n\nRun `npm start` to start the api server in development mode (using nodemon).\n\n### Dockerfile Production\n\n```dockerfile\nFROM node:21-alpine as builder\n\n# Copy dependency definitions\nCOPY package.json package-lock.json ./\n\nRUN npm i \u0026\u0026 mkdir /app \u0026\u0026 mv ./node_modules ./app\n\n# Change directory so that our commands run inside this new directory\nWORKDIR /app\n\n# Get all the code needed to run the app\nCOPY . /app/\n\n# Build server side bundles\nRUN npm run build\n\nFROM node:21-alpine\n## From 'builder' copy published folder\nCOPY --from=builder /app /app\n\nWORKDIR /app\n# Expose the port the app runs in\nEXPOSE 4000\n\nUSER node\n\nCMD [\"node\", \"dist/contacts/server/server.mjs\"]\n\n```\n## Nginx\n- We use Nginx to Manage Connection Between Frontend And Backend.\n```nginx.conf\n  events {\n    worker_connections 1024;\n  }\nhttp {\n  upstream frontend {\n    # These are references to our backend containers, facilitated by\n    # Compose, as defined in docker-compose.yml\n    server contacts_angular:4000;\n  } \n  upstream backend {\n    # These are references to our backend containers, facilitated by\n    # Compose, as defined in docker-compose.yml\n    server contacts_express:3000;\n  }\n  \n\n server {\n    listen 80;\n    server_name frontend;\n    server_name backend;\n\n    location / {\n       resolver 127.0.0.11 valid=30s;\n       proxy_pass http://frontend;\n       proxy_set_header Host $host;\n    }\n    location /api {\n      resolver 127.0.0.11 valid=30s;\n       proxy_pass http://backend;\n       proxy_set_header Host $host;\n    }\n  }\n}\n\n```\n## Run Docker Compose\n\nRun `docker-compose up -d` to start the backend express service and MongoDB.\n- The backend service will now be available at \u003cPublic Server IP\u003e:80, and the frontend can start using it.\n\n![Screenshot from 2024-08-11 15-32-47](https://github.com/user-attachments/assets/38e45222-6cba-47f2-9496-db9fd0a372c0)\n\nRun `docker-compose down` to stop.\n\n![Screenshot from 2024-08-11 15-33-36](https://github.com/user-attachments/assets/ca830af0-1713-443b-a46a-98e1e135e7eb)\n\n### Azure Pipeline\n\n![pang](https://github.com/user-attachments/assets/bbb29d77-4c4e-4afb-9014-8a70cad885cc)\n\n\n\n``` azure-pipelines.yml\nPipeline\n│\n├── Trigger: Branches include 'main'\n│\n├── Pool: yarb\n│\n├── Resources\n│   └── Repositories\n│       └── helmchart-repo (GitHub)\n│\n├── Steps\n│   │\n│   ├── Check Helm Installation\n│   │\n│   ├── Set Image Tags\n│   │\n│   ├── Build and Push Docker Image with Unique Tag\n│   │\n│   ├── Tag and Push Docker Image with Latest Tag\n│   │\n│   ├── Checkout helmchart-repo\n│   │\n│   ├── Check Directory Files\n│   │\n│   ├── Update Image Tag in values.yaml\n│   │\n│   ├── Deploy Express HelmChart\n│   │\n│   ├── Rollback Helm Deployment (on deployment failure)\n│   │\n│   ├── Clean Up Old Docker Images Locally\n│   │\n│   ├── Clean WORKDIR\n│      └── Clean Workspace \n   \n```\n\n\n* HelmChart URL: https://github.com/yousabu/contacts-system-helmchart.git\n* Backend URL  : https://github.com/yousabu/contacts-system-backend.git\n\n## Now Let's Move to Helm Repo \"https://github.com/yousabu/contacts-system-helmchart.git\" ##\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyousabu%2Fcontacts-system-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyousabu%2Fcontacts-system-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyousabu%2Fcontacts-system-frontend/lists"}