Задонатить и смотреть →
Открой безлимитный доступ к 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)
Руслан

Спасибо!

Ответить
Максим (@myks92)

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

Ответить
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