Error occurred while trying to proxy to перевод

Angular-CLI прокси не работает внутри докера

У меня есть файл docker-compose со всем, что мне нужно для моего проекта.

Этот docker-compose имеет сервер nginx, mysql, phpmyadmin и php. В довершение всего, я недавно добавил угловой контейнер. Все работает нормально, если я перехожу на localhost: 4200, я нахожусь в угловом приложении, и если я иду на localhost: 80, я на бэкэнде Laravel.

Теперь мне нужно сделать простой классический запрос к моему внутреннему API. Я настроил прокси-сервер для углового вида:

Это конфигурация, которую я скопировал, основываясь на этой теме. Но когда я пытаюсь сделать звонок, Chrome говорит, что http: // localhost: 4200 / api / test не существует (ошибка 404), что нормально. С другой стороны, угловой сервер говорит
HPM] Error occurred while trying to proxy request /test from localhost:4200 to http://localhost:80 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

Я предполагаю, что это исходит от докера, но я не могу понять, как решить эту проблему.

А вот Dockerfiles для PHP и Angular:

4 ответа

Я исправил проблему, удалив Angular из докера и запустив его вручную с помощью простого npm start .

Чтобы решить эту проблему, я просто создал ссылку в сервисе frontend / client для моего сервиса api в файле docker compose:

После этого я обновил свой конфигурационный файл прокси в папке angular / client:

ПРИМЕЧАНИЕ : целевой URL-адрес совпадает с файлом компоновщика докера: api , и не забывайте о незащищенном порте, в моем случае это 5000.

Ваша проблема в том, что вы не копируете package.json и npm install ничего не делает, когда нет package.json

Измените свой угловой файл на ниже

Это установит ваши node_nodules в $NODE_PATH , который /usr/src/node_modules

Измените свой угловой сервис в compose, как показано ниже

Дополнительная запись для package.json не требуется. Теперь, несмотря на то, что вы перезаписали бы /usr/src/app/node_modules из монтирования локальной папки, мы изменили модули узлов, чтобы их можно было найти в /usr/src/node_modules

Я смог заставить это работать после большой отладки.

Решение @MSLacerda работает, но я хотел добавить ответ с докерными сетями, поскольку ссылки на докеры устарели.

Источник

Вы искали: an error occurred, please try again later (Английский — Русский)

Переводы пользователей

Добавлены профессиональными переводчиками и компаниями и на основе веб-страниц и открытых баз переводов.

Английский

Русский

Информация

Английский

an error has occurred, please try again later

Русский

произошла ошибка, пожалуйста попробуйте позже

Последнее обновление: 2020-03-08
Частота использования: 1
Качество:
Источник: Анонимно

Английский

some error occurred please try again

Русский

произошла ошибка, попробуйте еще раз

Последнее обновление: 2021-01-08
Частота использования: 1
Качество:
Источник: Анонимно

Английский

an error occured. please try again later.

Русский

обнаружена ошибка. Пожалуйста, попробуйте позже.

Последнее обновление: 2018-02-21
Частота использования: 1
Качество:
Источник: Анонимно

Английский

an error occurred trying to send your message. please try again later.

Русский

Произошла ошибка при попытке отправить сообщение. Пожалуйста, повторите попытку позже.

Последнее обновление: 2013-02-17
Частота использования: 1
Качество:
Источник: Анонимно

Английский

please try again later

Русский

Пожалуйста, повторите попытку позже

Последнее обновление: 2018-02-21
Частота использования: 2
Качество:
Источник: Анонимно

Английский

please try again later.

Русский

please try again later.

Последнее обновление: 2018-02-21
Частота использования: 1
Качество:
Источник: Анонимно

Английский

please try again later. )

Русский

Последнее обновление: 2018-02-21
Частота использования: 2
Качество:
Источник: Анонимно

Английский

an error occurred while trying to download the dictionary. please try again later.

Русский

Во время загрузки словаря возникла ошибка. Повторите попытку позднее.

Последнее обновление: 2015-03-16
Частота использования: 1
Качество:
Источник: Анонимно

Английский

failed please try again later

Русский

Неудача, повторите попытку позже

Последнее обновление: 2022-11-10
Частота использования: 1
Качество:
Источник: Анонимно

Английский

an error occurred while sending the data. please try later again.

Русский

an error occurred while sending the data. please try later again.

Последнее обновление: 2018-02-21
Частота использования: 1
Качество:
Источник: Анонимно

Английский

an internal error occurred. please retry the request again.

Русский

Произошла внутренняя ошибка. Повторите запрос ещё раз.

Последнее обновление: 2011-10-23
Частота использования: 1
Качество:
Источник: Анонимно

Английский

download failed, please try again the later

Русский

le téléchargement a échoué, veuillez réessayer plus tard

Последнее обновление: 2022-04-04
Частота использования: 5
Качество:
Источник: Анонимно

Английский

an error occurred.

Русский

Последнее обновление: 2018-02-21
Частота использования: 1
Качество:
Источник: Анонимно

Английский

please try again!

Русский

Последнее обновление: 2018-02-21
Частота использования: 1
Качество:
Источник: Анонимно

Английский

the download has failed, please try again later.

Русский

Не удалось загрузить. Пожалуйста, повторите попытку позже.

Последнее обновление: 2016-03-15
Частота использования: 2
Качество:
Источник: Анонимно

Английский

error while sending message. please try again

Русский

При отправке сообщения возникла ошибка. Пожалуйста, попробуйте еще раз

Последнее обновление: 2018-02-21
Частота использования: 1
Качество:
Источник: Анонимно

Английский

the installation was unsuccessful. please try again later.

Русский

Не удалось установить. Пожалуйста, повторите попытку позже.

Последнее обновление: 2016-03-15
Частота использования: 2
Качество:
Источник: Анонимно

Английский

i may try again later

Русский

Я, может, потом ещё раз попробую

Последнее обновление: 2020-11-06
Частота использования: 1
Качество:
Источник: Анонимно

Английский

let’s try again later

Русский

Давай попробуем потом

Последнее обновление: 2020-11-06
Частота использования: 1
Качество:
Источник: Анонимно

Английский

download failed, please try again

Русский

Последнее обновление: 2022-07-16
Частота использования: 1
Качество:
Источник: Анонимно

Получите качественный перевод благодаря усилиям
4,401,923,520 пользователей

Сейчас пользователи ищут:

MyMemory — крупнейшая в мире память переводов. Она была создана на основе систем памяти переводов Европейского Союза, Организации Объединенных Наций и ведущих специализированных многоязычных сайтов из разных отраслей.

Мы относимся к Translated, так что, если вам нужны услуги профессионального перевода, посетите наш основной сайт.

Источник

Докер не принимает прокси-сервер api

Я получаю следующую ошибку при выполнении docker-compose up. Приложение запущено, но не может делать никаких запросов api post / get. Экспресс-сервер использует порт 5000.

Несмотря на то, что прокси-сервер реакции настроен, ошибка сохраняется.

setupProxy.js

Dockerfile

docker-compose.yml

package.json

Я думаю, что вам нужно изменить localhost: 5000 на имя вашей службы в docker-compose.yml . В этом случае вам необходимо настроить любой сервер, который у вас запущен на localhost: 5000 в файле набора. Помните, что ваши контейнеры работают в сети Docker, поэтому они не могут получить доступ к вашему локальному хосту на хост-машине.

В этом примере вы можете видеть, что мне нужно было установить переменную среды PMA_HOST для службы db вместо «обычного хоста». В конфигурации базы данных в моем исходном коде я также настроил хост для той же службы db, и все работает просто отлично.

Это необходимо, потому что каждый раз, когда вы запускаете новый контейнер, он будет получать другой IP-адрес в новой сети Docker. В этом случае нам всегда нужно будет проверять этот новый IP-адрес и устанавливать его в нашем коде. Docker решает эту проблему, позволяя нам привязать новый хост к простому и неизменяемому имени, которое в compose является именем службы.

ОБНОВЛЕНИЕ: подход network_mode

Если у вас уже есть служба, запущенная на вашем локальном хосте (например, сервер API), и вы используете докер для новой службы, которая будет взаимодействовать с этим API (например, пользовательский интерфейс веб-клиента), но по какой-то причине вы можете ‘ t или не хотите настраивать API в файле docker-compose.yml , вы можете изменить network_mode и environment HOST .

В этом подходе вам нужно будет сопоставить порт контейнера с неиспользуемым портом на хосте .

Итак, допустим, у вас работает API, localhost:80 и вы запускаете сервер узла на докере на порту 3000. Если у вас ничего не работает localhost:3000 , вы можете сделать следующее:

Источник

Русские Блоги

[antd] Ошибка конфигурации локального агента отладки UNABLE_TO_VERIFY_LEAF_SIGNATURE

Конфигурация локального агента отладки:

Решение: освободить сертификат от проверки

Интеллектуальная рекомендация

IView CDN Загрузка значка шрифта нормальная, а значок шрифта не может быть загружен при локальной загрузке JS и CSS

Используйте iview, чтобы сделать небольшой инструмент. Чтобы не затронуть другие платформы, загрузите JS и CSS CDN на локальные ссылки. В результате значок шрифта не может быть загружен. Просмо.

Критическое: ошибка настройки прослушивателя приложения класса org.springframework.web.context.ContextLoaderLis

1 Обзор Серверная программа, которая обычно запускалась раньше, открылась сегодня, и неожиданно появилась эта ошибка. Интуитивно понятно, что не хватает связанных с Spring пакетов, но после удаления п.

1086 Не скажу (15 баллов)

При выполнении домашнего задания друг, сидящий рядом с ним, спросил вас: «Сколько будет пять умножить на семь?» Вы должны вежливо улыбнуться и сказать ему: «Пятьдесят три». Это.

Pandas применяют параллельный процесс приложения, многоядерная скорость очистки данных

В конкурсе Algorith Algorith Algorith Algorith Algorith 2019 года используется многофункциональная уборка номера ускорения. Будет использовать панды. Но сама панда, кажется, не имеет механизма для мно.

PureMVC Learning (Tucao) Примечания

Справочная статья:Введение подробного PrueMVC Использованная литература:Дело UnityPureMvc Основная цель этой статьи состоит в том, чтобы организовать соответствующие ресурсы о PureMVC. Что касается Pu.

Источник

Вы искали: an error occurred, please try again later (Английский — Русский)

Переводы пользователей

Добавлены профессиональными переводчиками и компаниями и на основе веб-страниц и открытых баз переводов.

Английский

Русский

Информация

Английский

an error has occurred, please try again later

Русский

произошла ошибка, пожалуйста попробуйте позже

Последнее обновление: 2020-03-08
Частота использования: 1
Качество:
Источник: Анонимно

Английский

some error occurred please try again

Русский

произошла ошибка, попробуйте еще раз

Последнее обновление: 2021-01-08
Частота использования: 1
Качество:
Источник: Анонимно

Английский

an error occured. please try again later.

Русский

обнаружена ошибка. Пожалуйста, попробуйте позже.

Последнее обновление: 2018-02-21
Частота использования: 1
Качество:
Источник: Анонимно

Английский

an error occurred trying to send your message. please try again later.

Русский

Произошла ошибка при попытке отправить сообщение. Пожалуйста, повторите попытку позже.

Последнее обновление: 2013-02-17
Частота использования: 1
Качество:
Источник: Анонимно

Английский

please try again later

Русский

Пожалуйста, повторите попытку позже

Последнее обновление: 2018-02-21
Частота использования: 2
Качество:
Источник: Анонимно

Английский

please try again later.

Русский

please try again later.

Последнее обновление: 2018-02-21
Частота использования: 1
Качество:
Источник: Анонимно

Английский

please try again later. )

Русский

Последнее обновление: 2018-02-21
Частота использования: 2
Качество:
Источник: Анонимно

Английский

an error occurred while trying to download the dictionary. please try again later.

Русский

Во время загрузки словаря возникла ошибка. Повторите попытку позднее.

Последнее обновление: 2015-03-16
Частота использования: 1
Качество:
Источник: Анонимно

Английский

failed please try again later

Русский

Неудача, повторите попытку позже

Последнее обновление: 2022-11-10
Частота использования: 1
Качество:
Источник: Анонимно

Английский

an error occurred while sending the data. please try later again.

Русский

an error occurred while sending the data. please try later again.

Последнее обновление: 2018-02-21
Частота использования: 1
Качество:
Источник: Анонимно

Английский

an internal error occurred. please retry the request again.

Русский

Произошла внутренняя ошибка. Повторите запрос ещё раз.

Последнее обновление: 2011-10-23
Частота использования: 1
Качество:
Источник: Анонимно

Английский

download failed, please try again the later

Русский

le téléchargement a échoué, veuillez réessayer plus tard

Последнее обновление: 2022-04-04
Частота использования: 5
Качество:
Источник: Анонимно

Английский

an error occurred.

Русский

Последнее обновление: 2018-02-21
Частота использования: 1
Качество:
Источник: Анонимно

Английский

please try again!

Русский

Последнее обновление: 2018-02-21
Частота использования: 1
Качество:
Источник: Анонимно

Английский

the download has failed, please try again later.

Русский

Не удалось загрузить. Пожалуйста, повторите попытку позже.

Последнее обновление: 2016-03-15
Частота использования: 2
Качество:
Источник: Анонимно

Английский

error while sending message. please try again

Русский

При отправке сообщения возникла ошибка. Пожалуйста, попробуйте еще раз

Последнее обновление: 2018-02-21
Частота использования: 1
Качество:
Источник: Анонимно

Английский

the installation was unsuccessful. please try again later.

Русский

Не удалось установить. Пожалуйста, повторите попытку позже.

Последнее обновление: 2016-03-15
Частота использования: 2
Качество:
Источник: Анонимно

Английский

i may try again later

Русский

Я, может, потом ещё раз попробую

Последнее обновление: 2020-11-06
Частота использования: 1
Качество:
Источник: Анонимно

Английский

let’s try again later

Русский

Давай попробуем потом

Последнее обновление: 2020-11-06
Частота использования: 1
Качество:
Источник: Анонимно

Английский

download failed, please try again

Русский

Последнее обновление: 2022-07-16
Частота использования: 1
Качество:
Источник: Анонимно

Получите качественный перевод благодаря усилиям
4,401,923,520 пользователей

Сейчас пользователи ищут:

MyMemory — крупнейшая в мире память переводов. Она была создана на основе систем памяти переводов Европейского Союза, Организации Объединенных Наций и ведущих специализированных многоязычных сайтов из разных отраслей.

Мы относимся к Translated, так что, если вам нужны услуги профессионального перевода, посетите наш основной сайт.

Источник

В настоящее время проект VUE выполнен, и местный проект коллег внезапно не может встать. Другие легко использовать. Его проект сообщает о местных ошибках:

Error occurred while trying to proxy request.

Чтобы решить эту проблему, я просто создал ссылку в сервисе frontend / client для моего сервиса api в файле docker compose:

< Сильный > Client

  # Frontend service
  client:
    build: client # specify the directory of the Dockerfile
    ports:
      - "4200:4200" # specify port forewarding
    links: 
      - api # link this service to the api service

В первую очередь, необходимо отключить Proxy в настройках операционной системы Windows:

Если на ПК используется Виндовс 10, тогда открываем главные параметры, идем в раздел “Сеть и интернет”, на вкладке “Прокси-сервер” деактивируем все опции.

В других версиях ОС необходимо открыть панель управления, в режиме просмотра “Категория” (выбираем в правом верхнем углу) находим в перечне “Сеть/Интернет”, далее “Свойства браузера”, вкладка “Подключения” и нажимаем на кнопку “Настройка сети”.

Отключить временно прокси

Нажмите Win+R и введите regedit, чтобы открыть редактор реестра. Далее перейдите по пути:

• HKEY_CURRENT_USERSOFTWAREMicrosoftWindowsCurrentVersionInternet Settings
• Слева нажмите правой кнопкой мыши по “Internet Settings” и выберите “Экспортировать“. Тем самым мы создадим копию ключа сохранив reg файл.
• После создания копии удалите справа параметр “MigrateProxy“.
• Перезагрузите систему, и проверьте, решена ли проблема.

В вашем случае есть другой хост для api. Это необходимо решить с помощью подходящей настройки среды. (loadbalancer, proxy или что-то еще). Затем вы можете сохранить относительные пути.

В противном случае часть хоста: порт должна быть настроена для каждой переменной env или развертывания конфигурации и переписываться в абсолютные пути в вашем приложении React.

Если у вас уже есть служба, запущенная на вашем локальном хосте (например, сервер API), и вы используете докер для новой службы, которая будет взаимодействовать с этим API (например, пользовательский интерфейс веб-клиента), но по какой-то причине вы можете ‘ t или не хотите настраивать API в файле docker-compose.yml , вы можете изменить network_modeи environment HOST.

{
   "/api/*": {
      "target":"http://localhost:80",
      "secure":false,
      "changeOrigin":true,
      "pathRewrite": {"^/api" : ""},
      "logLevel":"debug"
   }
}

version: '2'

services:
  web_server:
    restart: always
    image: nginx:latest
    ports:
      - "80:80"
    volumes:
      - /projects/laravel/:/var/www/                                               
      - /docker/sites-enabled-nginx:/etc/nginx/sites-enabled/     
      - /docker/nginx.conf:/etc/nginx/nginx.conf
    links:
      - php:php

  php:
    restart: always
    build: /docker/php/
    container_name: "php"
    volumes:
      - /projects/laravel/:/var/www/       
      - db:db

  db:
    restart: always
    image: mysql
    volumes:
      - /Users/Irindul/mysql:/var/lib/mysql     
    ports:
      - "3306:3306"                                   
    container_name: "mysql"
    environment:
      - MYSQL_DATABASE=homestead
      - MYSQL_USER=homestead
      - MYSQL_PASSWORD=secret
      - MYSQL_ROOT_PASSWORD=root

  myadmin:
    restart: always
    image: phpmyadmin/phpmyadmin
    links:
      - db:db
    ports:
      - "8080:80"                                     



  angular:
    restart: always
    build: /docker/angular
    container_name: angular
    volumes:
      - /projects/angular/package.json:/usr/src/app/package.json
      - /projects/angular:/usr/src/app/
    ports:
      - "4200:4200"

FROM php:7-fpm
RUN docker-php-ext-install pdo pdo_mysql
WORKDIR /var/www

#Latest Node
FROM node

#Creating working folder
RUN mkdir -p /usr/src/app

#Update pwd
WORKDIR /usr/src/app

#Run npm
RUN npm install
EXPOSE 4200
CMD ["npm", "start"]

{
  "name": "client",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve -H 0.0.0.0 --proxy-config proxy.config.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.3.2",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

4 ответа

Лучший ответ

  # Frontend service
  client:
    build: client # specify the directory of the Dockerfile
    ports:
      - "4200:4200" # specify port forewarding
    links: 
      - api # link this service to the api service

  # API Service
  api: 
    build: api # specify the directory of the Dockerfile
    ports:
      - "5000:5000" #specify ports forewarding
    links:
      - database # link this service to the database service

{
  "/api/*": {
    "target": "http://api:5000/",
    "secure": false,
    "changeOrigin": true
  }
}

#Latest Node
FROM node

#Creating working folder
RUN mkdir -p /usr/src/app -p /usr/src/node_modules
ENV NODE_PATH=/usr/src/node_modules

WORKDIR /usr/src/app
COPY package.json ./package.json
RUN npm install
EXPOSE 4200
CMD ["npm", "start"]

 angular:
    restart: always
    build: /docker/angular
    container_name: angular
    volumes:
      - /projects/angular:/usr/src/app/
    ports:
      - "4200:4200"

version: '3'

services: 
  client:
    # all other configurations...
    ports:
      - 4200:4200
    networks:
      - backend-net
  api:
    # all other configurations...
    networks:
      - backend-net

networks:
  backend-net:
    driver: bridge

{
  "/api/*": {
    "target": "http://api:3000",
    "secure": false,
    "changeOrigin": true
    "pathRewrite": {
      "^/api": ""
    }
  }
}

• Operating System: OSX 10
• Node Version: 9.11.2
• NPM Version: 5.6.0
• webpack Version: 4.16.3
• webpack-dev-server Version: 3.1.5

• This is a bug
• This is a modification request

Code

  // webpack.config.js
const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ErrorOverlayPlugin = require('error-overlay-webpack-plugin');


const isProd = process.argv.slice(-1)[0] === 'production';

const outPath = path.resolve(__dirname, 'public/dist');
const publicPath = '/public/dist/';

const common = {
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /.woff2?$/,
                loader: 'url-loader',
                options: {
                    name: 'fonts/[name].[ext]',
                    limit: 1000,
                },
            },
        ],
    },

    resolve: {
        alias: {
            app: path.resolve(__dirname, 'app'),
            test: path.resolve(__dirname, 'test'),
        },
    },

    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true,
            }),
        ],
    },
};

const configs = {
    client: {
        entry: [
            'babel-polyfill',
            'react-hot-loader/patch',
            'webpack-dev-server/client?http://localhost:8080',
            'webpack/hot/only-dev-server',
            './app/components'
        ],
        output: {
            publicPath,
            path: outPath,
            filename: 'client.js',
        },
        devtool: isProd ? 'source-map' : 'eval-source-map',
        devServer: {
            publicPath,
            contentBase: outPath,
            proxy: {
                '*': {
                    target: 'http://localhost:8000',
                    secure: false,
                },
            },
        },
        plugins: isProd ? [] : [
            new ErrorOverlayPlugin(),
            new webpack.HotModuleReplacementPlugin(),
        ]
    },

    server: {
        target: 'node',
        entry: ['babel-polyfill', './app/server'],
        output: {
            path: outPath,
            publicPath,
            filename: 'server.js',
            libraryTarget: 'commonjs2'
        },
        devtool: false,
        node: { __dirname: true },
        externals: [ nodeExternals() ],
    },
};

module.exports = [
    Object.assign({}, common, configs.client),
    Object.assign({}, common, configs.server),
];

  // app/server/app.js
import express from 'express';
import cookieParser from 'cookie-parser';

import config from './config';
import { handleRender } from './render';


const app = express();

const publicDir = config.get('server.publicPath');

app.use('/public', express.static(publicDir));

app.use(cookieParser());
app.use(handleRender);

export default app;

// app/components/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';

import store from 'app/redux/store';

import App from './App';

const html = (
    <Provider store={store}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>
);

if (window.ssr) {
    ReactDOM.hydrate(html, document.getElementById('root'));
} else {
    ReactDOM.render(html, document.getElementById('root'));
}

// app/components/App.js
import _ from 'lodash';
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { hot } from 'react-hot-loader'
import { ThemeProvider } from 'styled-components';

import theme from 'app/assets/style/theme';
import Head from 'app/components/html/Head';

const App = () => (
    <ThemeProvider theme={theme}>
        <React.Fragment>
            <Head />
            <Switch>
                {* my routes... *}
            </Switch>
        </React.Fragment>
    </ThemeProvider>
);

export default hot(module)(App);

Expected Behavior

I tried to integrate dev server & hot reloading for my server-side rendering React app.
The expected behavior would be to have the HMR working on every file change, when running these commands to launch the dev app:

// Webpack client & server
TARGET=client webpack-dev-server --mode development & TARGET=server webpack --mode development --watch
// Launch express server
nodemon ./public/dist/server.js

Actual Behavior

Currently, it doesn’t reload at all. I tried so many combinations, I faced two quite similar behaviors, when a file is updated:

1. The HMR module is triggered and I got a white screen with the following error:

Error occured while trying to proxy to: localhost:8080/

1. The HMR module is triggered, updates the view, but I have the same error as above in my Chrome console. After that, any file update does nothing.

For Bugs; How can we reproduce the behavior?

With the above code snippets, you should be able to reproduce.
I’ve found a lot of thread about this subject, telling to change the proxy wildcard to a double one or other similar ideas, but none of them ever worked…

Thanks!