From b0c5f9f0ff48d10b4777c814614f5aaea8c3236e Mon Sep 17 00:00:00 2001
From: Florian Trayon <26360935+FlorianLeChat@users.noreply.github.com>
Date: Sat, 8 Jun 2024 21:01:05 +0200
Subject: [PATCH] Added required files for Docker image build with GitHub
 Actions

---
 .dockerignore      | 10 ++++++++++
 Dockerfile         | 26 ++++++++++++++++++++++++++
 README.md          |  6 ++++++
 docker-compose.yml | 21 +++++++++++++++++++++
 4 files changed, 63 insertions(+)
 create mode 100644 .dockerignore
 create mode 100644 Dockerfile
 create mode 100644 docker-compose.yml

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..62cbd10
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,10 @@
+**/*.md
+**/.git*
+**/.dockerignore
+**/.editorconfig
+**/.gitattributes
+**/node_modules
+**/Dockerfile
+**/docker-*
+**/CODEOWNERS
+**/LICENSE
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..73d4da9
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,26 @@
+# syntax=docker/dockerfile:1
+
+# Use an customized image of Node.js
+# https://hub.docker.com/_/node
+FROM node:lts-alpine
+
+# Set the working directory to the website files
+WORKDIR /usr/src/app
+
+# Change permissions of the working directory
+RUN chown node:node .
+
+# Copy all files required to build the project
+COPY --chown=node:node . .
+
+# Install all dependencies
+# Use cache mount to speed up installation of existing dependencies
+RUN --mount=type=cache,target=.npm \
+	npm set cache .npm && \
+	npm install && chown -R node:node ./node_modules
+
+# Use non-root user
+USER node
+
+# Run the website
+CMD [ "npm", "run", "dev", "--", "--host", "0.0.0.0" ]
\ No newline at end of file
diff --git a/README.md b/README.md
index 0e30195..aaaba95 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,9 @@
 
 Ce projet est un petit site Internet conçu sous forme de page d'accueil pour les utilisateurs cherchant à avoir un accès rapide vers mes projets les plus aboutis. Il sert également de porte d'entrée vers mon [Portfolio](https://github.com/FlorianLeChat/Portfolio). Comme vous avez pu le deviner, l'apparence générale du site Internet est lourdement inspirée de [craig-feldman/personal-website-react](https://github.com/craig-feldman/personal-website-react) et [perverse/vue-terminal-homepage](https://github.com/perverse/vue-terminal-homepage), le style est très orienté comme pour simuler un *vrai* terminal de commande sous Linux. Néanmoins, j'ai pris soin d'ajouter ma propre touche personnelle et d'utiliser des technologies différentes pour le développement de ce projet.
 
+> [!TIP]
+> Pour tester le projet, vous devez être en posession de [Docker](https://www.docker.com/). Une fois installé, il suffit de lancer l'image Docker de développement à l'aide de la commande `docker compose up --detach --build`. Le site devrait être accessible à l'adresse suivante : https://localhost:5173/. Si vous souhaitez travailler sur le projet avec Docker, vous devez utiliser la commande `docker compose watch --no-up` pour que vos changements locaux soient automatiquement synchronisés avec le conteneur. 🐳
+
 > [!WARNING]
 > L'entièreté du code de ce projet est commenté dans ma langue natale (en français) et n'est pas voué à être traduit en anglais par soucis de simplicité de développement.
 
@@ -13,6 +16,9 @@ ___
 
 This project is a small website designed as a homepage for users looking for quick access to my most advanced projects. It also serves as a gateway to my [Portfolio](https://github.com/FlorianLeChat/Portfolio). As you may have guessed, the overall layout of the website is heavily inspired by [craig-feldman/personal-website-react](https://github.com/craig-feldman/personal-website-react) and [perverse/vue-terminal-homepage](https://github.com/perverse/vue-terminal-homepage), the style being very oriented to simulate a *real* Linux command terminal. However, I took care to add my own personal touch and to use different technologies for the development of this project.
 
+> [!TIP]
+> To try the project, you must have [Docker](https://www.docker.com/) installed. Once installed, simply start the development Docker image with `docker compose up --detach --build` command. The website should be available at https://localhost:5173/. If you want to work on the project with Docker, you need to use `docker compose watch --no-up` to automatically synchronize your local changes with the container. 🐳
+
 > [!WARNING]
 > The whole code of this project is commented in my native language (in French) and will not be translated in English for easier programming.
 
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..9cb349a
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,21 @@
+name: homepage
+
+services:
+    # https://github.com/FlorianLeChat/Homepage
+    node:
+        image: homepage
+        restart: always
+        develop:
+            watch:
+                - action: sync
+                  path: .
+                  target: /usr/src/app
+        healthcheck:
+            test: wget --no-check-certificate -O - https://127.0.0.1:5173
+            retries: 3
+            timeout: 5s
+        build:
+            context: .
+            dockerfile: ./Dockerfile
+        ports:
+            - "5173:5173"
\ No newline at end of file