4.1. Proof of Concept - Client

The client is the implementation of the agreed upon POC.

Only implement the POC, all the rest is fictional and for Adria documentation purposes only.

Starter Project

The start repository is empty.

The strcuture of this folder is your responsibility but you need to build a working client with Vue.js as framework.

Requirements

  • Follow good practices from previous and current courses.
    • Create readable code
    • Write small functions
    • Ensure functions do one thing
    • Refactor code regularly
    • Follow the naming conventions for files, variables, functions, ...
  • The web applications needs to use the Vue.js framework.
  • The application should have least 3 reuasable components.
  • The project structure and code should be follow using the Compositon API style (setup(), ref(), computed(), watch()).
  • Dockerize the client application by building a working Dockerfile.
  • Build your own gitlab-ci file that:
    • Publishes the source code to Sonar for quality checks
    • Dockerizes the client application and pushes the image to the GitLab Docker registry
  • Sonar quality gates should be green.
  • No tests are required for the client application.

Prerequisites

  • Docker desktop is installed on your machine.

Testing & quality checks locally

Production

In this project, there is no production environment.

There is only a test environment that will run on your local machine.

That's why it's important that the gitlab-ci.yml file is correctly configured to push the docker image to the howest docker registry (hcr.technet.howest.be).

The test environment will pull all images from the howest docker registry and run the Adria solution.

Useful configuration files and commands

To implement all beforementioned requirements, you will need at least the following configuration files and some basic commands.

Use and adapt them to your project structure and needs.

Environment files

Purpose: provide configuration settings to vite with an environment file.

Environment files are generally ignored by git.
You can add an .env.example that shows what kind of variables are available.

Create the following files on the root:

  • .env.development
  • .env.test

Each with content:

VITE_API_BASE_URL=http://localhost:8000

File: sonar-project.properties

Purpose: Configuration file for SonarQube analysis of the client project.

#CHANGE XX TO GROUP NUMBER e.g. XX -> 01
sonar.projectKey=2025.ad-project.adria.XX.client
sonar.projectName=2025.ad-project.adria.XX.client
sonar.host.url=https://sonarqube.ti.howest.be/
sonar.sources=src

File: package.json

Prupose: This file will be generated when you create a new Vue.js project using Vue CLI or vite.

You will need to update it to something like below, note the extra build scripts for building and pushing a vuejs container image.

REMOVE: the tsc scripts and dependencies if you are not using typescript.

Make sure to include scripts for SonarQube analysis.

{
  "name": "adria-client",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "engines": {
    "node": "^20.19.0 || >=22.12.0"
  },
  "scripts": {
    "dev": "vite",
    "build": "npm run type-check && npm run build-only",
    "build:test": "npm run type-check && vite build --mode test",
    "build:dev": "npm run type-check && vite build --mode development",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.22",
    "vue-router": "^4.5.1"
  },
  "devDependencies": {
    "@tsconfig/node22": "^22.0.2",
    "@types/node": "^22.18.6",
    "@vitejs/plugin-vue": "^6.0.1",
    "@vue/tsconfig": "^0.8.1",
    "npm-run-all2": "^8.0.4",
    "typescript": "~5.9.0",
    "vite": "^7.1.7",
    "vite-plugin-vue-devtools": "^8.0.2",
    "vue-tsc": "^3.1.0"
  }
}

File: .gitlab-ci.yml
Purpose: GitLab CI configuration file for building, validating, and deploying the client application

This is a basic example, you need to adjust and extend it to your project structure and needs.

Note how the SonarQube step is uses a script that is defined in the package.json file.

WARNING Make sure the node_modules folders is NOT pushed, it will break the CI/CD.

image: registry.ci.infra.lan:5000/project-2:client-QA

stages:
  - QA
  - build

before_script:
  - ln -s /ci/node_modules .

SonarQube:
  stage: QA
  only:
    - main
  script:
    - node -v
    - npm run sonar-ci
# You will need to find a way to pass the sonar token to command npm run sonar-ci.
# The sonar token is available with the variable $SONAR_TOKEN
# Take an example from the server .gitlab-ci.yml file.

create-image:
  image: registry.ci.infra.lan:5000/ad-project:server-DEPLOY
  only:
    - main
  stage: deploy
  services:
    - name: docker:dind
  tags:
    - docker
  variables:
    DOCKER_TLS_CERTDIR: ""
  script:
# Extend the script so it builds and pushes the Docker image to the howest registry hcr.technet.howest.be

File: Dockerfile

Purpose: Dockerfile for containerizing the Vue.js client application.

This is a basic example, you need to adjust and extend it to your project structure and needs.

FROM node:22-alpine AS builder

WORKDIR /app

COPY package*.json ./

RUN npm ci

COPY . .

ARG BUILD_ENV=dev

RUN npm run build:${BUILD_ENV}

FROM nginx:alpine

COPY --from=builder /app/dist /usr/share/nginx/html

COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

File: .dockerignore

Purpose: ignore unwanted files/folders during docker build phase.

This is a basic generated example, extend if needed.

node_modules
dist
.git
.gitignore
.env.local
.env.*.local
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
.DS_Store
coverage
*.local
.vscode
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.tsbuildinfo
README.md
docker-compose.yml
Dockerfile
.dockerignore

Command: Build and push Docker image locally

The build pipeline will build and push the Docker image to the howest docker registry.
However, you can also do this locally to speed up testing.

Try to understand the commands below.
Especially the --build-arg BUILD_ENV=test part in the build command.
This enviroment concept will be used in further semesters to differentiate between development, test and production builds.

Please use brainpower to adapt the commands to your needs.

Building an image

docker build --build-arg BUILD_ENV=test -t hcr.technet.howest.be/adria-client-group-XX:latest .

Pushing to the howest docker registry

docker push hcr.technet.howest.be/adria-client-group-00:latest

Running the client and server containers locally

To run the client and server locally, just execute the server and client projects from within their own IDEs or terminals.

Only do this during development. Integration testing should always be done using the test environment (see test environment documentation).

In real situations, it's not even common to run both client and server on the same machine.
Mostly, the client will mock the server using mock data. Take it as an extra challenge to implement this mocking mechanism in your client application.