Как лучше загрузить сайт на React на GitHub для доказательства, что он действительно на React?

Question

[ProgerMir]

Здравствуйте, этот вопрос у меня относится к удобству чтения кода и просмотра сайта другими пользователями, чтобы они удостоверились в разработке на React. Смотрел советы, создаётся папка build, и в ней статические файлы? От такого способа не будет видно, что применялся Реакт? Лучше тогда загрузить абсолютно все файлы проекта, а не только папку build? Если есть ещё другой способ, расскажите, пожалуйста.

Comments

[chemdev]

да по идее расширение реакт дев тулс для браузера детектит что билд на реакте, поправьте если ошибаюсь

[Михаил Р.]

chemdev,

да по идее расширение реакт дев тулс для браузера детектит что билд на реакте, поправьте если ошибаюсь

Тип сборки детектит.

а не только папку build?

А кто Вам сказал, что в build будет build сборка? ;)

[Алексей Уколов]

чтобы они удостоверились в разработке на React

Это очень странная задача. Кажется, мы имеем дело с Проблемой XY.

[tehfreak]

Алексей Уколов, это вполне конкретная задача с конкретным решением. При чем здесь ошибка молотка?

[Алексей Уколов]

tehfreak, ну, возможно, только мне формулировка «вопрос относится к удобству чтения кода и просмотра сайта другими пользователями, чтобы они удостоверились в разработке на React» непонятна и кажется откровенно странной (какими пользователями? зачем им читать код? почему их нужно убеждать, что сайт на Реакте?) ¯\_(ツ)_/¯

[tehfreak]

Алексей Уколов, мне кажется что тут под пользователями подразумеваются кураторы или менторы на курсе по Реакту.

[Алексей Уколов]

tehfreak, кураторам и менторам показывают исходники, им не нужно доказывать, что сайт сделан на Реакте. Отсюда и подозрение на Проблему XY.

Answer 1

[Михаил Р.]

этот вопрос у меня относится к удобству чтения кода и просмотра сайта другими пользователями, чтобы они удостоверились в разработке на React.

В репу заливается весь проект, исключая зависимости, так, чтобы можно было скопировать проект себе на локалку, поставить зависимости и:
- Запустить в режиме разработки одной командой.
- Собрать проект одной командой.
- Выполнить тесты одной командой.

Либо, чтобы из репы можно было скопировать лишь dist/ и сразу опубликовать это как приложение в любом месте, без дополнительных команд.

От такого способа не будет видно, что применялся Реакт?

Слепой не увидит ничего, в остальном - все чекается на раз-два.

Рекомендую изучить крупные репы и обратить внимание на то, что там в рамках одной репы имеются исходники (src), сборки разных видов (dist/build), опубликованы все необходимые команды так, чтобы даже не зрячая обезьянка могла скопировать и выполнить эту команду, чтобы получить желаемый результат.

Comments

[ProgerMir]

Спасибо вам за такой подробный ответ. Всё стало теперь понятно.

Answer 2

[tehfreak]

Github Pages это хостинг статических стайтов. И у него есть два режима работы:

1. Хостинг из указанной ветки
Можно руками закоммитить содержимое папки build в какую-то ветку, и выбрать эту ветку в качестве источника в настройках репозитория в разделе Pages.

Это можно частично автоматизировать с помощью, например, этого инструмента.

Вот пример команды для развертывания проекта на основе CRA (Create React App)

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "deploy": "npm run build && gh-pages -d dist"
}

2. Хостинг артефактов
Можно полностью автоматизировать сборку и развертывание при коммите в репозиторий, написав сценарий с помощью Github Actions. В этом случае нужно выбрать Github Actions в качестве источника в настройках репозитория в разделе Pages.

Вот пример автоматизации развертывания проекта на основе CRA

Репозиторий с исходным кодом: https://github.com/tehfreak/example-react-cra-ghpa...
Сценарий сборки и развертывания в этом репозитории: https://github.com/tehfreak/example-react-cra-ghpa...
Собранный код доступен по этой ссылке: https://tehfreak.github.io/example-react-cra-ghpag...

Вот пример автоматизации развертывания проекта на основе NextJS

Репозиторий с исходным кодом: https://github.com/tehfreak/example-react-nextjs-g...
Сценарий сборки и развертывания в этом репозитории: https://github.com/tehfreak/example-react-nextjs-g...
Собранный код доступен по этой ссылке: https://tehfreak.github.io/example-react-nextjs-gh...

В этих примерах сценарии максимально упрощены. В реальных проектах сценарии сборки и развертывания чуть сложнее. Но эти сценарии вполне можно использовать как есть для работы над небольшими пет-проектами.

В обоих случаях в репозитории лежит исходный код. Но в первом случае собранный код лежит в отдельный ветке, а во втором случае собранный код лежит где-то во внутреннем хранилище Гитхаба.

Я рекомендую автоматизировать развертывание. Happy hacking!

Comments

[ProgerMir]

Спасибо за подробный ответ, изучу информацию

[tehfreak]

Попробуй создать у себя репозиторий, зайди в настройки репозитория в раздел Pages и выбери в поле target значение Github Actions. После чего залей в репозиторий код одного из моих примеров, в ветку master.

Процесс сборки и развертывания запустится автоматически после коммита. Ты сможешь понаблюдать за ним во вкладке Actions. После успешного развертывания перейди по ссылке nickname.github.io/reponame/ чтобы увидеть работающее приложение.

Answer 3

[hash_buy_yourself]

Можно запустить реакт приложение в GitHub pages, информация легко гуглиться запросом - react + GitHub pages