Задонатить и смотреть →
Открой безлимитный доступ к 100+ полезных скринкастов и получай скидки на все предстоящие мероприятия

Шаблон страниц и маршрутизация

Чтобы было где размещать формы регистрации и входа нам понадобятся новые страницы. Поэтому сегодня вынесем общий шаблон вёрстки, установим маршрутизатор и с помощью Feature Flag добавим страницу для формы регистрации. А перед этим заодно доустановим линтеры для Jest-тестов и доработаем E2E-тесты для возможности работы с асинхронными страницами и добавления тестов до кода:

  • 00:01:40 - Удаление хака для Xdebug
  • 00:02:26 - Обновление зависимостей
  • 00:07:32 - Линтер для Jest DOM
  • 00:12:04 - Линтер для Testing Library
  • 00:14:11 - Проверка блоков в E2E
  • 00:16:55 - Компонент главной страницы
  • 00:18:14 - Тестирование по заголовку
  • 00:19:43 - Асинхронное ожидание в E2E
  • 00:23:41 - Вынесение общих стилей
  • 00:25:14 - Стили шаблона
  • 00:28:25 - Компонент Layout
  • 00:30:26 - Добавление Reset CSS
  • 00:32:11 - Установка React Router
  • 00:32:59 - Вывод Not Found
  • 00:36:25 - Добавление feature flag
  • 00:37:25 - Сокрытие WIP-тестов в E2E
  • 00:40:01 - Страница регистрации
  • 00:42:09 - Ссылка на регистрацию
  • 00:46:17 - Деплой и проверка

И в следующем эпизоде на созданную сегодня страницу поместим форму регистрации.

Скрытый контент (код, слайды, ...) для подписчиков. Открыть →
Дмитрий Елисеев
elisdn.ru
Комментарии (17)
Руслан

Спасибо!

Ответить
Максим

Спасибо) Давненько не было видео по данной серии. Очень ждал!)

Ответить
Arunas

Спасибо.

Ответить
Yevhenii Lykholai

Спасибо.

Ответить
Дмитрий Ориховский

Всем привет. Хотел бы спросить, может кто-то сталкивался с этой ошибкой при сборке в Jenkins? (Это самый первый шаг - Checkout SCM)

Я понимаю, что у пользователя который исполняет этот код нету прав на удаление/запись. Но как это пофиксить?

RemoveRecursive(PathRemover.java:215)
at jenkins.util.io.PathRemover.tryRemoveDirectoryContents(PathRemover.java:226)
at jenkins.util.io.PathRemover.tryRemoveRecursive(PathRemover.java:215)
at jenkins.util.io.PathRemover.tryRemoveDirectoryContents(PathRemover.java:226)
at jenkins.util.io.PathRemover.forceRemoveDirectoryContents(PathRemover.java:87)
... 14 more
Suppressed: java.nio.file.FileSystemException: /var/jenkins_home/workspace/auction_master/cucumber/node_modules/util-arity/arity.js: Operation not permitted
Ответить
Дмитрий Ориховский

Если я в чем-то буду не прав, можете меня поправить.

У нас поднят Jenkins через Docker, и все команды наш Jenkins (как утилита) исполняет от имени пользователя jenkins. Может нам стоить дать ему права на запись?

FROM jenkinsci/blueocean

USER root

RUN apk add --no-cache py-pip python3-dev libffi-dev openssl-dev gcc libc-dev make gettext \
    && pip3 install docker-compose

USER jenkins

Ответить
Дмитрий Ориховский

Уже нашел решение. Пришлось заходить на сервер, потом заходить в контейнер jenkins под рутом и изменить permissions для всех файлов в директории /var/jenkins_home. Может кто то тоже сталкнется с этой ошибкой.

Ответить
fedot

Дмитрий, а как Вы смогли зайти в контейнер, если не секрет?

Ответить
Дмитрий Ориховский

Через ssh заходишь на сервер (ssh deploy@your_server_ip). Потом заходишь в директорию с проектом (cd jenkins). Потом смотришь ID контейнера c jenkins (docker ps). Потом заходишь как рут в контейнер (docker exec -it --user root CONTAINER_ID bash). Потом устанавливаешь права (chmod -R a+rwx /var/jenkins_home). Все!

Ответить
fedot

Спасибо большое за информацию.

Ответить
Алексей

Спасибо.

Ответить
Руслан

Дмитрий, добрый день,

хотелось узнать Ваше мнение насчет прокидывания параметров окружения (dev/staging/prod) в уже собранную frontend-сборку (по аналогии .env для backend), например подтягивая их runtime через <script src="/config.js">. Иными словами исключить создание отдельной frontend-сборки/контейнера для каждого окружения, а только пробрасывать параметры. Спасибо!

PS: с нетерпением ждем следующих выпусков ))

Ответить
Дмитрий Елисеев

При сборке подставляем туда подстановки вроде %API_URL%. А уже при запуске контейнера в entrypoint.sh заменяем эти заглушки на реальные значения через sed. Это будет позже.

Ответить
Руслан

Спасибо, вариант c sed понял.

Ответить
slo_nik

Добрый вечер, Дмитрий.

По поводу eslint-plugin-standard

eslint-plugin-standard@5.0.0: standard 16.0.0 and eslint-config-standard 16.0.0 no longer require the eslint-plugin-standard package. You can remove it from your dependencies with 'npm rm eslint-plugin-standard'.

Но Вы его используете. Нужно ли, всё-таки, его сохранять?

Ответить
Дмитрий Елисеев

Не нужно. Плагин теперь сам подтягивается как зависимость конфига. Можно у себя его удалить.

Ответить
slo_nik

Тут ещё одна проблема возникла.

После обновления зависимостей через update-deps вылезла ошибка для плагина mini-css-extract-plugin

Error TypeError: MiniCssExtractPlugin is not a constructor

Возникает при try-testing, во время сборки рабочих образов.

Лечится добавлением в package.json секции

  "resolutions": {
       "mini-css-extract-plugin": "~2.4.5"
  },

Решение нашлось здесь

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

Или войти через:

Google
GitHub
Yandex
MailRu