Створення і клонування своєї збірки React на базі Create React App
Створення застосунку React
Створимо і налаштуємо збірку React, яку зможемо потім використовувати як шаблон для всіх наступних наших проєктів. Далі приблизна покрокова інструкція.
Створимо новий репозиторій на сайті GitHub: + -> New repository
Дамо назву нашому репозиторію-шаблону React. Можемо додати опис нашому репозиторію. Робимо репозиторій публічним.
Клонуємо створений проєкт локально на компʼютер і відкриваємо його в VSCode.
Відкриваємо термінал і розгортаємо застосунок React цією командою.
npx create-react-app .
Тепер у нас є розгорнутий проєкт React із такою структурою:
Файл конфігурації проєкту package.json
Тека node_modules в яку будуть встановлюватися всі додаткові модулі
Тека public з якою ми мало працюватимемо, але в якій лежить головний файл index.html в якому вестиметься наш проєкт.
.gitignore - файл в якому прописано правила ігнорування файлів і тек при синхронізації з GitHub
README.md - файл з описом нашого проєкту. його можна правити. Це той опис, який ми бачимо, коли відкриваємо сторінку репозиторія на GitHub
І головна робоча тека src із головним файлом застосунку index.js
Запустимо наш проєкт і переконаємося, що він працює. Виконаємо в терміналі таку команду:
npm start Після цього запуститься сервер і в консолі зʼявиться повідомлення, що ми можемо переглянути проєкт за адресою в браузері http://localhost:3000/:
Також автоматично відкриється і браузер за цією адресою.
Сконфігуруємо базовий URL нашого проєкту (для зручної роботи з посиланнями на файли проєкту). Для цього в корені проєкту створимо файл jsconfig.json із таким кодом:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}Якщо є бажання, можна також створити кастомний файл налаштування форматування коду для Prettier (це на випадок, якщо доведеться працювати в команді та потрібні будуть уніфіковані правила оформлення вихідного коду). Створимо в корені проєкту файл .prettierrc.json і в ньому помістимо, наприклад такий код:
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "avoid",
"proseWrap": "always"
}Тепер потрібно налаштувати деплой (розміщення на сервері) нашого проєкту на GitHub-pages. Це роблять за допомогою автоматизатора GitHub Actions. Також можна встановити додатково розширення GitHub Actions для VSCode. Це значний шматок інформації. Тут буде використано необхідний мінімум.
Створимо в корені проєкту теку .github, а в ній теку workflows, а в ній файл deploy.yml з таким вмістом:
name: Build and deploy to GitHub Pages
on:
push:
branches: [main]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/checkout@v2.3.1
- name: Install, lint, build 🔧
run: |
npm install
npm run lint:js
npm run build
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@4.1.0
with:
branch: gh-pages
folder: build
В цьому файлі прописана автоматизація, як буде відбуватися деплой проєкту після оновлення головної гілки на GitHub.
Збирати проєкт ми будемо із файлів з головної гілки main.
Після цього ми встановимо всі необхідні пакети, проженемо код на лінтері (перевірка коду), і побудуємо проєкт у теку build. Назва гілки буде gh-pages.
Потрібно ще налаштувати лінтер. Це додатковий пакет, який перевіряє код на помилки. Деплой на GitHub pages буде відбуватися тільки у разі відсутності помилок. Якщо якісь помилки все ж таки допущено, то на сторінці репозиторію на сайті GitHub ми побачимо звіт про помилки із їх вказанням і настановами, що потрібно виправити.
Встановимо бібліотеки тестування:
npm i @testing-library/reactПідправимо наш файл конфігурації проєкту package.json. Додамо такі налаштування:
"homepage": "https://sasha-khomiak.github.io/my-react-template/",Тут sasha-khomiak - назва профілю на GitHub, а my-react-template - назва репозиторію.
У файлі package.json в скриптах потрібно дописати додатковий скрипт.
"lint:js": "eslint src/**/*.{js,jsx}"Відтак налаштування матимуть приблизно такий вигляд:
{
"name": "my-react-template",
"version": "0.1.0",
"private": true,
"homepage": "https://sasha-khomiak.github.io/my-react-template/",
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint:js": "eslint src/**/*.{js,jsx}"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}У файлі index.html в теці public потрібно дописати в тезі <head> такий скрипт
<!-- Start Single Page Apps for GitHub Pages -->
<script type="text/javascript">
// Single Page Apps for GitHub Pages
// MIT License
// https://github.com/rafgraph/spa-github-pages
// This script checks to see if a redirect is present in the query string,
// converts it back into the correct url and adds it to the
// browser's history using window.history.replaceState(...),
// which won't cause the browser to attempt to load the new url.
// When the single page app is loaded further down in this file,
// the correct url will be waiting in the browser's history for
// the single page app to route accordingly.
(function (l) {
if (l.search[1] === '/') {
var decoded = l.search
.slice(1)
.split('&')
.map(function (s) {
return s.replace(/~and~/g, '&');
})
.join('?');
window.history.replaceState(
null,
null,
l.pathname.slice(0, -1) + decoded + l.hash
);
}
})(window.location);
</script>
<!-- End Single Page Apps for GitHub Pages -->А також потрібно в теці public створити файл 404.html із таким вмістом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Single Page Apps for GitHub Pages</title>
<script type="text/javascript">
// Single Page Apps for GitHub Pages
// MIT License
// https://github.com/rafgraph/spa-github-pages
// This script takes the current url and converts the path and query
// string into just a query string, and then redirects the browser
// to the new url with only a query string and hash fragment,
// e.g. https://www.foo.tld/one/two?a=b&c=d#qwe, becomes
// https://www.foo.tld/?/one/two&a=b~and~c=d#qwe
// Note: this 404.html file must be at least 512 bytes for it to work
// with Internet Explorer (it is currently > 512 bytes)
// If you're creating a Project Pages site and NOT using a custom domain,
// then set pathSegmentsToKeep to 1 (enterprise users may need to set it to > 1).
// This way the code will only replace the route part of the path, and not
// the real directory in which the app resides, for example:
// https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
// https://username.github.io/repo-name/?/one/two&a=b~and~c=d#qwe
// Otherwise, leave pathSegmentsToKeep as 0.
var pathSegmentsToKeep = 1;
var l = window.location;
l.replace(
l.protocol +
'//' +
l.hostname +
(l.port ? ':' + l.port : '') +
l.pathname
.split('/')
.slice(0, 1 + pathSegmentsToKeep)
.join('/') +
'/?/' +
l.pathname
.slice(1)
.split('/')
.slice(pathSegmentsToKeep)
.join('/')
.replace(/&/g, '~and~') +
(l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
l.hash
);
</script>
</head>
<body></body>
</html>
Тепер потрібно внести налаштування на самому GitHub. Для цього потрібно дозволити виконання GitHub Actions (як на скрінах) і зберегти зміни.
Settings -> General -> Allow all actions reusable workflows
А внизу сторінки вибрати Read and write permissions і Allow GitHub Actions to create and approve pull requests
Тепер можна в GitHub Desktop закомітити всі зміни та опублікувати гілку.
На сторінці репозиторію видно індикатор статусу виконання деплою.
Жовтий кружечок - операція виконується,
зелена галочка - все успішно задеплоєно,
червоний хрестик - виникла помилка. Натиснувши на символ хрестика можна отримати звіт про помилку.
Тепер потрібно отримати сторінку за якою ми зможемо переглянути наш застосунок. У налаштуваннях Settings -> Pages обираємо гілку gh-pages і натискаємо Save. чекаємо хвилинку-дві та отримаємо посилання на проєкт.
Тепер налаштуємо наш проєкт так, щоб ми могли створити копію цього проєкту прямо на GitHub сторінці. Settings -> General -> Template repository
Створення копії застосунку React
Щоб не повторювати вручну всі ці налаштування проєкту ми можемо його просто продублювати - створити копію і внести певні незначні корективи для подальної роботи. Розглянемо порядок дій.
На сторінці репозиторію натискаємо кнопку Use this template та обираємо Create a new repository.
Даємо імʼя новому репозиторію і зберігаємо натиснувши кнопку Create repository.
Одразу налаштуємо, щоб працювали GitHub Actions.
Settings -> Actions -> General
Вибираємо Read and write permissions і Allow GitHub Actions to create and approve pull requests
Клонуємо репозиторій на локальний компʼютер
У VSCode вносимо правки в файл package.json. Вказуємо нове імʼя застосунку і новий свій профіль GitHub (якщо інший користувач створив із шаблону застосунок).
Встановлюємо всі залежності
npm iЗапускаємо локально проект командою
npm startВнесемо якісь зміни у файл App.js, щоб переконатися, що наші правки працюють.
У GitHub Desktop зробимо комміт і опублікуємо його.
Відкриваємо репозиторій на GitHub і чекаємо успішного виконання деплою.
Налаштовуємо gh-pages і чекаємо поки зʼявиться посилання на живу сторінку. Settings -> Pages -> Branch -> gh-pages
На цьому можемо зупинитися. Але немає межі досконалості. Тому кожен може налаштувати під себе свою конфігурацію проекту React.
Покликання:
Проект create-react-app на GitHub
Deploying a React App* to GitHub Pages
Last updated