basename and homepage not working as expected to serve /static/ files in development basename and homepage not working as expected to serve /static/ files in development kubernetes kubernetes

basename and homepage not working as expected to serve /static/ files in development


Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in package.json (homepage). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the URL you provide (hostname included). This may be particularly useful when using a CDN to host your application.

There are three ways to fix this problem:

  1. Add your basename to the webpack output -> publicPath(If you rejected your create-react-app project and you have already access to the webpack config file)
  2. Add PUBLIC_URL="/client" into .env.production file
  3. Add homepage property into package.json file like this:
{  ...  homepage: "/client"  ...}

Reference:

https://create-react-app.dev/docs/advanced-configuration/


Currently, to have a different homepage in production env, with CRA (or craco), you need to set

# .env.productionPUBLIC_URL="/client" 

inside the file .env.production (or .env.development if root path different in dev) and than you change the basename of the Router:

<BrowserRouter basename={process.env.PUBLIC_URL}>  ...</BrowserRouter>