Merge pull request #179 from WildCodeSchool/dev

Dev

Author: rocambille

CHANGELOG.md

@@ -9,6 +9,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 [Open an issue](https://github.com/WildCodeSchool/create-js-monorepo/issues) if you have any request/feedback :)
 
+## [7.2.4] - 2025-04-24
+
+### Fixed
+
+- Fixed Docker files to be used in dev and prod. Thanks to [Jean-François Morin-Abdullah](https://github.com/jeanfrancois-morin) for the work.
+
 ## [7.2.3] - 2025-04-16
 
 ### Fixed

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@this-is-to-learn/create-js-monorepo",
-  "version": "7.2.3",
+  "version": "7.2.4",
   "type": "module",
   "description": "Our pedagogical framework for the React-Express-MySQL cursus in Wild Code School",
   "homepage": "https://github.com/wildcodeschool/create-js-monorepo#readme",

package.json

@@ -0,0 +1,3 @@
+node_modules
+dist
+.env

template/.dockerignore

@@ -36,4 +36,3 @@ RUN npm install
 # Set the default command to run the build and start the application.
 # To improve: Separate build and runtime steps. Consider running the build in a multi-stage build
 # to create a smaller final image without unnecessary build tools or intermediate files.
-CMD npm run build && npm run start

template/Dockerfile

@@ -1,6 +1,6 @@
 # {{name}}
 
-Ce projet est un monorepo JS, suivant l'architecture React-Express-MySQL telle qu'enseignée à la Wild Code School (v7.2.3) :
+Ce projet est un monorepo JS, suivant l'architecture React-Express-MySQL telle qu'enseignée à la Wild Code School (v7.2.4) :
 
 ```mermaid
 sequenceDiagram
@@ -54,6 +54,10 @@ Il est pré-configuré avec un ensemble d'outils pour aider les étudiants à pr
     - [REST](#rest)
     - [Autres Bonnes Pratiques](#autres-bonnes-pratiques)
   - [FAQ](#faq)
+    - [Installation avec Docker](#installation-avec-docker)
+      - [Mode développement](#mode-développement)
+      - [Installation de nouvelles dépendances](#installation-de-nouvelles-dépendances)
+      - [Accéder à la base de données](#accéder-à-la-base-de-données)
     - [Déploiement avec Traefik](#déploiement-avec-traefik)
     - [Variables d'environnement spécifiques](#variables-denvironnement-spécifiques)
     - [Logs](#logs)
@@ -302,6 +306,38 @@ declare global {
 
 ## FAQ
 
+### Installation avec Docker
+> ⚠️ Prérequis : Vous devez avoir installé Docker et Docker Compose sur votre machine.  
+> Suivez les instructions ici : [Docker Installation](https://docs.docker.com/get-docker/).
+
+Lorsque Docker est installé et démarré, exécutez la commande suivante pour construire l'image Docker et démarrer les conteneurs :
+```bash
+docker compose up -d --build
+```
+La partie _client_ de l'application sera accessible à l'adresse http://localhost:3000 et la partie _serveur_ à l'adresse http://localhost:3310.  
+Pour arrêter et supprimer les conteneurs, exécutez :
+```bash
+docker compose down
+```
+
+#### Mode développement
+Les dépendances (du dossier `node_modules`) sont installées dans le conteneur Docker et ne seront pas visibles directement. Si vous utilisez un IDE comme VSCode et que vous souhaitez modifier des fichiers de votre application, vous devez installer les dépendances localement pour prévenir toute erreur de fichiers manquants.  
+```bash
+npm install
+```
+
+#### Installation de nouvelles dépendances
+Pour installer de nouvelles dépendances, procédez en local comme d'habitude avec `npm install <package-name>`, puis, synchronisez les dépendances dans le conteneur Docker avec la commande suivante :
+```bash
+docker compose exec web sh -c "npm install"
+```
+
+#### Accéder à la base de données
+Pour vous connecter à la base de données avec votre terminal, exécutez la commande suivante :
+```bash
+docker compose exec database sh -c "mysql -uuser -ppassword js_template_fullstack"
+```
+
 ### Déploiement avec Traefik
 
 > ⚠️ Prérequis : Vous devez avoir installé et configuré Traefik sur votre VPS au préalable. Suivez les instructions ici : [VPS Traefik Starter Kit](https://github.com/WildCodeSchool/vps-traefik-starter-kit/).

template/README.template.md

@@ -6,6 +6,7 @@ services:
     container_name: ${PROJECT_NAME:-project}-web
     env_file:
       - ../envs/.env-${GITHUB_REPOSITORY_NAME}
+    command: sh -c "npm run build && npm run start"
     environment:
       APP_PORT: 3310
       APP_SECRET: ${APP_SECRET:-123456789}

template/docker-compose.prod.yml

@@ -4,11 +4,11 @@ services:
   web:
     build: .
     volumes:
-      - .:/var/www
-      - ./docker-entry.sh:/etc/entrypoint.sh
-    entrypoint: [ "sh", "/etc/entrypoint.sh" ]
+      - .:/usr/src/app
+      - /usr/src/app/node_modules
     ports:
       - "3310:3310"
+      - "3000:3000"
     environment:
       APP_PORT: 3310
       APP_SECRET: 123456789
@@ -17,7 +17,8 @@ services:
       DB_USER: user
       DB_PASSWORD: password
       DB_NAME: js_template_fullstack
-      VITE_API_URL: ""
+      VITE_API_URL: "http://localhost:3310"
+    command: sh -c "npm run dev"
     depends_on:
       database:
         condition: service_healthy