Установка и деплой React с Docker

Создание проекта с ReactJS. Подключение и сборка пакетов через NodeJS. Запуск девелоперского сервера с автообновлением UI. Деплой фронтенда через Docker.

  • 00:00:23 - Что такое ReactJS
  • 00:03:22 - Установщик Creat React App
  • 00:04:04 - Подключение NodeJS через Docker
  • 00:05:37 - Установка проекта с React
  • 00:09:00 - Обзор файлов проекта
  • 00:10:20 - Тюнинг gitignore и dockerignore
  • 00:11:25 - Удаление команды eject
  • 00:12:30 - Разделение dependencies
  • 00:13:18 - Очистка Service Worker
  • 00:14:18 - Файлы JSX
  • 00:15:44 - Добавление frontend-init в Makefile
  • 00:17:31 - Проверка работы
  • 00:20:34 - Разделение конфигураций Nginx
  • 00:23:29 - Запуск девелоперского node-сервера
  • 00:24:38 - Проксирование из Nginx на node-сервер
  • 00:26:25 - Проверка работы
  • 00:28:36 - Отложенный запуск сервера по готовности
  • 00:31:29 - Добавление depends_on
  • 00:32:13 - Проверка работы make init
  • 00:33:42 - Перенос верстки на React
  • 00:35:11 - Создание production-образа Docker для деплоя
  • 00:38:51 - Добавление кэширования ресурсов в браузере
  • 00:41:24 - Вынос компонента Welcome
  • 00:44:03 - Использование локальных стилей компонентов
Скрытый контент
Комментарии (12)
Arunas
2020-04-13 15:48

Спасибо!

Ответить
fedot
2020-04-13 16:46

Спасибо.

Ответить
Denis
2020-04-14 20:52

Добрый день. А можете как - то рассказать принципиальные отличия React от Vue или Angular? Почему в этом проекте используется именно React? В интернете мнений по этому поводу много, но все же хочется и Ваше услышать. Чем React лучше?

Ответить
Дмитрий Елисеев
2020-04-18 15:31

Почему используем React рассказали в конце второго эпизода. А именно что React является не фреймворком, а только минимальной библиотекой для построения интерфейсов. Angular из себя предоставляет большой полноценный фреймворк. А в Vue немного больше магии. React архитектурно проще.

Ответить
Александр
2020-05-15 11:40

Здравствуйте, будем ли рассматривать TypeScript ? Очень бы хотелось )

Ответить
Дмитрий Елисеев
2020-05-19 14:56

Хорошо, добавим.

Ответить
Александр
2020-05-19 14:58

Спасибо.

Ответить
Роман
2020-05-21 17:51

Добрый вечер Дмитрий! Дошёл до этого этапа. Решил запустить тесты бэкенда с покрытием, выдало ошибку:

https://i.imgur.com/jzX6vP1.png

Ответить
Дмитрий Елисеев
2020-05-22 07:23

Видимо в PHPUnit 9.1 нужно указывать в @covers класс с неймспейсом.

Ответить
Konstantin
2020-07-29 12:00

Это только для случая с React yarn start запускается на 3000 порту? Я поставил Vue, пишет 404.

[error] 7#7: *5 "/etc/nginx/html/index.html" is not found (2: No such file or directory), client: 172.20.0.1, server: , request: "GET / HTTP/1.1", host: "localhost:8090"
Ответить
Дмитрий Елисеев
2020-08-02 10:22

Вроде тоже должен быть на 3000.

Ответить
Зарегистрируйтесь или войдите чтобы оставить комментарий