Adding a relative path to the baseUrl shows empty screen

Expected Behavior

I want the backstage application to be loaded at http://www.mywebsite.com/backstage. When adding a relative path to the baseUrl in app-config.yaml to ‘http://localhost:3000/backstage’, it should load the backstage home catalog screen with the relative path.

Current Behavior

Shows an empty screen redirecting to http://localhost:3000/catalog

Steps to Reproduce

1. Update baseurl in app-config.yaml to baseUrl: http://localhost:3000/backstage
2. Start the app

Context

I want the backstage application to be loaded at http://www.mywebsite.com/backstage.

• I tried updating the baseurl to ‘http://localhost:3000/backstage’. It shows an empty screen. Added <Navigate key="/" to="/lowesbs/catalog" /> in app.tsx, loads the app but fails on refresh, Cannot GET /backstage/catalog

Also when pushed to a dev env with the relative path, it shows this below error

Refused to apply style from ‘http://localhost:7000/backstage/static/asyncapi.2.a6b20294.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled. Refused to apply style from ‘http://localhost:7000/backstage/static/swagger-ui-react.33.8237198d.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled. Refused to execute script from ‘<URL>’ because its MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled.

• Tried to keep the baseurl as it is and update the routes to add a relative path, <Routes basename='/backstage'>. Works good. No refresh issue, but pushing it to a dev env, its not able to get the assets, get 503 error for all assets. Added “homepage” in package.json to load the assets but fails.

Your Environment

• NodeJS Version (v12): 12.14.1
• Operating System and Version : Mac OS
• Browser Information: Chrome

[Rugvip]

We looked at this a while back and react-router didn’t have a great solution for us. Tricky bit without support from react-router is that all the links in the app will be wrong, e.g. the hardcoded /catalog. Composability work should allow us to set a global base path though, so once we’ve migrated the rest of the apps we should be able to fix this.

[Hanyman8]

Same usecase here.