Как запустить сайт на React

Для начала нужно определить как вы хотите использовать хостинг. Вариантов два:

1. Вы не разработчик. У вас есть готовый сайт на React.
2. Вы разработчик. Будете разрабатывать сайт не на своем компьютере, а на хостинге.
3. Ошибка роутинга.

Вы не разработчик. У вас есть готовый сайт на React.

Можно предположить, что раз React связан с javascript, то для его работы нужен вебсервер nodejs. Совсем не обязательно!

Более простым вариантом будет не использовать nodejs, а создать статический HTML-сайт:

Создадим новый сайт в панели управления:

• перейдите в раздел хостинг

• кликните на нужный контейнер

• кликните на кнопку “Добавить сайт”

• создайте новый сайт на HTML:

Теперь нужно посмотреть на папку с сайтом на вашем компьютере.

Есть ли там папка build? Обычно проект на React выглядит так:

├── build ---нам нужно содержимое этой папки
├── node_modules
├── package.json
├── package-lock.json
├── public
├── README.md
└── src

Если папки нет, попросите разработчика сгенерировать папку build и передать ее вам.

Если вы разработчик, то создайте такую папку с сайтом, выполнив команду

npm run build

Подключитесь к хостингу по SFTP.

Загрузите содержимое папки build в каталог имя_сайта/www

Теперь откройте в браузере https://имя_сайта.

Готово!

Вы разработчик. Будете разрабатывать сайт не на своем компьютере, а на хостинге.

Рекомендуем разрабатывать сайт на своем компьютере, а на хостинг загружать только готовую версию сайта из каталога build.

Если вы все же хотите запустить на хостинге dev сервер, то рекомендуем прочитать об особенностях запуска приложений на Nodejs.

Ошибка роутинга.

Если при переходе по ссылкам сайта Вы получаете ошибку 404, это происходит потому что сервер пытается найти физические файлы по этим путям, а не передает управление вашему React приложению.

Для решения данной ситуации, создайте файл с именем .htaccess в каталоге сайта имя_сайта/www, после чего добавьте в него следующие строки:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

После этого проблем с роутингом страниц, не должно быть.