New to backstage and attempting setup. I am expos...
# general
m
New to backstage and attempting setup. I am exposing at a sub-path which appears to be supported - https://github.com/backstage/backstage/pull/6749 However with my app-config.local.yaml set as follows:
Copy code
app:
      # Should be the same as backend.baseUrl when using the `app-backend` plugin.
      baseUrl: <https://services.internal/backstage>

    backend:
      # Note that the baseUrl should be the URL that the browser and other clients
      # should use when communicating with the backend, i.e. it needs to be
      # reachable not just from within the backend host, but from all of your
      # callers. When its value is "<http://localhost:7007>", it's strictly private
      # and can't be reached by others.
      baseUrl: <https://services.internal/backstage>
If I navigate to the main URL I just get a blank page. If I looked at the returned HTML
Copy code
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Backstage is an open platform for building developer portals"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json" crossorigin="use-credentials"/><link rel="icon" href="/favicon.ico"/><link rel="shortcut icon" href="/favicon.ico"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"/><title>Scaffolded Backstage App</title><script defer="defer" src="/static/runtime.ca7de487.js"></script><script defer="defer" src="/static/module-material-ui.d6133835.js"></script><script defer="defer" src="/static/module-lodash.2cb4e330.js"></script><script defer="defer" src="/static/module-date-fns.09dcdd7d.js"></script><script defer="defer" src="/static/module-backstage.958f85a5.js"></script><script defer="defer" src="/static/module-yaml.bcdcfe65.js"></script><script defer="defer" src="/static/module-material-table.a69dfac1.js"></script><script defer="defer" src="/static/module-luxon.709b2632.js"></script><script defer="defer" src="/static/module-octokit.37e435bf.js"></script><script defer="defer" src="/static/module-zod.c5bfa0d3.js"></script><script defer="defer" src="/static/module-react-dom.fcbc6a60.js"></script><script defer="defer" src="/static/module-react-beautiful-dnd.1bd1bde2.js"></script><script defer="defer" src="/static/module-remix-run.df093bf6.js"></script><script defer="defer" src="/static/vendor.ca7de487.js"></script><script defer="defer" src="/static/main.ca7de487.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
You can see that none of the URL are correctly rendered with the sub-path.
a
I don't understand your goal. The base url is used by the backend or frontend process or pods only to hit the backends. You should be hitting the nearest one. It looks like you're making it the external facing url. That means each time a frontend or backend process wants to hit the backend it has to go out to the load balancer again. Why?
m
@Asaf Erlich I am a newbie to backstage so I might not be understanding the setting. I read
Note that the baseUrl should be the URL that the browser and
and assumed that means the the URL I put into my browser to access the backstage UI. Right now I am just trying to get basic setup done and expose the UI (deployed in Kubernetes) through an ingress and the URL at which that is configured (in the ingress controller) is https://services.internal/backstage. How would I configure that URL so that backstage correctly serves paths?
a
Yeah I read that comment but it does not match my understanding of that configuration value at all.
I don't know why any browser or client would care what's in your app config. The app config is included in the backstage container and read by the app (both backend and frontend processes) on startup.
I would suggest for now to leave the backend base url to whatever is the default and only modify it if necessary.
Hmm, I take it back
I'm sorry looking in my configuration we do point this at the same one as the external facing URL
I guess I'm wrong
m
No worries. It is a bit confusing
a
our local configuration is not this way so I was confused
we have one for local, one for stage, one for prod
so I mixed things up
m
I can see what you are saying about backend url
Like why would I force that to go external back through LB
a
I must be mixing up details
m
but app.baseUrl is the URL at which clients interact with the front end (UI). And the GitHub link above seems to suggest that you should be able to add a sub-path.
But that doesn’t seem to be working for me. In your config do you have a sub-path?
a
we don't add a sub-path
m
Ok.
a
but I don't see why it would matter ...
unless it's parsing it in some way...
m
One last quick question if you don’t mind. By default Backstage reads app-config.yaml and app-config.local.yaml. But I see some indication that you can specify APP_ENV and have it read app-config.$APP_ENV.yaml (ex: app-config.production.yaml). Do you use that functionality or are you putting all your settings in app-config.yaml?
I think the sub-path matters because the initial page returned contains links to Javascript, images and such and if they don’t set the sub-path correctly then you get 404 (which I get).
a
sorry I didn't look at this message until now
We prefer keeping everything in app-config files and only rely on the env variable overrides in rare cases. We found it's easier to manage the files in git. We have the following app config files:
Copy code
fd "app-config.*"
app-config.local.yaml
app-config.yaml
config/app-config.local.yaml
config/app-config.production.yaml
config/app-config.stage.yaml
The first is actually a symlink to the one inside the config folder. In the startup command for the container we actually pass in the flags
--config app-config.yaml --config config/app-config.<env>.yaml
and we have different ones for stage and prod.
If that makes sense.