How to deploy a React app to GitHub Pages

Question

I'm having issues with deploying my React app to GitHub Pages. The app works fine locally, but after going through the standard process for deployment - installing GH pages via the terminal, running npm run build/deploy etc - the page does not load.

The deployment was successful in terms of it creating an environment in my GitHub repo, and it gives me the option to 'view deployment', but then the page just doesn't load. If I inspect the page it gives me the following error:

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

My package.json looks like this -

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

and my webpack.config.js looks like this -

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'
    })
  ]
}

Answer 1

Setting homepage in package.json to "." should resolve your issue.

You're missing the / at the end of your homepage path, but a value of . will be more flexible overall.