Search code examples
node.jsbabeljsgithub-pages

How to debug a 404 publishing node site to Github pages?


I'm deploying a compiled node site based off React Slingshot boilerplate to Github Pages. Running locally is fine via npm start.

But when I compile the files using babel and commit to my github pages repository. The site gives back a 404 for the main.c5ec540e041525c6d312.js file although I can see it is in the git repository. (companyname committed from link so these won't work below)

The link created from Github is:

https://pages.github.mycompanyname.com/DDM/index.html

And the 404 I get is:

https://pages.github.mycompanyname.com/main.c5ec540e041525c6d312.js/

I did try deleting and re-adding the repo as suggested here to no avail:

How to fix page 404 on Github Page?

Question: How can debug a 404 publishing node site to Github pages?

This is the contents of the dist folder after babel compilation. Which I've then pushed to the Github Pages repo which builds the website automatically from the master branch. But gives a 404 on the main.js file:

enter image description here

I did try changing also the browserHistory to hashHistory in Index.js prior to compilation. As issues on github pages state that browserHistory uses absolute links whereas the latter does not:

import React from 'react';
import ReactDom from 'react-dom';
import Routes from './routes';
import {Router, hashHistory} from 'react-router';
import './styles/styles.scss';


import appStore from './reducers';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

let store = createStore(appStore);

require('./images/favicon.ico');
let element = document.getElementById('app');

ReactDom.render(
  <Provider store={store}>
        <Router history={hashHistory} routes={Routes.routes} />
    </Provider>, element);

document.body.classList.remove('loading');

And this is a link to the compiled index.js file:

http://hastebin.com/sipimizazu.xml

Also looking at the webpack pro config for compilation. I see that the public path is set to the following:

export default {
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  debug: true,
  devtool: 'source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
  noInfo: true, // set to false to see a list of every file being bundled.
  entry: path.resolve(__dirname, 'src/index'),
  target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name].[chunkhash].js'
  },

Solution

  • Changing the publicPath in webpack config fixed the 404 error. As my github pages page was located at .../DDM/

    I updated the config to the following:

    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/DDM/',
        filename: '[name].[chunkhash].js'
      },