Search code examples
reactjswebpackgithub-pageshtml-webpack-plugin

gh-pages not loading bundle.js from index.html

I have set up a React project with webpack.I want to upload this project on my user site on Github. I created the user site repository with 2 branches- master and gh-pages. The project structure is as follows:

 dist
    index.html
    bundle.js
 index.html

The Package.json file has the following commands for build and deployment.

 "start": "webpack-dev-server --open --mode development --content-base ./dist",
 "test": "npm run lint && npm run security-check && npm run bundle",
 "predeploy": "npm run build",
 "deploy": "gh-pages -d dist"

In dev mode, the project is working fine.The HtmlWebPackPlugin is inserting the bundle js script tag in the dist/index.html. For deploying to gh-pages, when I run the deploy command, the code is updated correctly in the branch gh-pages. I can see the latest dist folder files in there.

But the user site is giving me 404: not found error for bundle.js.

Solution

  • So after some research on gh-pages,I found the solution. For user pages,Github only allows publishing from master branch.So the index.html and bundle.js should be present in the master branch,and they will be served as static resources.

    This is a little confusing as in other apps,you can choose to build from master or gh-pages branch,or from the /docs directory.

    So I created a development branch,where my source stays. And I modified the deploy command to upload code from the development branch to master.

    "deploy": "gh-pages -d dist -b master"