Створення і клонування своєї збірки React на базі Create React App

Створення застосунку React

Створимо і налаштуємо збірку React, яку зможемо потім використовувати як шаблон для всіх наступних наших проєктів. Далі приблизна покрокова інструкція.

1. Створимо новий репозиторій на сайті GitHub: + -> New repository

1. Дамо назву нашому репозиторію-шаблону React. Можемо додати опис нашому репозиторію. Робимо репозиторій публічним.

1. Клонуємо створений проєкт локально на компʼютер і відкриваємо його в VSCode.

1. Відкриваємо термінал і розгортаємо застосунок React цією командою.

terminal

npx create-react-app .

1. Тепер у нас є розгорнутий проєкт React із такою структурою:

• Файл конфігурації проєкту package.json

• Тека node_modules в яку будуть встановлюватися всі додаткові модулі

• Тека public з якою ми мало працюватимемо, але в якій лежить головний файл index.html в якому вестиметься наш проєкт.

• .gitignore - файл в якому прописано правила ігнорування файлів і тек при синхронізації з GitHub

• README.md - файл з описом нашого проєкту. його можна правити. Це той опис, який ми бачимо, коли відкриваємо сторінку репозиторія на GitHub

• І головна робоча тека src із головним файлом застосунку index.js

1. Запустимо наш проєкт і переконаємося, що він працює. Виконаємо в терміналі таку команду:

terminal

npm start 

Після цього запуститься сервер і в консолі зʼявиться повідомлення, що ми можемо переглянути проєкт за адресою в браузері http://localhost:3000/:

Також автоматично відкриється і браузер за цією адресою.

1. Сконфігуруємо базовий URL нашого проєкту (для зручної роботи з посиланнями на файли проєкту). Для цього в корені проєкту створимо файл jsconfig.json із таким кодом:

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

1. Якщо є бажання, можна також створити кастомний файл налаштування форматування коду для Prettier (це на випадок, якщо доведеться працювати в команді та потрібні будуть уніфіковані правила оформлення вихідного коду). Створимо в корені проєкту файл .prettierrc.json і в ньому помістимо, наприклад такий код:

.prettierrc.json

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "proseWrap": "always"
}

1. Тепер потрібно налаштувати деплой (розміщення на сервері) нашого проєкту на GitHub-pages. Це роблять за допомогою автоматизатора GitHub Actions. Також можна встановити додатково розширення GitHub Actions для VSCode. Це значний шматок інформації. Тут буде використано необхідний мінімум.

Створимо в корені проєкту теку .github, а в ній теку workflows, а в ній файл deploy.yml з таким вмістом:

.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.

1. Потрібно ще налаштувати лінтер. Це додатковий пакет, який перевіряє код на помилки. Деплой на GitHub pages буде відбуватися тільки у разі відсутності помилок. Якщо якісь помилки все ж таки допущено, то на сторінці репозиторію на сайті GitHub ми побачимо звіт про помилки із їх вказанням і настановами, що потрібно виправити.

Встановимо бібліотеки тестування:

terminal

npm i @testing-library/react

1. Підправимо наш файл конфігурації проєкту package.json. Додамо такі налаштування:

package.json

"homepage": "https://sasha-khomiak.github.io/my-react-template/",

Тут sasha-khomiak - назва профілю на GitHub, а my-react-template - назва репозиторію.

У файлі package.json в скриптах потрібно дописати додатковий скрипт.

package.json

"lint:js": "eslint src/**/*.{js,jsx}"

Відтак налаштування матимуть приблизно такий вигляд:

package.json

{
  "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"
    ]
  }
}

1. У файлі index.html в теці public потрібно дописати в тезі <head> такий скрипт

public/index.html

    <!-- 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 із таким вмістом:

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>

1. Тепер потрібно внести налаштування на самому GitHub. Для цього потрібно дозволити виконання GitHub Actions (як на скрінах) і зберегти зміни.

Settings -> General -> Allow all actions reusable workflows

А внизу сторінки вибрати Read and write permissions і Allow GitHub Actions to create and approve pull requests

1. Тепер можна в GitHub Desktop закомітити всі зміни та опублікувати гілку.

1. На сторінці репозиторію видно індикатор статусу виконання деплою.

Жовтий кружечок - операція виконується,

зелена галочка - все успішно задеплоєно,

червоний хрестик - виникла помилка. Натиснувши на символ хрестика можна отримати звіт про помилку.

1. Тепер потрібно отримати сторінку за якою ми зможемо переглянути наш застосунок. У налаштуваннях Settings -> Pages обираємо гілку gh-pages і натискаємо Save. чекаємо хвилинку-дві та отримаємо посилання на проєкт.

1. Тепер налаштуємо наш проєкт так, щоб ми могли створити копію цього проєкту прямо на GitHub сторінці. Settings -> General -> Template repository

Створення копії застосунку React

Щоб не повторювати вручну всі ці налаштування проєкту ми можемо його просто продублювати - створити копію і внести певні незначні корективи для подальної роботи. Розглянемо порядок дій.

1. На сторінці репозиторію натискаємо кнопку Use this template та обираємо Create a new repository.

1. Даємо імʼя новому репозиторію і зберігаємо натиснувши кнопку Create repository.

1. Одразу налаштуємо, щоб працювали GitHub Actions.

Settings -> Actions -> General

Вибираємо Read and write permissions і Allow GitHub Actions to create and approve pull requests

1. Клонуємо репозиторій на локальний компʼютер

1. У VSCode вносимо правки в файл package.json. Вказуємо нове імʼя застосунку і новий свій профіль GitHub (якщо інший користувач створив із шаблону застосунок).

1. Встановлюємо всі залежності

terminal

npm i

1. Запускаємо локально проект командою

terminal

npm start

1. Внесемо якісь зміни у файл App.js, щоб переконатися, що наші правки працюють.

1. У GitHub Desktop зробимо комміт і опублікуємо його.

1. Відкриваємо репозиторій на GitHub і чекаємо успішного виконання деплою.

1. Налаштовуємо gh-pages і чекаємо поки зʼявиться посилання на живу сторінку. Settings -> Pages -> Branch -> gh-pages

На цьому можемо зупинитися. Але немає межі досконалості. Тому кожен може налаштувати під себе свою конфігурацію проекту React.

Покликання:

Легкий старт Create React App

Проект create-react-app на GitHub

Деплой React-застосунку

Deploying a React App* to GitHub Pages

GitHub Actions

Розширення GitHub Actions для VSCode

NPM React Testing Library