J'exécute ce projet https://github.com/postlight/headless-wp-starter . J'ai pu tout faire fonctionner jusqu'à un point. Le backend fonctionne bien, cependant, le frontend a un bug.
Dans les instructions, il est dit d'exécuter yarn start
pour démarrer le serveur frontal, ce qui devrait être next.js
. Maintenant, cela fonctionne techniquement et fonctionne sur localhost:3000
. Toutefois, lorsque je modifie un fichier scss
dans frontend/src/styles
, il n'est pas rendu à nouveau dans le shell et il n'y a pas de rechargement à chaud dans le navigateur. Même l'actualisation ne montre pas les changements de styles. Cependant, si j'arrête le fil avec ctrl + c
et que je le lance à nouveau avec yarn start
, mes styles apparaissent lors de l'actualisation du navigateur.
J'exécute tout sous docker pour Windows, donc je ne sais pas s'il s'agit d'une limitation ou éventuellement d'un bogue. J'ai posté un problème sur leur github, mais j'ai pensé que cela ne faisait pas mal de vérifier ici aussi.
Le seul code que je peux partager est le package.json
, donc le voici. Merci d'avance.
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "next build",
"start": "node server.js",
"docker:build": "docker build -t frontend .",
"docker:clean": "docker rm -f frontend || true",
"docker:run": "docker run -p 3000:3000 --name frontend frontend",
"docker:stop": "docker stop frontend",
"docker:start": "docker start frontend && yarn run docker:logs",
"docker:logs": "docker logs -f frontend",
"deploy":
"yarn run docker:build && yarn run docker:clean && yarn run docker:run"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.2",
"isomorphic-unfetch": "^2.0.0",
"next": "latest",
"react": "^16.0.0"
},
"devDependencies": {
"autoprefixer": "7.1.5",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-wrap-in-js": "^1.1.0",
"glob": "^7.1.2",
"node-sass": "^4.4.0",
"normalize.css": "^7.0.0",
"postcss-easy-import": "^3.0.0",
"postcss-loader": "^2.0.7",
"raw-loader": "^0.5.1",
"react-dom": "^16.2.0",
"sass-loader": "^6.0.6",
"webpack": "^3.10.0"
}
}
Update: Puisqu'il semble que le rechargement à chaud est un problème avec Windows, ma question principale est de savoir s'il existe un moyen d'exécuter une tâche qui ne le recharge pas à chaud et que je peux simplement actualiser le navigateur par moi-même, sinon je ne peut pas développer sur Windows sans arrêter et redémarrer le service chaque changement, ce qui serait impossible de faire quoi que ce soit.
Il est intéressant d'essayer d'utiliser la pile frontale (nodejs, yarn, etc.) normalement sans l'utiliser à l'intérieur du conteneur docker. Suivez ces étapes:
Service dorsal
- Désactivez le port
3000
dans le fichierdocker-compose.yml
, vous pouvez supprimer la ligne- "3000:3000"
ou la modifier à la place. Car ce le port utilisé paryarn
que vous exécutez en dehors du menu fixe récipient. Causer conflit de port si pas changé ni supprimé.- À partir de la racine du projet, exécutez:
docker-compose up -d
pour démarrer les services de menu fixe,- Confirmez que le port
3000
est libre en utilisantdocker ps
,- Entrez bash dans le conteneur docker
docker exec -it wp-headless /bin/bash
, puis exécutezyarn install
. N'exécutez cette étape qu'une seule fois installer. En fait, la commandeyarn install
ici n’a rien à voir avec le réagir frontend. C'est juste faire la configuration pour WordPress et le backend dépendances. Quittez le conteneur une fois l'installation terminée.
Service frontal
- Vous devriez déjà installer tous les outils frontaux nécessaires sur votre ordinateur (nodejs, fil, etc.).
- Changer le répertoire de travail en frontend:
cd frontend
,- Installez les dépendances des packages frontend:
yarn install
,- Démarrer le service de développement frontend:
yarn start
,- Maintenant, votre pile de flux de travail frontale fonctionnera normalement (sans menu fixe). N'oubliez pas que la
yarn
que vous utiliserez maintenant est à l'extérieur le conteneur docker et être complètement séparé chose.
J'espère que ça aide.
Il y a deux choses en jeu: quand le serveur Web prend-il en compte les modifications apportées par votre css mis à jour (pour qu'il soit disponible pour les navigateurs) et le navigateur qui recharge la page.
yarn start
démarre le serveur Web, mais rien ne dit au serveur Web de recharger vos fichiers modifiés. C'est peut-être pour cette raison que vous devez réémettre la commande 'début du fil'.
J'ai vu une question sur le rechargement à chaud - voir ce lien