web-dev-qa-db-fra.com

Essayer d'obtenir un WordPress sans tête pour effectuer un rechargement à chaud sur la commande de démarrage du fil

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.

node.jswordpressdockeryarnpkgnext.js
6
Anders Kitson

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

  1. Désactivez le port 3000 dans le fichier docker-compose.yml, vous pouvez supprimer la ligne - "3000:3000" ou la modifier à la place. Car ce le port utilisé par yarn que vous exécutez en dehors du menu fixe récipient. Causer conflit de port si pas changé ni supprimé. 
  2. À partir de la racine du projet, exécutez: docker-compose up -d pour démarrer les services de menu fixe,
  3. Confirmez que le port 3000 est libre en utilisant docker ps,
  4. Entrez bash dans le conteneur docker docker exec -it wp-headless /bin/bash, puis exécutez yarn install. N'exécutez cette étape qu'une seule fois installer. En fait, la commande yarn 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

  1. Vous devriez déjà installer tous les outils frontaux nécessaires sur votre ordinateur (nodejs, fil, etc.).
  2. Changer le répertoire de travail en frontend: cd frontend,
  3. Installez les dépendances des packages frontend: yarn install,
  4. Démarrer le service de développement frontend: yarn start,
  5. 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.

2
Dharma Saputra

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 

Comment puis-je ajouter live-reload à mon serveur nodejs

0
Deepak Garud