3

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'
  },
Community
  • 1
  • 1
Brian Var
  • 6,029
  • 25
  • 114
  • 212

1 Answers1

0

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'
  },
Brian Var
  • 6,029
  • 25
  • 114
  • 212
  • 1
    Hey Brian, I'm having a similar issue with deploying my react-slingshot based project to GitHub Pages. Would you be able to provide a little more info about how you got it working? It looks like I have the same setup as you, but I still get 404 errors and incorrect paths. Do you have the example project that I could look to for reference? – Logan Oct 20 '17 at 05:41
  • Hi what is the name of your Github Pages organisation that you host the repository on? Also what is the value for publicPath in your webpack.env.config.js file? This public path is used by Github pages to find the index.js file, you may be getting 404 because path doesn't match the name of your Github organisation. – Brian Var Oct 21 '17 at 06:39
  • I'm trying to publish to https://lwilli.github.io/WeatherCompare/. There is no webpack.env.config.js file in the React Slingshot repo... I've been setting the output.publicPath value in webpack.config.prod.js to '/WeatherCompare/', but I can't get any routes to work--only the homepage works. – Logan Oct 21 '17 at 22:11