Как лучше загрузить сайт на React на GitHub для доказательства, что он действительно на React?
Здравствуйте, этот вопрос у меня относится к удобству чтения кода и просмотра сайта другими пользователями, чтобы они удостоверились в разработке на React. Смотрел советы, создаётся папка build, и в ней статические файлы? От такого способа не будет видно, что применялся Реакт? Лучше тогда загрузить абсолютно все файлы проекта, а не только папку build? Если есть ещё другой способ, расскажите, пожалуйста.
Дополнительно:
да по идее расширение реакт дев тулс для браузера детектит что билд на реакте, поправьте если ошибаюсь
да по идее расширение реакт дев тулс для браузера детектит что билд на реакте, поправьте если ошибаюсь
Тип сборки детектит.
а не только папку build?
А кто Вам сказал, что в build будет build сборка? ;)
чтобы они удостоверились в разработке на React
Это очень странная задача. Кажется, мы имеем дело с Проблемой XY.
этот вопрос у меня относится к удобству чтения кода и просмотра сайта другими пользователями, чтобы они удостоверились в разработке на React.
В репу заливается весь проект, исключая зависимости, так, чтобы можно было скопировать проект себе на локалку, поставить зависимости и:
- Запустить в режиме разработки одной командой.
- Собрать проект одной командой.
- Выполнить тесты одной командой.
Либо, чтобы из репы можно было скопировать лишь dist/ и сразу опубликовать это как приложение в любом месте, без дополнительных команд.
От такого способа не будет видно, что применялся Реакт?
Слепой не увидит ничего, в остальном - все чекается на раз-два.
Рекомендую изучить крупные репы и обратить внимание на то, что там в рамках одной репы имеются исходники (src), сборки разных видов (dist/build), опубликованы все необходимые команды так, чтобы даже не зрячая обезьянка могла скопировать и выполнить эту команду, чтобы получить желаемый результат.
- Спасибо вам за такой подробный ответ. Всё стало теперь понятно.
Ответы:
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" } |
"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!
- Спасибо за подробный ответ, изучу информацию
- Попробуй создать у себя репозиторий, зайди в настройки репозитория в раздел Pages и выбери в поле target значение Github Actions. После чего залей в репозиторий код одного из моих примеров, в ветку master.
Процесс сборки и развертывания запустится автоматически после коммита. Ты сможешь понаблюдать за ним во вкладке Actions. После успешного развертывания перейди по ссылке nickname.github.io/reponame/ чтобы увидеть работающее приложение.
Можно запустить реакт приложение в GitHub pages, информация легко гуглиться запросом - react + GitHub pages
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для загрузки сайта на React на GitHub и доказательства того, что он действительно на React, вам потребуется выполнить несколько шагов. Вот подробная инструкция:
1. Создайте новый репозиторий на GitHub, нажав кнопку "New" в вашем профиле.
2. Назовите репозиторий так, чтобы было понятно, что это проект на React.
3. Откройте терминал на вашем компьютере и перейдите в папку с вашим проектом.
4. Инициализируйте Git в вашем проекте с помощью команды `git init`.
5. Добавьте все файлы проекта в индекс Git с помощью команды `git add .`.
6. Сделайте коммит изменений с помощью команды `git commit -m "Initial commit"`.
7. Свяжите ваш локальный репозиторий с удаленным репозиторием GitHub с помощью команды `git remote add origin `.
8. Загрузите ваш проект на GitHub с помощью команды `git push -u origin master`.
Теперь ваш проект на React загружен на GitHub. Чтобы доказать, что он действительно на React, вы можете добавить соответствующие метаданные в ваш проект. Например, вы можете создать файл `package.json` и указать в нем зависимости на React.
```
{ "dependencies": { "react": "^17.0.2", "react-dom": "^17.0.2" } }{ "dependencies": { "react": "^17.0.2", "react-dom": "^17.0.2" } }
```
Также вы можете добавить файлы компонентов React и использовать ключевые слова, характерные для React, в вашем коде. Например, вы можете создать компонент и использовать JSX:
```
import React from 'react'; const App = () => { return ( <div> <h1>Hello, React!</h1> </div> ); } export default App;import React from 'react'; const App = () => { return ( <div> <h1>Hello, React!</h1> </div> ); } export default App;
```
Таким образом, следуя этим шагам и добавляя соответствующие метаданные и код на React, вы сможете загрузить свой сайт на GitHub и доказать, что он действительно на React.