How to get gh-pages to find bundle.js

Question

I'm trying to deploy a webpack React application to my gh-pages.

Here are the scripts I'm using to build and deploy.

  "scripts": {
    "start": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch": "webpack-dev-server --progress",
    "deploy": "gh-pages -d dist"
  },

After running:

npm run build
npm run deploy

My /dist/ folder is deployed to the gh-pages branch. https://github.com/Damhan/Serify/tree/gh-pages

When navigating to https://damhan.github.io/Serify/ the page is blank.

The console reveals the following error:

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

Here is my webpack config:

const path = require("path");

module.exports = {
    entry: path.resolve(__dirname, "./src/index.js"),
    output: {
      filename:"bundle.js",
      path: path.resolve(__dirname, '/dist')
    },
    module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
            }
          },
          {
            test: /\.s[ac]ss$/i,
            use: [
              // Creates `style` nodes from JS strings
              'style-loader',
              // Translates CSS into CommonJS
              'css-loader',
              // Compiles Sass to CSS
              'sass-loader',
            ],
          },
          {
            test: /\.css$/,
            loaders: ["style-loader", "css-loader"]
          }
        ]
    },
    devServer: {
      contentBase: path.join(__dirname, "/dist"),
      historyApiFallback:true

    }


};

Answer 1

I believe when you run build and deploy, it thinks your homepage is on /. But in fact, your homepage is https://damhan.github.io/Serify/.

In package.json, add this:

{
  "name": "serify",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://damhan.github.io/Serify/",
  ...
}

Also I took a look at your index.html in public folder, you manually added <script src=".bundle.js"></script>. In this case, I would add <script src="/Serify/bundle.js"></script> instead.