#react #typescript

---
description: Правила для Front-End разработки на React и TypeScript
auto_attach:
  - "**/*.tsx"
  - "**/*.ts"
  - "**/*.jsx"
  - "**/*.js"
  - "**/*.css"
  - "**/*.scss"
---

Вы - Старший Front-End Разработчик и Эксперт в ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS и современных UI/UX фреймворках (например, Material-UI, Mantine UI, Shadcn, Radix). Вы внимательны, даете детальные ответы и блестяще рассуждаете. Вы тщательно предоставляете точные, фактические, продуманные ответы и гениальны в анализе.

- Тщательно и точно следуйте требованиям пользователя.
- Сначала думайте пошагово - опишите ваш план построения в псевдокоде, детально расписанный.
- Подтвердите, затем пишите код!
- Всегда пишите корректный, соответствующий лучшим практикам, следующий принципу DRY (Don't Repeat Yourself), безошибочный, полностью функциональный и рабочий код, который также должен соответствовать правилам, перечисленным ниже в Руководстве по Реализации Кода.
- Фокусируйтесь на простоте и читаемости кода, а не на производительности.
- Полностью реализуйте всю запрошенную функциональность.
- Не оставляйте TODO, заглушек или отсутствующих частей.
- Убедитесь, что код завершен! Тщательно проверьте финальную версию.
- Включите все необходимые импорты и обеспечьте правильное именование ключевых компонентов.
- Будьте кратки. Минимизируйте любой другой текст.
- Если вы считаете, что может не быть правильного ответа, скажите об этом.
- Если вы не знаете ответ, скажите об этом вместо того, чтобы гадать.
- Тебе ЗАПРЕЩЕНО изменять типы TypeScript в файлах *.d.ts без непосредственного указания
- Тебе ЗАПРЕЩЕНО использовать экспорт или импорт типов в любом случае, как бы тебе это не хотелось.

### Среда Разработки
Пользователь задает вопросы о следующих языках программирования:
- ReactJS
- NextJS
- JavaScript
- TypeScript
- HTML
- CSS

### Руководство по Реализации Кода
Следуйте этим правилам при написании кода:
- Используйте ранние возвраты (early returns) везде, где это возможно, для повышения читаемости кода.
- Используйте "class:" вместо тернарного оператора в class тегах везде, где это возможно.
- Используйте описательные имена переменных и функций/констант. Также функции-обработчики событий должны иметь префикс "handle", например "handleClick" для onClick и "handleKeyDown" для onKeyDown.
- Реализуйте функции доступности на элементах. Например, тег должен иметь tabindex="0", aria-label, on:click и on:keydown, а также аналогичные атрибуты.
- Используйте const вместо функций, например, "const toggle = () =>". Также определяйте тип, если это возможно.

Сообщение Файлы правил разработки для Cursor появились сначала на ConsultApp.ru.

• Рабочий макет на примере нашего сайта: https://wp-themelia-vitejs.vercel.app/;
• Репозиторий: https://github.com/consultapp/wp-themelia-vitejs;

Технологии/Пакеты:

• React
• Vite.js
• Redux
• Redux/Toolkit
• REST API WordPress
• Themelia WordPress Theme

REST API WordPress

Существует много готовых эндпоинтов в Rest Api WP, нас интересуют на данном этапе посты, страницы и поиск.

REST API Developer Endpoint Reference

Весь API находится в разделе /wp-json/, те для постов например это:

https://example.com/wp-json/wp/v2/posts 

В ответ получаем массив постов вида (отдается кол-во постов равное установленному ранее параметром pre_page, при его отсутствии в запросе):

/* СТАТЬЯ В РАЗРАБОТКЕ. */

Сообщение Переработка темы Themelia c PHP на React, для работы с WordPress в качестве Headless CMS без SSR появились сначала на ConsultApp.ru.

В нашем случае мы используем Webmin/Virtualmin для настройки, но это не особо влияет на саму конфигурацию.

Для запуска SPA приложения на базовой конфигурации Nginx сервера, нам не хватает нескольких моментов:

1. Переадресация всех путей на наш рут, /index.html в данном случае;
2. Зарезервированный путь для получения/обновления SSL сертификатов.

Переадресация путей

Тут нам надо исправить 2 момента:

#Установим root и точку входа, у нас index.html в папка dist
root /home/my_domain/my_domain/dist/; 
index index.html;

# Укажем, как обрабатывать пути, кроме статических файлов (отбор по расширениям)

location / {
        if (-f $request_filename) {
            	expires max;
            	break;
        }
        if ($request_filename !~ "\.(js|htc|ico|gif|jpg|png|css)$") {
            	rewrite ^(.*) /index.html last;
        }
}

Получение/обновление SSL

В данном случае мы используем Let’s Encrypt, Webmin для автоматической работы с этими сертификатами использует папку /.well-known, соответственно выделяем ее так, что бы она не обрабатывалась нашим SPA — например меняем для этого location root.

location /.well-known/ {
	root /home/my_domain/public_html;
}

Итоговый шаблон

server {
	server_name my_domain.ru www.my_domain.ru;

	# your server IP
	listen 00.00.00.00;

	root /home/my_domain/my_domain/dist/;
	index index.html;

	access_log /var/log/virtualmin/my_domain.ru_access_log;
	error_log /var/log/virtualmin/my_domain.ru_error_log;
	fastcgi_param GATEWAY_INTERFACE CGI/1.1;
	fastcgi_param SERVER_SOFTWARE nginx;
	fastcgi_param QUERY_STRING $query_string;
	fastcgi_param REQUEST_METHOD $request_method;
	fastcgi_param CONTENT_TYPE $content_type;
	fastcgi_param CONTENT_LENGTH $content_length;
	fastcgi_param SCRIPT_FILENAME /home/my_domain/public_html$fastcgi_script_name;
	fastcgi_param SCRIPT_NAME $fastcgi_script_name;
	fastcgi_param REQUEST_URI $request_uri;
	fastcgi_param DOCUMENT_URI $document_uri;
	fastcgi_param DOCUMENT_ROOT /home/my_domain/public_html;
	fastcgi_param SERVER_PROTOCOL $server_protocol;
	fastcgi_param REMOTE_ADDR $remote_addr;
	fastcgi_param REMOTE_PORT $remote_port;
	fastcgi_param SERVER_ADDR $server_addr;
	fastcgi_param SERVER_PORT $server_port;
	fastcgi_param SERVER_NAME $server_name;
	fastcgi_param PATH_INFO $fastcgi_path_info;
	fastcgi_param HTTPS $https;

	location /.well-known/ {
		root /home/my_domain/public_html;
	}

	location / {
        	if (-f $request_filename) {
            		expires max;
            		break;
        	}

        	if ($request_filename !~ "\.(js|ico|gif|jpg|png|css)$") {
            		rewrite ^(.*) /index.html last;
        	}
    	}

	# your server IP
	listen 00.00.00.00:443 ssl;
	ssl_certificate /etc/ssl/virtualmin/PATH_TO_KEY/ssl.combined;
	ssl_certificate_key /etc/ssl/virtualmin/PATH_TO_KEY/ssl.key;
}

Итого

Очевидно, что все папки и адреса Вам необходимо заменить на собственные, но идея остается прежней: перехватываем все пути и замыкаем на index.html, а отдельные служебные пути выделяем в location и оставляем например в стандартной public_html для удобства.

Так же при необходимости использования API с этого же сервера, Вы можете самостоятельно добавить location по типу /api/ и сделать редирект на обработчик например.

Сообщение Простая конфигурация Nginx для SPA приложения без SSR появились сначала на ConsultApp.ru.

Для начала стоит отметить, что без SSL для тестовых запусков достаточно и npm run start на 80 порту — все заработает из коробки, ну почти, если домен напрямую прокинут на айпишники и в нашем распоряжении целый отдельный сервер.

Схема работы

Наша схема работы будет выглядеть максимально просто:

1. Nginx висит, как и подобает вебсерверу, на 80 и 443 портах, обеспечивая маршрутизацию и SSL;
2. Запросы мы проксируем на localhost с нужным портом, например 3000, тк он у нас по дефолту Next.

Nginx

Для простоты мы будем править напрямую основной конфигурационный файл /etc/nginx/nginx.conf, как Вы понимаете на рабочем проекте так делать не надо — разберитесь с  папками /etc/nginx/sites-available/ и /etc/nginx/sites-enabled.

nano /etc/nginx/nginx.conf

Как установить Nginx , подробно описано на официальном сайте, все зависит от Вашей операционной системы очевидно.

Итак, наши настройки для сервера (выжимка), естественно *_INSERT_IP_ADRESS_* надо заменить на Ваш ip сервера и our_best_site на Ваш домен и всю структуру папок проверить (/home/our_best_site/public_html и тд):

server {
                server_name our_best_site.ru www.our_best_site.ru;
                listen *_INSERT_IP_ADRESS_*;
                root /home/our_best_site/public_html;
                index index.php index.htm index.html;
                access_log /var/log/virtualmin/our_best_site.ru_access_log;
                error_log /var/log/virtualmin/our_best_site.ru_error_log;
                fastcgi_param GATEWAY_INTERFACE CGI/1.1;
                fastcgi_param SERVER_SOFTWARE nginx;
                fastcgi_param QUERY_STRING $query_string;
                fastcgi_param REQUEST_METHOD $request_method;
                fastcgi_param CONTENT_TYPE $content_type;
                fastcgi_param CONTENT_LENGTH $content_length;
                fastcgi_param SCRIPT_FILENAME /home/our_best_site/public_html$fastcgi_script_name;
                fastcgi_param SCRIPT_NAME $fastcgi_script_name;
                fastcgi_param REQUEST_URI $request_uri;
                fastcgi_param DOCUMENT_URI $document_uri;
                fastcgi_param DOCUMENT_ROOT /home/our_best_site/public_html;
                fastcgi_param SERVER_PROTOCOL $server_protocol;
                fastcgi_param REMOTE_ADDR $remote_addr;
                fastcgi_param REMOTE_PORT $remote_port;
                fastcgi_param SERVER_ADDR $server_addr;
                fastcgi_param SERVER_PORT $server_port;
                fastcgi_param SERVER_NAME $server_name;
                fastcgi_param PATH_INFO $fastcgi_path_info;
                fastcgi_param HTTPS $https;

                location / {
                        proxy_pass http://localhost:3000/;
                }

                fastcgi_split_path_info ^(.+\.php)(/.+)$;
                listen *_INSERT_IP_ADRESS_*:443 ssl;
                ssl_certificate /home/our_best_site/ssl.combined;
                ssl_certificate_key /home/our_best_site/ssl.key;
        }

У Nginx куча настроек и улучшать можно постоянно, но основная магия в паре строк, те мы проксируем все запросы на «/» на наш node сервер, который мы скоро запустим:

location / {
proxy_pass http://localhost:3000/;
}

Для работы SSL, нам надо получить сертификаты в сертификационном центре и указать пути к этим файлам:

ssl_certificate /home/our_best_site/ssl.combined;
ssl_certificate_key /home/our_best_site/ssl.key;

Запускаем приложение

Какие файлы нам нужны от Next.js для запуска?

Для начала нам нужно запустить в терминале компиляцию проекта npm run build, в итоге мы увидим что-то похожее. Next создаст все необходимые файлы, статические и для рендеринга на сервере.

Осталось понять, что же нам нужно перенести на рабочий сервер в простейшем варианте, без Git и прочих полезных вещей.

Мы идем на сервер, создаем рабочую папку для Next и копируем туда файлы и папки:

1. /.next — основная рабочая папка;
2. /public — папка со статическими публичными файлами, например favicon.ico и robots.txt;
3. next.config.js — конфигурационный файл next, куда надо не забыть включить домены для картинок и например webpack5: true;
4. package.json — конфигурационный файл приложения.

Далее осталось запустить в этой папке npm install, при этом менеджер проанализирует package.json и автоматически сгенерирует папку /node_modules, со всеми необходимыми пакетами. Ее не надо копировать из среды разработки.

Все, теперь достаточно запустить npm run start или любой нужный скрипт из package.json и, если Вы правильно указали порт, а у нас Nginx проксирует на 3000, все заработает. Но, это неудобно, тк стоит закрыть терминал — все умрет. Эту проблемы нам поможет решить отличный менеджер процессов PM2.

Запускаем Nextjs через PM2 (менеджер процессов)

Подробно прочитать про этот менеджер процессов можно в мануале на официальном сайте, мы же укажем только необходимый минимум

Итак, устанавливаем pm2 командой (возможно Вам потребуется использовать sudo):

npm install pm2 -g

Запуск процессов

Для запуска проекта в простом варианте можно использовать что-то вроде, при этом не забудьте перейти в рабочую папку проекта nextjs.

pm2 start npm -- start

А так же полезные ключи:

# Указываем имя запущенного приложения
--name <app_name>

# Устанавливаем наблюдение за файлами проекта и перезапускаем приложение при их изменении
--watch

# Устанавливаем лимит памяти до перезагрузки приложения
--max-memory-restart <200MB>

# Определяем путь к файлу логов
--log <log_path>

# Прокидываем аргументы в скрипт
-- arg1 arg2 arg3

# Задержка между автоматическими перезапусками
--restart-delay <delay in ms>

# Добавлять префикс времени в логах
--time

# Не перезапускать автоматически приложение
--no-autorestart

# Определяем задачу крон для принудительного перезапуска (forced restart)
--cron <cron_pattern>

Управление и мониторинг процессов

Для управления запущенными процессами можно использовать команды:

$ pm2 restart app_name
$ pm2 reload app_name
$ pm2 stop app_name
$ pm2 delete app_name

Вместо app_name можно использовать:

• all для управления всеми процессами;
• id для управления процессом по его id.

Мониторить запущенные процессы можно парой удобных команд:

// онлайн мониторинг в экране терминала
$ pm2 monit

// список процессов
# pm2 list

Пример вывода для pm2 monit:

Итого по pm2

Теперь мы можем запустить наш проект, со всеми ключами. Представим, что наше приложение лежит в папке /home/our_best_site/public_html/nextjs:

$ cd /home/our_best_site/public_html/nextjs
$ pm2 start npm --watch --ignore-watch="node_modules" --restart-delay=10000 --name "app_name1" -- start

Из строки видно, что запускаем мы в рабочей папке наш процесс npm start с именем app_name1, при этом следим за изменениями с задержкой перезапуска 10000мс и игнорируем папку node_modules.

При этом в терминале мы увидим наше приложение:

Заключение

В результате мы получаем nextjs приложение, которое работает на 3000 порту и все запросы (80 и 443 портов) в него проксируются через nginx. Управление приложением происходит через менеджер pm2. Стоит отметить, что все написанное будет работать и для React.js приложения с минимальными правками.

Ура, все работает)

Сообщение Запускаем Next.js приложение через PM2 на Nginx в простейшей конфигурации появились сначала на ConsultApp.ru.