Установка react приложения на хостинг?

Question

[Delerom]

Доброго времени суток. Купил themeforest лендинг на react (сборшик webpack). На локалке все развернул, все рабоатет через localhost:3000, сделал все нужные изменения, но как это все залить на хостинг словил тупик.

Делаю такие действия (на локалке):

npm run build --prod

Далее такие комментарии скрипта (mydomen заменил на свой домен):

The project was built assuming it is hosted at mydomen.ru.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

serve -s build

Find out more about deployment here:

https://bit.ly/CRA-deploy

Появляется папка built с проектом, но при открытии index.html белый экран. Пробовал писать serve -s build пишет ошибку "serve : Невозможно загрузить файл C:\Users\38066\AppData\Roaming\npm\serve.ps1, так как выполнение сценариев отключено в этой системе."

Помогите советом куда мне это ставить? на какой хост, на бегет можно? Запутался. За ранее спасибо!

Answer 1

[LoveCodeandCoffe]

Можно ссылку на темплейт. Может , быть так, что шаблон написан не на чистом react, а например с применением ssr или static generation.
Хостинг не дает выполнить серверную коману. Потому, что у вас не vps. Ваш тип хостинга не поддерживает node .js

А возможно вам и не нужен сервер, опять же нужно знать на чем написан ваш шаблон.

Тогда вам нужно локально у себя на компьютере сбилдить проект npm run build или yarn build . А на хостинг залить ТОЛЬКО содержимое папки build. Ну а дальше произвести настройки в соответствии с вашим хостингом. (Привязать домен и тд)

Comments

[Delerom]

https://themeforest.net/item/trydo-creative-agency...

В документации для билда аот эиа команда и все

npm run build --prod

[LoveCodeandCoffe]

Delerom, Ваш шаблон на чистом реакте. Вам нужно произвести сборку приложения. npm run build или yarn build ( команды могут отличаться, список всех команд есть в package.json файле)
В вашем случае npm run build --prod
после чего содержимое папки build( только это) залить на хостинг (куда , думаю разберетесь, если обычный хостинг, то обычно папка === имени домена). После произвести все настройки, согласно вашему хостинг провайдеру.

И еще важный пункт. Скорее всего этот файлик будет уже в вашем проект , и будет правильно настроен.
Фаил .htacces
Суть в том, что он должен быть настроен так, чтобы всегда отдавать индексную страницу - index.html
Навигацию на себя берет сам реакт используя роутинг, и на его основании показывает нужное содержимое. Но физически страница у вас 1. НО, я думаю, обо всем этом позаботились создатели шаблона.

[LoveCodeandCoffe]

Delerom, Вы модифицировали, сами как-то шаблон? . Причин вызывающих эту ошибку много. Залили все, все это я надеюсь содержимое папки build? . Какой у вас хостинг?

Answer 2

[McBernar]

1. Вам нужен сервер. Как статика реакт не работает.
То есть, локально эти файлы не сработают.
2. Могу предположить, что вам еще нужен htaccess на хостинге, который перенаправит все запросы на index, если у вас больше одной страницы.

Comments

[LoveCodeandCoffe]

Вы заблуждаетесь. Реакт использует виртуальное дом дерево. Для его работы сервер не нужен. Сервер становится не обходим. Если вы хотите свое реакт-приложение рендерить на стороне сервера.

А static generation также задействует сервер но только во время процесса сборки. После сборки, приложение приставляет собой набор html страниц, которым также не нужен сервер.

Просто реакт — это javascript . Который работает чисто на клиенте, ему сервер не нужен, такой подход ( не уверен) называет client generation. У вас 1 html страница. А весь контент генерирует js

Итого react ssr - нужен сервер всегда, react static generation - нужен сервер только в момент сборки/пересборки приложения. react - сервер не нужен

[McBernar]

LoveCodeandCoffe, да-да, конечно. Не несите чуши.

[LoveCodeandCoffe]

McBernar, Это я чушь несу? Вы читать пробовали, прежде , чем что-то утверждать?

[McBernar]

Ой, смотрите, что это? А это реакт, запущенный локально, не в состоянии найти нужные чанки.



Еще раз повторю - не несите чуши. Реакт, собранный через вебпак/create-app не работает локально. Локально он будет работать только в одном случае - если сам реакт подключен через тег script, как раньше было с jquery. Но так никто, очевидно, не делает.

И именно для этого вместе с реактом идет и serve, который поднимает сервер для просмотра билда локально.

[LoveCodeandCoffe]

Мда, https://dev.to/crishanks/deploy-host-your-react-ap... почитайте первая же ссылка в гугле. Сервер, он использует только в процессе разработки, это и ежу понятно. А билдится все это дело в обычный js .
На еще ссылку. https://medium.com/@cmichel/how-to-deploy-a-create...
Ну странный вы человек))). Как обычному javascript может быть нужен сервер. Вы вообще понимаете , что делает команда build ? Что такое babel , да и вообще что такое react . И webpack. Сервер по сути то, нужен не реакту а webpack, чтобы у вас хот релоад работал, и прочие фифти-плюшки. Когда вы пишите yarn build .
Ваш реакт код трансформируется в обычный js файл. . Который подключается к index.html. И вы утверждаете, что для содержимого папки build нужен сервер?)))

[LoveCodeandCoffe]

McBernar, LoveCodeandCoffe, Держи еще ссылку https://medium.com/@aforamitrai/how-to-deploy-reac....

Повтори все эти 3 шага . После этого убедишься, что ты был плохо осведомлен в этом вопросе.

Ps. Ну ты давай, это образовывайся)

[McBernar]

LoveCodeandCoffe, ахах ) хотел выглядеть умным, но опять сел в лужу.

Еще раз для особо медлительных - открывая файл index.html из билда приложения напрямую, браузер начинает искать чанки по путям /static/chuck.js, что, очевидно, приведет его не в корень папки, а в корень диска, где никаких чанков быть не может. А чтобы браузер считал папку с билдом корневой директорией - нужно в ней запустить локальный сервер и открыть проект, соответственно, через локалхост. Для этого, повторюсь, с реактом идет пакет из npm, который называется serve.

Второй момент - реакт-роутер не генерирует страницы в реальные файлы на диске. Там как лежал один индексный файл, так и будет лежать. Соответственно, чтобы роутер отрабатывал - мог парсить урлы и разводить пользователя по страницам, нужно создавать htaccess или настраивать nginx, чтобы все запросы шли через index. Опять же, ни то ни другое без сервера невозможно.

Так что, пирожочек, прекрати уже позориться.

Ps. Ну ты давай, это образовывайся)

[LoveCodeandCoffe]

McBernar, Ты читал ссылки которые я скинул)) на шаред хостинге нджинкс установлен автоматом, . Все, что нужно делать прописать htacces. Чтобы находить твои файлы это и ежу понятно, но тебе видемо нет.
Ты хоть ссылки открывал ) Ты путаешься во всем. Все что нужно это настроить htacces файл. Не нужно подымать сервер средствами реакта. Ты его не подимешь на шаред хостинге, там нет поддержки ноды.
Прочитай 3 ссылку. Там деплоится приложение и не подымается никакой сервер. Твое приложение обрабатывается nginx который автоматом установлен на все хостинги. Какой тебе еше север нужен?. Речь о разных серверах понимаешь? Для ssr тебе одного nginx будет не достаточно. Надеюсь понимаешь. А для create-react-app сервер на ноде не нужен. ты просто копируешь папку nginx на хостинг. Речь о обычном хостинге шаред хостинге. На vps nginx автоматом не ставят, поэтому ты его и устанавливаешь. Но это не для функционирования приложения. А для того, чтобы его можно было бы правильно обнаружить в сети.

Для ssr. Для САМОГО приложения нужен сервер на node. Для cra такой сервер не нужен. Ты можешь залить build папку на github pages. Все, что нужно это прописать rewriterull и все))) . Да проверь сам если не веришь. Также можно разместить на обычный шаред хостинг , потому как там nginx уже установлен. А для реакт преложения которое не использует рендер на стороне сервера, не нужен сервер.

Или ты мне про nginx пытался доказать. Но он установлен на всех шаред хостингах автоматом.
Поэтому твое . "Вам нужен сервер" Какой ему еще нужен сервер??

[LoveCodeandCoffe]

LoveCodeandCoffe, И дядя как он запустит команду serve на шаред хостинге?)) Короче позоришься только ты прочитай уже наконец 3 ссылку. Как обычное приложение create-react-app билдят у себя на локалке а затем размещают на обычном шаред хостинге. Прописав всего лишь rewriterull. И встань уже с лужи)

[McBernar]

Боже мой, что ты несешь? Зачем ты мне доказываешь то, что я же сам тебе и писал?

Человек спросил — почему белый экран. Ответ простой — нужен сервер. Как простой файл в проводнике реакт-приложение не открыть. Точка.

Что ты предлагаешь мне почитать, дурачок?

[black-evil-dragon]

Вот это я понимаю — битва. И кому верить?)

Answer 3

[Михаил]

Разместил реакт приложение на шаред хостинге.
Работает.
Без .htaccess.
Правда пришлось немного подредактировать index.html
Там были ссылки

<script defer="defer" src="/new_react_app/static/js/main.94736296.js"></script>
	<link href="/new_react_app/static/css/main.b8d5c848.css" rel="stylesheet">
</head>

и я из них удалил /new_react_app
и все заработало
Билдил командой
npm run build

Все чанки как раз в папке static

Возможно оно может не запускаться как раз из-за этой ссылки /new_react_app/static/