Как развернуть приложение React на GitHub Pages - PullRequest
Новая
       1

Как развернуть приложение React на GitHub Pages

0 голосов
/ 29 января 2020

У меня проблемы с развертыванием приложения React на GitHub Pages. Приложение отлично работает локально, но после прохождения стандартного процесса развертывания - установки страниц GH через терминал, запуска npm run build/deploy et c - страница не загружается.

Развертывание прошло успешно с точки зрения это создает среду в моем репозитории GitHub и дает мне возможность «просмотреть развертывание», но тогда страница просто не загружается. Если я проверю страницу, она выдаст мне следующую ошибку: 

Failed to load resource: the server responded with a status of 404 () bundle.js:1

Мой пакет. json выглядит так - 

{
  "homepage": "https://andre-urbani.github.io/GA-Project-2-Quiz-API",
  "name": "basic-react-webpack-setup",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "webpack-dev-server --mode=development",
    "build": "webpack -p",
    "predeploy": "npm run-script build",
    "deploy": "npm build && gh-pages -d dist"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.0",
    "gh-pages": "^2.2.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "bulma": "^0.7.5",
    "file-loader": "^5.0.2",
    "lodash": "^4.17.15",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^3.3.0",
    "url-loader": "^3.0.0"
  }
}

и мой webpack.config. js выглядит как это - 

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve('dist'),
    publicPath: '/'
  },
  module: {
    rules: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.css$/, loader: ['style-loader', 'css-loader'] },
      { test: /\.s(a|c)ss$/, loader: ['style-loader', 'css-loader', 'sass-loader'] }
    ]
  },
  devServer: {
    contentBase: path.resolve('src'),
    hot: true,
    open: true,
    port: 8000,
    watchContentBase: true,
    historyApiFallback: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      inject: 'body'
    })
  ]
}

1 Ответ

0 голосов
/ 31 января 2020

Установка homepage в package.json на "." должна решить вашу проблему.

Вам не хватает / в конце пути к домашней странице, но значение . будет быть более гибким в целом.

...