CI: Build and Push on GitHub Container Registry (#31)

* Feature/docker setup (#30)

* feat: add docker files

* fix: docker compose

* feat: docker CI pipeline

* fix: update actions version

* fix: docker commands

---------

Co-authored-by: Francesco <[email protected]>

.env_api

@@ -0,0 +1,12 @@
+DATABASE_TYPE=
+DATABASE_HOST=
+DATABASE_PORT=
+DATABASE_USERNAME=
+DATABASE_PASSWORD=
+DATABASE_NAME=
+DATABASE_SYNCHRONIZE=
+AUTH0_ISSUER_URL=
+AUTH0_AUDIENCE=
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+GOOGLE_REDIRECT_URI=

.env_db

@@ -0,0 +1,3 @@
+POSTGRES_USER=
+POSTGRES_PASSWORD=
+POSTGRES_DB=

.env_web

@@ -0,0 +1,4 @@
+VITE_AUTH0_DOMAIN=
+VITE_AUTH0_CLIENTID=
+VITE_AUTH0_AUDIENCE=
+VITE_BASE_URL=

.github/workflows/docker-ci.yml

@@ -0,0 +1,67 @@
+name: Docker Image CI
+
+on:
+  workflow_run:
+    workflows: ["Test"]
+    types: [completed]
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Prepare
+        id: prep
+        run: |
+          OWNER=$(echo "${{ github.repository_owner }}" | tr '[:upper:]' '[:lower:]')
+          WEB_IMAGE=ghcr.io/$OWNER/hkrecruitment-web
+          API_IMAGE=ghcr.io/$OWNER/hkrecruitment-api
+          
+          if [[ $GITHUB_REF == refs/tags/* ]]; then
+            VERSION=${GITHUB_REF#refs/tags/}
+            WEB_TAGS="$WEB_IMAGE:$VERSION,$WEB_IMAGE:latest"
+            API_TAGS="$API_IMAGE:$VERSION,$API_IMAGE:latest"
+          elif [[ $GITHUB_REF == refs/heads/main ]]; then
+            VERSION=main-$(git rev-parse --short ${{ github.sha }})
+            WEB_TAGS="$WEB_IMAGE:$VERSION,$WEB_IMAGE:latest"
+            API_TAGS="$API_IMAGE:$VERSION,$API_IMAGE:latest"
+          elif [[ $GITHUB_REF == refs/heads/dev ]]; then
+            VERSION=dev-$(git rev-parse --short ${{ github.sha }})
+            WEB_TAGS="$WEB_IMAGE:$VERSION,$WEB_IMAGE:test"
+            API_TAGS="$API_IMAGE:$VERSION,$API_IMAGE:test"
+          else
+            VERSION=$(git rev-parse --short ${{ github.sha }})
+            WEB_TAGS="$WEB_IMAGE:$VERSION"
+            API_TAGS="$API_IMAGE:$VERSION"
+          fi
+
+          echo "::set-output name=web_tags::$WEB_TAGS"
+          echo "::set-output name=api_tags::$API_TAGS"
+        shell: bash
+
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push web image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./Dockerfile_web
+          push: true
+          tags: ${{ steps.prep.outputs.web_tags }}
+
+      - name: Build and push api image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./Dockerfile_api
+          push: true
+          tags: ${{ steps.prep.outputs.api_tags }}

.gitignore

@@ -2,7 +2,7 @@ node_modules/
 build/
 api/src/modules/GAuth/authInfo
 .idea/
-/**/.env
+/**/*.env
 /api/config/*.yaml
 /**/dist
 /**/*.tsbuildinfo
@@ -19,4 +19,4 @@ tmp-*
 
 **/*.sqlite
 
-coverage/
+coverage/

Dockerfile_api

@@ -0,0 +1,35 @@
+# Use Node.js 20
+FROM node:20
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+COPY api/package.json api/
+COPY shared/package.json shared/
+
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+
+# Install pnpm 8
+RUN npm install -g pnpm@8
+
+# Install dependencies
+RUN pnpm install
+
+# Copy all files to the container
+COPY . .
+
+# Check formatting
+RUN pnpm run format-check
+
+# Build the app
+RUN pnpm run build:api
+
+# Expose the port
+EXPOSE 3000
+
+# Start the app
+CMD ["pnpm", "preview:api"]
+

Dockerfile_web

@@ -0,0 +1,36 @@
+# Use Node.js 20
+FROM node:20
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+COPY frontend/package.json frontend/
+COPY api/package.json api/
+COPY shared/package.json shared/
+
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+
+# Install pnpm 8
+RUN npm install -g pnpm@8
+
+# Install dependencies
+RUN pnpm install
+
+# Copy all files to the container
+COPY . .
+
+# Check formatting
+RUN pnpm run format-check
+
+# Build the app
+RUN pnpm run build:web
+
+# Expose the port
+EXPOSE 5173
+
+# Start the app
+CMD ["pnpm", "dev:web"]
+

README.md

@@ -1,25 +1,78 @@
-<img src="https://www.hknpolito.org/Signature/hkn_logo_blu.png" width="100">
+<p align="center">
+    <img src="https://www.hknpolito.org/Signature/hkn_logo_blu.png" width="100">
+</p>
 
-# HKrecruitment
+<h1 align="center">HKRecruitment</h1>
+<p align="center">Official HKN Polito recruitment platform 🚀</p>
 
-HKrecruitment is the platform used by HKN Polito to handle the recruitment process.
-
-This repository follows the strcuture:
-
-- **api** - API endpoints, back-end logic, and data storage
-- **frontend** - React Application UI
-- **shared** - Models, interfaces, and validation logic common to front-end and back-end
+<p align="center">
+<img alt="Quality Gate Status" src="https://sonarcloud.io/api/project_badges/measure?project=MuNuChapterHKN_HKrecruitment&metric=alert_status">
+<img alt="Coverage" src="https://sonarcloud.io/api/project_badges/measure?project=MuNuChapterHKN_HKrecruitment&metric=coverage">
+<img alt="Duplicated Lines (%)" src="https://sonarcloud.io/api/project_badges/measure?project=MuNuChapterHKN_HKrecruitment&metric=duplicated_lines_density">
+<img alt="Lines of Code" src="https://sonarcloud.io/api/project_badges/measure?project=MuNuChapterHKN_HKrecruitment&metric=ncloc">
+<img alt="Security Rating" src="https://sonarcloud.io/api/project_badges/measure?project=MuNuChapterHKN_HKrecruitment&metric=security_rating">
+</p>
 
 ## Useful Links
 
 [Reports](https://drive.google.com/drive/folders/1RqGVtzU4TV6RJPmtjZQPpHVybDpU6DZk?usp=sharing)
 
-[Trello](https://trello.com/b/vnLyKH85/hkrecruitment)
+[Tasks](https://github.com/orgs/MuNuChapterHKN/projects/3/views/2)
 
 [UI Mockups](https://miro.com/app/board/uXjVOdvzKAk=/)
 
 [Database Schema](https://app.diagrams.net/#G19QUWxP5BBB3tWXnATnHP8wFE4wW7NsXw)
 
+## Getting started
+
+### Requirements
+- [Node.js](https://nodejs.org/en/download/current), version >= 18 
+- [pnpm](https://pnpm.io/installation)
+- Either [Docker Compose](https://docs.docker.com/compose/install/) or a [PostgreSQL database](https://www.postgresql.org/download/)
+
+### Clone the repository 
+```
+git clone https://github.com/MuNuChapterHKN/HKrecruitment.git
+```
+
+### Install dependencies 
+
+From the root folder run:
+
+```
+pnpm install
+```
+
+### Setup environment
+#### Database
+Place this [.env file](https://drive.google.com/file/d/1_TbKfKMlw9Rpy6H8AFWDVxRYtMCgsiy6/view?usp=drive_link) in the `/api` folder. It contains environmental variables used to connect to the database and for external services.
+
+#### Auth0
+Place this [.env file](https://drive.google.com/file/d/1o_HY3KvsCyTsTvY_BcIeymQy5TO6w8Ts/view?usp=drive_link) in the `/frontend` folder. It contains environmental variables used to interact with Auth0.
+
+### Run the project
+
+Execute the following commands from the root folder.
+
+#### Backend
+```Shell
+docker compose up # Spins up a PostgreSQL database
+
+pnpm dev:api # Starts the backend server
+``` 
+#### Frontend
+```Shell
+pnpm dev:web # Runs the frontend
+```
+
+## Project structure
+
+This repository follows the structure:
+
+- **api** - API endpoints, back-end logic, and data storage
+- **frontend** - React Application UI
+- **shared** - Models, interfaces, and validation logic common to frontend and backend
+
 ## Contributors
 
 - **Riccardo Zaccone** - _API server_ - [HKN Polito](https://hknpolito.org/)
@@ -32,6 +85,10 @@ This repository follows the strcuture:
 
 - **Marco Pappalardo** - _React application_ - [HKN Polito](https://hknpolito.org/)
 - **Damiano Bonaccorsi** - _React application_ - [HKN Polito](https://hknpolito.org/)
+- **Isabella Lombardi** - _React application_ - [HKN Polito](https://hknpolito.org/)
+- **Filippo Goffredo** - _React application_ - [HKN Polito](https://hknpolito.org/)
+
+- **Alessio Menichinelli** - _DevOps_ - [HKN Polito](https://hknpolito.org/)
 
 ## License
 

docker-compose-dbonly.yml

@@ -0,0 +1,9 @@
+services:
+  db:
+    image: postgres:latest
+    environment:
+      - POSTGRES_USER=hkrecruitment
+      - POSTGRES_PASSWORD=password
+      - POSTGRES_DB=hkrecruitment
+    ports:
+      - '5432:5432'

docker-compose.yml

@@ -1,9 +1,30 @@
 services:
   db:
     image: postgres:latest
-    environment:
-      - POSTGRES_USER=hkrecruitment
-      - POSTGRES_PASSWORD=password
-      - POSTGRES_DB=hkrecruitment
+    env_file:
+      - .env_db
     ports:
       - '5432:5432'
+
+
+  web:
+    build:
+      context: .
+      dockerfile: Dockerfile_web
+    env_file:
+      - .env_web
+    ports:
+      - '5173:5173'
+    depends_on:
+      - db
+
+  api:
+    build:
+      context: .
+      dockerfile: Dockerfile_api
+    env_file:
+      - .env_api
+    ports:
+      - '3000:3000'
+    depends_on:
+      - db

frontend/package.json

@@ -24,7 +24,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview --port 5173",
+    "preview": "vite preview --host --port 5173",
     "clean": "rimraf dist",
     "format": "prettier --write src",
     "format-check": "prettier --check src"