A Vue.js Demo Web App with Express Backend Service and MongoDB - Full-Stack, Containerized JavaScript

This is a simple shopping demo app, based on the Vue 3 / TypeScript examples in Essential Typescript by Adam Freeman, which use Vue Router for routing, Vuex for data store and Bootstrap 5 for CSS styles.

The major difference are:

• Overhauled Optional API to the newer, more concise Composition API for all Vue.js components, including typed props and custom events.
• Added a simple transition effect for switching product categories.
• Added a Clear Order button and some minor logic/style adjustment.
• Use Node.js + Express as frontend server as well as the backend REST APIs.
• Use MongoDB as database.
• Use Docker Compose to deploy both web server and MongoDB as Docker containers. Or, you can only run MongoDB as container.

Prepare the Project

Install Node.js and Docker Desktop.

Tested on Windows 10 with Node.js 16.15.1 and Docker 4.9.0.

Install Vue.js app dependencies then compile a production:

npm install
npm run build

Run the Project (only have db as container)

Run MongoDB container with default user/password as root:example:

docker pull mongo:latest
docker run --name mongo -p 27017:27017 -e MONGO_INITDB_ROOT_USERNAME=root -e MONGO_INITDB_ROOT_PASSWORD=example -d mongo

Create database, collections and product data (documents) in the MongoDB container:

node create_db.js

Startup the web server/REST services:

node server.js

The app will be served at http://localhost:3000.

Run the Project (both app and db as container)

The second way is to use Docker Compose to create two containers together:

docker-compose -p vue-ts-express -f docker-compose.yml up -d

The MongoDB container will initialize the data with mongo-init.js. The app will be served at http://localhost:3000.

Stop all containers:

docker-compose -f docker-compose.yml down

Notes

• I only use the root user and expost localhost on both containers purely for convenience.
• I've enounter login problem when I forgot to remove my normally installed MongoDB on my system.