Substitute for create-react-app “homepage” setting in a non create-react-app application

Question

In a create-react-app application, setting my homepage in package.json gives me what I expect. I set it to: homepage: '/someUrl' and in my app, if my URL is localhost:3000/someUrl/another, and I refresh, it goes there without issue.

In my non create-react-app application (it's still a react project, just started from scratch), if I navigate to localhost:3000/someUrl/another by normal means I get the page, but then if I hit refresh I get a white page with: Cannot GET /someUrl/another

Has anyone come across this? I'm trying to figure out what setting "homepage" in create-react-app does exactly so that I can duplicate this in my non CRA react app.

Thank you for any help, Chris

cuongdevjs cuongdevjs · Accepted Answer · 2020-06-18T14:06:39

Let's try to use History HTML5 to config homepage & use publicPath configuration of webpack to config path of assets. Example:

import { createBrowserHistory } from "history";
export default createBrowserHistory({
  basename: YOUR_HOME_PAGE,
  hashType: "slash"
});

and inside webpack configuration: (in case of config path assets to prevent 404 on production)

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath("js/[name].[chunkhash].js"),
    chunkFilename: utils.assetsPath("js/[id].[chunkhash].js"),
    publicPath: YOUR_HOME_PAGE
}

Hope this help for you!

Substitute for create-react-app “homepage” setting in a non create-react-app application

1 Answers