Как перенести и встроить созданное в локальном Node.js React-приложение (простую кнопку) на работающий сайт?

Question

[Роман]

Здравствуйте.

Изучаю сейчас основы React. Следую уроку на https://ru.reactjs.org/tutorial/tutorial.html#comp... - делаю игру крестики-нолики.

Но у меня более практические вопросы сразу возникли:

1. Как мне теперь перенести это приложение на удаленный VPS (обычный LAMP под Ubuntu 18) чтобы оно запускалось без Node.js?

2. Что нужно сделать в связи с п.1 чтобы это приложение работало и в старых браузерах вроде IE 11?

Можете написать пошагово пожалуйста?

Спасибо.

//у меня сейчас локально в папке my-app/public - index.html как точка входа(?) и my-app/src два файла: index.css и index.js в соответствии с учебной статьей - как мне теперь всю это добро встроить для показа на VPS, скажем, в index.html в корень?

//По совету Антона собрал при помощи

npm run build

Но если я открываю в браузере build/index.html - ничего не происходит - белая страница...

Вот что оно мне написало после сборки



но я так и не понял чего оно еще хочет?

Answer 1

[Антон Спирин]

1. Не ясно зачем вы переместили index.css и index.js в public. Попробуйте почитать про create-react-app - что это, зачем и как работает.
2. Чтобы собрать билд достаточно выполнить в директории проекта:
npm run build
билд будет собран в директории my-app/build

Comments

[Роман]

1. Это опечатка, исправил, конечно же они в src как в инструкции.

2. Сейчас попробую :) Спасибо.

[Роман]

Собрал.

Но если я открываю в браузере index.html - ничего не происходит...

Вот что оно мне написало после сборки



но я так и не понял чего оно еще хочет?

[Антон Спирин]

Роман, потому что надо отдавать билд через веб-сервер. Вы вроде Apache собирались использовать. содержимое папки static надо отдавать как статику.

[Роман]

Антон Спирин, а причем здесь вообще веб-сервер? (Антон, я хочу полностью разобраться) Речь ведь не идет об исполнении скриптов на стороне сервера - это ведь обычный javascript (как я понял) и ему совершенно без разницы открываю я файл из папки на компьютере или мне отдает его удаленный Apache2.

Что именно я упускаю в своих рассуждениях сейчас?

Спасибо.

[Антон Спирин]

Роман, просто откройте панель разработчика на вкладке network, перезагрузите страницу и все поймете.
Теперь посмотрите скомпилированные файлы. Замените в index.html пути к ресурсам с '/static/...' на 'static/...'
И вот ресурсы подгружаются без сервера и приложение запускается. Но не будет картинок из JavaScript, там надо, полные пути писать.
Ваш сервер же будет забирать статику в зависимости от того как вы его настроите. При билде вся статика удобно складывается в папку static с сохранением всех путей и есть смысл брать ее прям оттуда.

[Роман]

Антон, нашел в чем там проблема - оно пути прописало относительно корня, а не текущего каталога:

https://toster.ru/answer?answer_id=1363213#answers...

все работает, спасибо!

Answer 2

[Роман]

Нашел ответ догадавшись посмотреть в консоль :D

оно при сборке ошибку в путях сделало:

<script src="/static/js/main.d4f93a30.chunk.js"></script>

а надо так:

<script src="./static/js/main.d4f93a30.chunk.js"></script>

теперь все работает, спасибо!