{"id":20329843,"url":"https://github.com/f5devcentral/spa-demo-app","last_synced_at":"2025-04-11T21:00:37.367Z","repository":{"id":36985515,"uuid":"342257425","full_name":"f5devcentral/spa-demo-app","owner":"f5devcentral","description":"Single-page application demo leveraging Vue.js, Node.js and MongoDB","archived":false,"fork":false,"pushed_at":"2024-12-16T00:19:26.000Z","size":17620,"stargazers_count":10,"open_issues_count":19,"forks_count":10,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-12-22T10:35:38.482Z","etag":null,"topics":["demo-app","nodejs","spa","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/f5devcentral.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":"2021-02-25T13:42:39.000Z","updated_at":"2024-12-14T08:31:22.000Z","dependencies_parsed_at":"2023-09-26T04:27:00.025Z","dependency_job_id":"68765ea4-31b9-4f35-b72b-eef298e2fab4","html_url":"https://github.com/f5devcentral/spa-demo-app","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f5devcentral%2Fspa-demo-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f5devcentral%2Fspa-demo-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f5devcentral%2Fspa-demo-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f5devcentral%2Fspa-demo-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/f5devcentral","download_url":"https://codeload.github.com/f5devcentral/spa-demo-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248480435,"owners_count":21110936,"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":["demo-app","nodejs","spa","vuejs"],"created_at":"2024-11-14T20:13:44.502Z","updated_at":"2025-04-11T21:00:36.832Z","avatar_url":"https://github.com/f5devcentral.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Single-Page Application Demo\n\nAggregate test coverage for all components in this repo: [![Coverage Status](https://coveralls.io/repos/github/f5devcentral/spa-demo-app/badge.svg?branch=main)](https://coveralls.io/github/f5devcentral/spa-demo-app?branch=main)\n\nThis application demos a modern single-page application built on:\n\n- Vue.js (front-end)\n- Node.js (back-end)\n- MongoDB (database)\n\nThis application was created to help train people on [NGINX](https://www.nginx.com/) and the [F5 Distributed Cloud Services](https://www.f5.com/cloud) capabilities. It is featured in the [Modern Apps Jumpstart Workshop](https://github.com/f5devcentral/modern_app_jumpstart_workshop).\n\n![Brewz Site](./assets/demo_brewz.png)\n\n## Components\n\n### Frontend\n\nVue.JS application written in TypeScript that simulates a shopping cart application.\n\n- Environment: Internet facing\n\n### API\n\nNode.JS application running on Express.JS that provides the primary API and access to the database.\n\n- Environment: Internet facing\n\n### Database\n\nMongoDB database that stores information about the user and the products.  This database is seeded with user and product data on launch.\n\n- Environment: Internal\n\n### Recommendations\n\nNode.JS microservice that will recommend products.\n\n- Environment: Internet facing\n\n### Inventory\n\nNode.JS microservice that will tell the local store inventory.  Note, this microservice is accessed through the API and simulates the API server talking to an internal service.\n\n- Environment: Internal, accessibly by the API server\n\n### Checkout\n\nNode.JS microservice that will complete the ordering process.\n\n- Environment: Internet facing\n\n## Features\n\n### Product Detail\n\nThe Product detail page contains the recommendations and inventory microservices.\n\n![Product Detail](./assets/features.png)\n\n## Deploy\n\n```bash\ndocker compose up -d\n```\n\n## Development\n\n### back-end services (api, inventory, recommendations)\n\n#### Running\n\n```bash\ncd \u003cservice folder here\u003e\nexport MONGO_URL=\"localhost\"\nexport INVENTORY_URL=\"http://localhost:8002\"\nexport RECOMMENDATIONS_URL=\"http://recommendations:8001\"\nnpm dev\n```\n\nOptionally, to run the dark variant of the Brewz SPA app: `npm run dev:dark`.\n\nTo show the security features of the app (sign in, etc), you will need to navigate to `/config` in the Brewz app, set the **Enable Security** checkbox, then refresh your browser.\n\n#### Alternative Product Catalog\n\nBy default, this sample application shows beer products, but it can also be configured to show coffee instead. To do this, set a runtime environment variable on the `mongodb`, `api` and `recommendations` containers:\n\n```bash\nPRODUCT_TYPE=coffee\n```\n\n#### Unit Tests\n\n```bash\ncd \u003cservice folder here\u003e\nnpm run test:unit\n```\n\n#### Code Coverage Metrics\n\n```bash\ncd \u003cservice folder here\u003e\nnpm run test:coverage\n```\n\nCoverage reports will appear in each subproject's `coverage` directory.\n\n### spa (front-end)\n\n```bash\ncd spa\nnpm run dev\n```\n\nYou will also need to update the *./spa/.env* with the correct API server URL.\n\n### Docker Compose\n\nYou can use the docker-compose file leveraged in production for development as well.\n\n```bash\ndocker-compose up -d\n```\n\nTo stop the container you want to do development on and run it locally:\n\n```bash\ndocker-compose rm -sv container-name\n```\n\nThen start your front-end or back-end as shown above.\n\n### NGINX\n\nTo host the Brewz app, you will need a proxy such as NGINX to route the SPA requests to the correct upstream service. The following NGINX conf will accomplish this:\n\n  ```nginx\n  server {\n    listen 8080;\n    location / { proxy_pass http://127.0.0.1:8081/; }\n    location /api { proxy_pass http://127.0.0.1:8000; }\n    location /images { proxy_pass http://127.0.0.1:8000/images; }\n    location /recommendations { proxy_pass http://127.0.0.1:8001; }\n    location /inventory { proxy_pass http://127.0.0.1:8002; }\n    location /checkout { proxy_pass http://127.0.0.1:8003; }\n  }  \n  ```\n\n## Attribution\n\nThis code is based on the work of [Shaun Wassell](https://www.linkedin.com/in/shaun-wassell?trk=lil_course\u0026lipi=urn%3Ali%3Apage%3Ad_learning_content%3BEJRJvvk4SzmhYz%2Bf1ZJBUw%3D%3D\u0026licu=urn%3Ali%3Acontrol%3Ad_learning_content-view_on_linkedin) and his [Creating and Hosting a Full-Stack Site LinkedIn Learning course](https://www.linkedin.com/learning/vue-js-creating-and-hosting-a-full-stack-site/).\n\nI have extended this demo to:\n\n- run components in docker containers\n- abstract API and image URLs\n- seed MongoDB\n- recommendations microservice\n- checkout (ordering) microservice\n- store inventory simulation  \n- stats page for all services\n- use OIDC and OAuth 2 for authentication/authorization to spa app and backend services via JWT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ff5devcentral%2Fspa-demo-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ff5devcentral%2Fspa-demo-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ff5devcentral%2Fspa-demo-app/lists"}