Развертывание приложения React из Codesandbox на страницах Github - PullRequest
Новая
       31

Развертывание приложения React из Codesandbox на страницах Github

1 голос
/ 27 октября 2019

Я следовал этому учебнику по YouTube , чтобы развернуть свое приложение реагирования на страницах github. Я сделал свое реактивное приложение в codesandbox и экспортировал свою песочницу в мой github . Я скачал node.js, npm и git.

Структура моей папки: Пользователи> test> package-lock.json + andair-master> (внутри andair-master) node_modules + build> (внутри сборки) public+ src + package.json

Я скачал свой проект на github "andair-master", скопировал и вставил его содержимое в пустую папку "test".

Я открыл Git Bash и менял каталоги, пока не попал в «andair-master». Я сделал «git init», затем «git remote add origin https://github.com/develijahlee/andair.git"», затем попытался «npm run deploy». Я понял, что мне не хватает папки «build», поэтому я создал ее в папке «andair-master». Затем я поместил свои папки «src» и «public» в папку «build» и попытался запустить «npm run deploy». Все еще не работает. Я заметил, что на моем github отсутствует ветка gh-pages. Я не уверен, как это сделатьсделайте ветку gh-pages или почему «npm run deploy» не работает. Если кто-нибудь может сказать мне, если я пропускаю шаг, это было бы очень признательно. Спасибо.

Ответы [ 2 ]

1 голос
/ 27 октября 2019

В вашем проекте create-react-app есть несколько отсутствующих зависимостей. Вероятно, это произошло потому, что вы пытались экспортировать проект из codeandbox (хотя я не уверен)

Сначала вы должны исправить это.

Зависимость 1 (react-scripts): 

npm install react-scripts --save-dev

Зависимость 2 (node-sass, поскольку вы используете scss в своем проекте) 

npm install node-sass --save

Зависимость 3 (gh-pages) 

npm install gh-pages --save-dev

После того, как вышеупомянутые шаги выполнены, проверьте ваш package.json для соответствия структуре ниже 

{
  "name": "and-air",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "src/index.js",
  "homepage": "https://develijahlee.github.io/andair/",
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "1.2.25",
    "@fortawesome/free-regular-svg-icons": "5.11.2",
    "@fortawesome/react-fontawesome": "0.1.5",
    "node-sass": "^4.13.0",
    "react": "16.9.0",
    "react-dom": "16.8.6"
  },
  "devDependencies": {
    "gh-pages": "^2.1.1",
    "react-scripts": "^3.2.0",
    "typescript": "3.3.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Теперь вы можете запустить deploy script 

npm run deploy

После этого шага убедитесь, что создана новая ветка с именем gh-pages

enter image description here

Нажмитена вкладке settings в github

enter image description here

Прокрутите вниз до раздела GitHub Pages и переключите свою веткуна gh-pages ответвление.

enter image description here

Вы должны получить сообщение об успехе, когда страница активна.

enter image description here

0 голосов
/ 27 октября 2019

Вот что использует скрипт развертывания в вашем коде: 

"deploy": "gh-pages -d build"

Это означает, что инструмент gh-pages использует каталог сборки для его развертывания, поэтому для его работы необходимы две вещи

  • Правильно создайте папку сборки с помощью следующей команды: 
npm run build
  • Теперь установите инструмент gh-pages для локального добавления: 
npm i gh-pages

Теперь вы можете запустить команду deploy, и она будет работать. Я надеюсь, что это может быть полезно для вас.

...