Standing Up Backstage

40 MINS

Setting the application name

Let's make Backstage a bit more personalized. In this step, you'll be updating the application and company name shown in the Backstage UI.

The default Backstage Catalog screen will look like this:

Screenshot of the Backstage Catalog, the name in the header is: My Company Catalog

In the root directory of the Backstage app, open app-config.yaml and update the values of title and name:

<span class="line"><span style="color:#85E89D">app</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#85E89D">  title</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">Rockit Engine</span></span>
<span class="line"><span style="color:#85E89D">organization</span><span style="color:#E1E4E8">:</span></span>
<span class="line"><span style="color:#85E89D">  name</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">Rockit Rockets</span></span>
<span class="line"></span>

The default .gitignore file created with the app excludes *.local.yaml from source control for you, so you can add passwords or tokens directly into the app-config.local.yaml.

Restart Backstage from the terminal, by stopping it with Control-C, and starting it with yarn dev to see the changes. The default Backstage Catalog screen will look like this:

Screenshot of the Backstage Catalog, with another name in the header: Rockit Rockets Catalog

Optional: change the logo

The Backstage logo can be changed too, take a look in packages/app/src/components/Root where you’ll find LogoFull and LogoIcon. You can replace these to change the logo.