/weblab-technology-radar

Project for the HSLU WebLab Module

Primary LanguageTypeScript

WebLab - Technology Radar

This project stems from the HSLU Web Programming Lab Module.

The purpose of it is to showcase the usage of JavaScript/TypeScript, both on the server and web-application side.

Users

Since the Application does not have a User Management, there are three predefined Users in the Database Seed which can be used to Login:

EMail Password Role
cto@technology-radar.ch cto-password CTO
tech-lead@technology-radar.ch tech-lead-password Tech-Lead
user@technology-radar.ch user-password User

Setup

First of all, make sure to have Docker installed.

Docker Compose

The repository contains two docker-compose files: one for development and one for "production".

Both of them define the same three services:

  • frontend
  • rest-api
  • database

Production Environment

The production docker-compose.yml file uses the following Dockerfiles:

For the database, a standard postgres docker image is used.

Both Dockerfiles copy the source directory into the container and statically build the applications.

To run the built frontend, a nginx server also had to be setup with a custom nginx config.

If you want start the production containers, run:

docker-compose up

Open the Website: http://localhost:3001

Development Environment

The development docker-compose.dev.yml file uses the following Dockerfiles:

For the database, a standard postgres docker image is used.

Both Dockerfiles mount the respective source directory into the container, which allows for live reloading of the applications.

If you want to start the development containers, run:

docker-compose -f docker-compose.dev.yml up

Open the Website: http://localhost:3001

Cleaning Up Docker

To clean up the created docker containers, use:

docker-compose down --rmi local

To remove the database data, run this when no containers are running:

docker volume rm weblab-technology-radar_pgdata

Alternative to Docker

To setup the application without using docker, a few more steps are required:

Database
  1. Install PostgreSQL (Version 16)
  2. Create a new Database called technology-radar
  3. Change the values inside the .env.postgres so that the RestAPI can connect to the databse.
  4. Run all the SQL Scripts inside the database folder to setup the database schmea and seed data.
RestAPI
  1. Install Node >= 20
  2. Install the dependencies and build/start the application:
cd restapi
npm install

# Either
npm run build
npm run start

# Or
npm run dev
Frontend
  1. Change the proxy.conf.json to
{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}
  1. Install the npm dependencies and start the application:
cd frontend
npm install
npm run start
  1. Open the Website: http://localhost:4200

Testing

The Frontend and Backend both contain Unit Tests.

Backend

To run the Backend Unit Tests, run:

cd backend
npm install
npm run test

Frontend

To run the Frontend Unit Tests, run:

cd frontend
npm install
npm run test