Don't assume the project is hosted at the root

[gaearon]

We currently have an assumption in publicPath in webpack.config.prod.js that the bundle is served from the root, but it may not be (e.g. with GH Pages, it’ll be at you.github.io/projectname/).

I don’t want to add configuration for this but it would be great if we could parse homepage from package.json and use it to determine the publicPath. We can then document it or add a prompt (or a notice) as part of the creation flow.

[gaearon]

Feel free to jump in to help!

[sotojuan]

I got this, will do a PR soon-ish. Can we just require the package.json in the Webpack config and get the homepage from there? What would be a working default if not set? Just need a bit more info!

[gaearon]

Can we just require the package.json in the Webpack config and get the homepage from there?

Yes, I think so.

What would be a working default if not set?

If not set, assume we want to serve from /. Otherwise extract path from the URL.

[selfup]

@sotojuan Would be great to set homepage path!

Thanks for taking the initiative

[selfup]

The hard part with gh-pages is that we would need the new index.html to be at root, and then reference the files in the build dir.

I made a script that deletes everything but src, node-modules, and build. And copies the files in build so that they are at root for gh-pages. Let me know if that could help a bit or if the webpack route is the better way and then just figuring out how to update the index.html for gh-pages

[gaearon]

I’m a bit confused about what you mean. npm run build should produce index.html in build that references local files. The only thing we need to fix is the publicPath setting so it contains paths relative to the actual website.

[selfup]

gh-pages looks at the root index.html

Does it look inside of build as well?

[selfup]

Inside of: ./node_modules/react-scripts/config/webpack.config.prod.js

  output: {
    path: buildPath,
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].chunk.js',
    // TODO: this wouldn't work for e.g. GH Pages.
    // Good news: we can infer it from package.json :-)
    publicPath: './'
  },

When I changed the public path to "./" everything works!

Running hs for http-server still works as well.

Now how could we avoid the react-router issues you were concerned about?

[gaearon]

We can’t avoid it with ./. It won’t work correctly.
We’ll need to think more about this.

[selfup]

Ok thanks for continuing the discussion. I'll mess around with adding routes and seeing what works or not.

[gaearon]

You can use my "todos" repo as good testbed. (Make sure to switch to branch with the biggest number.) Then play with opening /active or /completed and refreshing.

[meghprkh]

Another thing is passing publicPath to dev server doesnot work well with history api fallback. See webpack/webpack-dev-server#518 and webpack/webpack-dev-server#216

[meghprkh]

If this is done using any kind of config, it must be in such a way IMO that the publicPath should be accessible from the main code.