React приложение показывает пустую страницу после развертывания на Git Pages

Содержание

Вопрос или проблема
Ответ или решение
1. Ошибка командной строки при развертывании
Решение:
2. Запуск команды развертывания
3. Убедитесь, что ваш homepage задан корректно
4. Проверьте настройки репозитория на GitHub
5. Потенциальные проблемы с маршрутизацией
Заключение

Вопрос или проблема

Я создал проект на React и вижу пустую страницу после развертывания на GitHub Pages. Я пробовал несколько методов, но ничего не работает.

Вот файл package.json:

{
  "homepage": "https://farabi-momin.github.io/react_test ",
  "name": "react",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-player": "^2.16.0",
    "react-router-dom": "^6.28.0",
    "react-router-hash-link": "^2.4.3",
    "react-slick": "^0.30.2",
    "slick-carousel": "^1.8.1",
    "validator": "^13.12.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.13.0",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react": "^4.3.3",
    "eslint": "^9.13.0",
    "eslint-plugin-react": "^7.37.2",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.14",
    "gh-pages": "^6.2.0",
    "globals": "^15.11.0",
    "vite": "^5.4.10"
  }
}

Если я пытаюсь выполнить развертывание с помощью npm run deploy, в командной строке появляется следующая ошибка.

Вот моя репозиторий на GitHub
также нет опции gh-pages в настройках страницы git после успешного развертывания

Ошибка: ENOENT: нет такого файла или директории, stat 'E:\\reactProject\\Assignment1\\build'
at Object.statSync (node:fs:1658:25)
at Object.statSync (E:\\reactProject\\Assignment1\\node_modules\\graceful-fs\\polyfills.js:319:16)
at Object.publish (E:\\reactProject\\Assignment1\\node_modules\\gh-pages\\lib\\index.js:90:13)
at E:\\reactProject\\Assignment1\\node_modules\\gh-pages\\bin\\gh-pages.js:12:13
at new Promise (\<anonymous\>)
at publish (E:\\reactProject\\Assignment1\\node_modules\\gh-pages\\bin\\gh-pages.js:10:10)
at E:\\reactProject\\Assignment1\\node_modules\\gh-pages\\bin\\gh-pages.js:140:12

Согласно вашему package.json, вам нужно запустить npm run predeploy перед npm run deploy.
По умолчанию, выходной каталог Vite – это dist, а не build. Измените package.json:
```
-    "deploy": "gh-pages -d build",
+    "deploy": "gh-pages -d dist",
```

Ответ или решение

Когда ваше React-приложение показывает пустую страницу после развертывания на GitHub Pages, это может быть связано с несколькими проблемами. Давайте рассмотрим возможные причины и решения на основе приведенного вами описания.

1. Ошибка командной строки при развертывании

Из вашего вывода видно, что вы получаете ошибку ENOENT: no such file or directory, stat 'E:\\reactProject\\Assignment1\\build', что указывает на отсутствие директории, которую вы пытаетесь развернуть. По умолчанию Vite создает вашу сборку в каталоге dist, а не build.

Решение:

Вам нужно внести изменения в ваш package.json, чтобы указать правильный путь:

"deploy": "gh-pages -d dist",

Замените строку "deploy": "gh-pages -d build" на указанную выше. Это позволит gh-pages знать, что нужно использовать папку dist для развертывания.

2. Запуск команды развертывания

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

npm run build

Затем разверните приложение:

npm run deploy

3. Убедитесь, что ваш `homepage` задан корректно

Ваш homepage в package.json уже указан, но убедитесь, что он не содержит лишних пробелов:

"homepage": "https://farabi-momin.github.io/react_test"

Удалите лишний пробел в конце строки.

4. Проверьте настройки репозитория на GitHub

После успешного развертывания на GitHub Pages вам необходимо убедиться, что в разделе настроек вашего репозитория выбран правильный источник для GitHub Pages. Вам следует установить источник на gh-pages (если он создается), чтобы GitHub мог его использовать.

5. Потенциальные проблемы с маршрутизацией

Если ваше приложение использует react-router, убедитесь, что настроили маршрутизацию, чтобы корректно обрабатывать пути. Для этого может потребоваться использование BrowserRouter с указанием атрибута basename:

import { BrowserRouter as Router } from 'react-router-dom';

<Router basename="/react_test">
  {/* остальные компоненты */}
</Router>

Заключение

Чтобы устранить проблему с пустой страницей при развертывании вашего React-приложения на GitHub Pages, убедитесь, что вы работаете с правильной папкой dist, корректно настроили область homepage, а также внимательно относитесь к маршрутизации, если используете роутинг. После выполнения всех вышеуказанных рекомендаций все должно заработать, и ваше приложение должно корректно отображаться. Если же проблемы сохраняются, проверьте консоль браузера на наличие дополнительных ошибок.