Prérequis
- avoir installé node et npm
- avoir installé docker desktop
Référence
https://www.freecodecamp.org/news/how-to-dockerize-a-react-application/
Créer l'application
Avec create-react-app :
npx create-react-app reactdocker
puis
cd reactdocker/
Créer le fichier Dockerfile
FROM node:18-alpine WORKDIR /react-docker-example/ COPY public/ /react-docker-example/public COPY src/ /react-docker-example/src COPY package.json /react-docker-example/ RUN npm install EXPOSE 3000 CMD ["npm", "start"]
Créer l'image docker
docker build -t todolist-react .
Créer le container docker
Retrouver l'image sur docker desktop et cliquer sur "run". N'oubliez pas de donner un nom à votre container et d'indiquer un numéro de port (ou 0 pour qu'il soit aléatoire).
En ligne de commande :
docker run -dp 8000:3000 --name todolist-react todolist-react
Editer le code de votre container avec VSC
Installer l'extension Remote Development
Utiliser le "remote explorer"
- Cliquer sur l'icône en bas à gauche "Remote Explorer"
- Attendre que les containers soient chargés
- Cliquer sur la flèche "Attach in current window" qui correspond au container de votre choix
*Fig 1 - remote explorer de VSC*
![[containerDocker.png]]
**Lancer (F1) Dev containers : Attach to running container**
> choisir le container souhaité (/dweb Drupalxxxx)
> cliquer sur File > open folder et choisir /opt/Drupal
Tant que nous y sommes, voici les extensions utiles à installer :
- duplicate selection or line (Bacchus)
- Navigate Edits History (Faustini)