Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/f5devcentral/spa-demo-app
Single-page application demo leveraging Vue.js, Node.js and MongoDB
https://github.com/f5devcentral/spa-demo-app
demo-app nodejs spa vuejs
Last synced: 3 months ago
JSON representation
Single-page application demo leveraging Vue.js, Node.js and MongoDB
- Host: GitHub
- URL: https://github.com/f5devcentral/spa-demo-app
- Owner: f5devcentral
- License: apache-2.0
- Created: 2021-02-25T13:42:39.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-15T00:48:51.000Z (10 months ago)
- Last Synced: 2024-04-16T00:19:42.453Z (10 months ago)
- Topics: demo-app, nodejs, spa, vuejs
- Language: JavaScript
- Homepage:
- Size: 15.4 MB
- Stars: 10
- Watchers: 6
- Forks: 10
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Single-Page Application Demo
Aggregate test coverage for all components in this repo: [](https://coveralls.io/github/f5devcentral/spa-demo-app?branch=main)
This application demos a modern single-page application built on:
- Vue.js (front-end)
- Node.js (back-end)
- MongoDB (database)
This 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).
## Components
### Frontend
Vue.JS application written in TypeScript that simulates a shopping cart application.
- Environment: Internet facing
### API
Node.JS application running on Express.JS that provides the primary API and access to the database.
- Environment: Internet facing
### Database
MongoDB database that stores information about the user and the products. This database is seeded with user and product data on launch.
- Environment: Internal
### Recommendations
Node.JS microservice that will recommend products.
- Environment: Internet facing
### Inventory
Node.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.
- Environment: Internal, accessibly by the API server
### Checkout
Node.JS microservice that will complete the ordering process.
- Environment: Internet facing
## Features
### Product Detail
The Product detail page contains the recommendations and inventory microservices.
## Deploy
```bash
docker compose up -d
```
## Development
### back-end services (api, inventory, recommendations)
#### Running
```bash
cd
export MONGO_URL="localhost"
export INVENTORY_URL="http://localhost:8002"
export RECOMMENDATIONS_URL="http://recommendations:8001"
npm dev
```
Optionally, to run the dark variant of the Brewz SPA app: `npm run dev:dark`.
To 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.
#### Alternative Product Catalog
By 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:
```bash
PRODUCT_TYPE=coffee
```
#### Unit Tests
```bash
cd
npm run test:unit
```
#### Code Coverage Metrics
```bash
cd
npm run test:coverage
```
Coverage reports will appear in each subproject's `coverage` directory.
### spa (front-end)
```bash
cd spa
npm run dev
```
You will also need to update the *./spa/.env* with the correct API server URL.
### Docker Compose
You can use the docker-compose file leveraged in production for development as well.
```bash
docker-compose up -d
```
To stop the container you want to do development on and run it locally:
```bash
docker-compose rm -sv container-name
```
Then start your front-end or back-end as shown above.
### NGINX
To 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:
```nginx
server {
listen 8080;
location / { proxy_pass http://127.0.0.1:8081/; }
location /api { proxy_pass http://127.0.0.1:8000; }
location /images { proxy_pass http://127.0.0.1:8000/images; }
location /recommendations { proxy_pass http://127.0.0.1:8001; }
location /inventory { proxy_pass http://127.0.0.1:8002; }
location /checkout { proxy_pass http://127.0.0.1:8003; }
}
```
## Attribution
This code is based on the work of [Shaun Wassell](https://www.linkedin.com/in/shaun-wassell?trk=lil_course&lipi=urn%3Ali%3Apage%3Ad_learning_content%3BEJRJvvk4SzmhYz%2Bf1ZJBUw%3D%3D&licu=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/).
I have extended this demo to:
- run components in docker containers
- abstract API and image URLs
- seed MongoDB
- recommendations microservice
- checkout (ordering) microservice
- store inventory simulation
- stats page for all services
- use OIDC and OAuth 2 for authentication/authorization to spa app and backend services via JWT