dbwebviewer

A database web viewer. Frontend implemented with Vue.js and backend implemented with Express and Node.js.

Local Development

The development environment is Windows 10 and Powershell 5.1.

Requirements

• Docker Engine / Docker CE or Docker Desktop
• Local running database with docker compose --project-directory ./db up -d
• Node.js

Overview

graph LR
  subgraph fe["Frontend (Vue.js)"]
    style fe rx:10,ry:10
    direction LR
    Router---Component---HTTP
  end
  subgraph be["Backend (Node.js Express, Sequelize)"]
    style be rx:10,ry:10
    RestAPI
    ORM
  end
  subgraph db["Database (MariaDB)"]
    style db rx:10,ry:10
    MariaDB
  end
  fe<-->be<-->db

Loading

Backend with Node.js & Express

cd ./src/backend/
npm install
npm run build
npm run serve

Check the running server with (Invoke-WebRequest http://localhost:8082/).RawContent.

Create an database entry with (Invoke-WebRequest http://localhost:8082/api/tutorials/ -Method POST -Body '{"title": "Title No. 1", "description": "Lorem ipsum dolor..."}' -ContentType "application/json").RawContent.

Get all items from database with (Invoke-WebRequest http://localhost:8082/api/tutorials/).RawContent.

Frontend with Vue.js

cd ./src/frontend/
npm install
npm run serve

Access the frontend with http://localhost:8081/.

Debugging

• Check if Docker running with docker info and docker ps.
• Check if database running with http://localhost:8080/. Credentials are defined in ./db/docker-compose.yaml and default to username root and password 123456.