Каркас приложения на React & Vite с рендером на сервере (SSR) или клиенте (SPA). Открытая структура кода для свободного изменения.
Новый проект создается форком или клонированием репозитория react-skeleton, чтобы в дальнейшем свободно модифицировать код под особенности проекта.
- Node.js >= 18
npm install
В режиме разработки приложение запускается командой:
npm start
или
npm run start:server С рендером на сервере (SSR)
Конфигурация приложения определяется в файле src/config.js.
По умолчанию определены параметры АПИ, навигации, модулей состояния и других сервисов.
Некоторые параметры передаются через переменные окружения. Можно создать файл .env.local,
чтобы изменить под себя переменные окружения.
Приложение доступно по адресу http://localhost:8050.
Порт меняется в файле конфигурации сервера server/config.js.
В конфигурации сервера также настраивается прокси к АПИ для обхода CORS.
server: {
port: 8050,
proxy: {...}
}
В режиме разработки используется сборщик Vite для отслеживания изменения в коде и последующего “горячего” обновления приложения в браузере.
Для публикации проекта на сервере сначала выполняется сборка приложения командой:
npm run build
или
npm run build:server - если нужен сервер рендера (SSR). Выполнится сборка браузерной и
серверной версии приложения.
Собранные файлы приложения окажутся в папке /dist. Подробнее.
Для проверки собранного приложения на локальном компьютере выполните команду:
npm run preview - запустится локальный сервер для отдачи статических файлов из /dist/client.
При этом выполнится сборка браузерной версии приложения.
или
npm run preview:server - запустится сервер для рендера приложения и отдачи статических файлов.
При этом выполнится сборка браузерной и серверной версии приложения.
Если приложение уже собрано, то сервер рендера можно запустить командой ts-node ./server/index.ts.
Для постоянной работы сервера рендера можно воспользоваться менеджером процессов pm2.
pm2 start process.json
На внешний сервер необходимо перенести папки с файлами:
- /dist
- /node_modules
- /server
- /typings
- tsconfig.json
- package.json
- proxy.config.ts
Если сервер рендера (SSR) не нужен, то переносится только /dist/client
Рекомендуется использовать nginx.
В режиме без рендера Nginx должен отдавать только файлы из папки ./dist/client.
Если запрос не на файл, то нужно отдавать ./dist/client/index.html.
Пример настройки nginx
server {
listen 80;
server_name react-skeleton.com;
location / {
root /home/user/react-skeleton/dist/client;
try_files $uri /index.html;
}
}
В режиме рендера (SSR) запускается приложение на node.js ts-node ./server/index.ts.
Через nginx все запросы на страницы сайта проксируются на сервер рендера.
Можно проксировать вообще все запросы, так как сервер рендера сам выполнит либо рендер, либо отдаст файлы из ./dist/client/assets/, а также спроксирует запросы к АПИ.
Для оптимизации отдачу файлов и проксирование к АПИ лучше выполнять через nginx.
server {
listen 80;
server_name react-skeleton.com;
client_max_body_size 10M;
# Прокси к АПИ (в соотв. с настройками приложения)
location /api/ {
proxy_redirect off;
proxy_set_header Host api.react-skeleton.com;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Frame-Options SAMEORIGIN;
proxy_pass https://api.react-skeleton.com;
}
# Запросы к файлам сборки (скрипты, стили, картинки..)
location /assets/ {
root /var/www/newsite/dist/client/;
try_files $uri $uri/ =404;
}
# Рендер - проксирование запроса в серверное приложение на 127.0.0.1:8050
location / {
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Frame-Options SAMEORIGIN;
proxy_pass http://127.0.0.1:8050;
}
}