Merge branch '32-add-react-components' of github.com:clicepfl/clic-we…

…bsite-v2 into 32-add-react-components

.devcontainer/docker-compose.yaml

@@ -43,6 +43,23 @@ services:
     volumes:
       - "strapi-data:/var/lib/postgresql/data"
 
+  app:
+    # Build the app service from its folder
+    build:
+      # Build context, relative to the current file
+      context: ../app/.devcontainer
+      # Path to Dockerfile, relative to context
+      dockerfile: Dockerfile
+      args:
+        VARIANT: ${VARIANT:-18-bullseye}
+    environment:
+      NODE_ENV: development
+    volumes:
+      # Bind-mount the app project folder into the container
+      - type: bind
+        source: ../app
+        target: /app
+
 volumes:
   # Persist strapi database
   strapi-data:

app/.devcontainer/Dockerfile

@@ -0,0 +1,12 @@
+# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
+ARG VARIANT=18-bullseye
+FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT}
+
+# the root folder will be mounted at /app in the container
+WORKDIR /app
+
+# use "node" user with UID/GID 1000 (avoid permission issues with root)
+USER node
+
+# install dependencies and run in watch mode
+CMD npm install && npm run dev  

app/.devcontainer/devcontainer.json

@@ -0,0 +1,33 @@
+// strapi service devcontainer
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.238.0/containers/typescript-node
+{
+  "name": "clic-website-devcontainer/app",
+  // Use docker-compose stack, relative to current file
+  "dockerComposeFile": "../../.devcontainer/docker-compose.yaml",
+  // Connect VSCode to following service defined in dockerComposeFile
+  "service": "app",
+  // Working directory inside devcontainer, where project is located
+  "workspaceFolder": "/app",
+  // Configure tool-specific properties.
+  "customizations": {
+    // Configure properties specific to VS Code.
+    "vscode": {
+      // Add the IDs of extensions you want installed when the container is created.
+      "extensions": [
+        // todo highlighter
+        "wayou.vscode-todo-highlight",
+        // linter
+        "dbaeumer.vscode-eslint",
+        // formatter
+        "esbenp.prettier-vscode"
+      ]
+    }
+  },
+  // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+  "remoteUser": "node"
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  // "forwardPorts": [],
+  // Use 'postCreateCommand' to run commands after the container is created.
+  // "postCreateCommand": "yarn install",
+}