Error: Missing required config value at 'app.baseUrl' after fresh npx @backstage/create-app and plugin-create

Hello!

Followed docs to create fresh instance of backstage and to create fresh plugin. According to docs, I can start plugin in isolation.

Expected Behavior

Plugin start in Isolation and I can enjoy hot reload and fast iteration time

Current Behavior

Error: Missing required config value at ‘app.baseUrl’ after yarn start

Possible Solution

I tried placing app-config.yaml in plugin directory, tried using env var APP_CONFIG_app_baseUrl - still getting this error. May be it is suggested behavior, cause I managed to run it in backstage/backstage cloned repo. If so, It would be nice to have a note in docs about it.

Steps to Reproduce

npx @backstage/create-app
yarn create-plugin
cd plugins/...
yarn start

Context

Backstage is pretty complex environment for a newcomer, I enjoy exploring it in my way, and my way is start to build something fast. So hot reloading is pretty crucial. I could use main repo, but it’s too heavy and hardware intensive :<

Your Environment

• NodeJS Version (v12):LTS 14
• Operating System and Version (e.g. Ubuntu 14.04):Ubuntu 20.04 LTS
• Browser Information: Chrome

[OrkoHunter]

Thanks for reporting @dimkk - I was able to reproduce the error. I believe one should be able to start a standalone plugin even on a newly created Backstage app.

TL;DR of problem

I did some debugging to find out why this is happening. The app-config.yaml file is loaded correctly, but Backstage apps need a config.d.ts to set the visibility of its configs like app.baseUrl to frontend. Read more about visibility of configs here. By default, no configs are visible to the frontend level. This is already being done in the backstage/backstage mono-repo, which is why you didn’t encounter this problem.

Quick fix

@dimkk Quick fix to unblock yourself is to add a config.d.ts file in plugins/<newly-created-plugin>.

export interface Config {
  app: {
    /**
     * Frontend root URL
     * @visibility frontend
     */
    baseUrl: string;

    /**
     * The title of the app, as shown in the Backstage web interface.
     * @visibility frontend
     */
    title?: string;
  };
}

This increases the visibility of app.baseUrl to the frontend. And then update the relevant package.json of the plugin to load the config file. Also set the file as configSchema. You can read more here. This should solve the issue! (It did for me!)

Details

The backstage-cli plugin:serve command loads all the app config files and tries to serve the bundle for the plugin. If we inspect the loaded config at this point, it looks like this

Loaded config from app-config.yaml
{
  schema: { process: [Function: process], serialize: [Function: serialize] },
  appConfigs: [ { data: [Object], context: 'app-config.yaml' } ],
  frontendConfig: ConfigReader {
    data: {},
    context: 'app-config.yaml',
    fallback: undefined,
    prefix: ''
  },
  frontendAppConfigs: [ { context: 'app-config.yaml', data: {} } ]
}

Note that the frontendConfig.data is empty since there is no config schema file like config.d.ts so far in the new Backstage app, hence all the configs are by default set to be visible to backend only.

Later on, the serve bundle logic is unable to get the URL where to serve the bundle at. https://github.com/backstage/backstage/blob/81a6c95b0ab08df35da72b3e518630cdcabafdcc/packages/cli/src/lib/bundler/config.ts#L95

Proposed fix

The skeleton used by npx @backstage/create-app should have a simple config.d.ts file in packages/app which sets the visibility of app.baseUrl to frontend.

BUT, I noticed that our config-loader package DOES NOT look for config.d.ts files inside packages/app and packages/backend. This makes it harder to achieve the above. I think this is probably not intentional, and should be fixed. But @Rugvip would know more!

cc @backstage/reviewers

[dimkk]

Actually worked! Thanks!