Creating your Backstage Application

As mentioned before, it is highly recommended to build your own Backstage image, tailored to your needs. In this section, we will create a new Backstage project using the Backstage CLI.

Please pull the backstage repository you prepared in the prerequisites section and ensure that you have a running NodeJS environment (as described in the prerequisites section). Then, navigate into the repository and run the following command to create a new Backstage application:

npx @backstage/create-app

During the setup, you will be asked for the name of your application, you can choose any name you like, for this lab we will use backstage. The CLI will create a new Backstage application in the current directory.

After the setup is complete, you should find a new directory called backstage in your repository. This contains your Backstage application and everything you need to run it. In the next step, let’s run the application locally to ensure that everything is working as expected. Navigate into the backstage directory and run the following command:

cd backstage
yarn install
yarn start

Now you should be able to access your Backstage application at http://localhost:3000. If everything is working as expected, you should see the Backstage welcome page and can log in as a guest user. There, you should also see the Catalog, which contains one example component at the beginning. Do you wonder where this component comes from?

You can find the main configuration of your Backstage application in the app-config.yaml file in the root of your Backstage project. There, you can find a section called catalog, which defines the locations of the resources to be added to the Catalog. Initially, there are some example locations added, which point to some local files in your repository. Let’s keep them for now; we will add our own locations later in this lab. You might also notice that there are additional configuration files in the config directory, which are used to override the main configuration for different environments (e.g., development, production). Basically, you will configure global settings in the app-config.yaml file and override them in the environment-specific files as needed.

As our Backstage application is running locally now, let’s move on to the next step and integrate GitHub as a Source Code Management System and start to fill our Catalog with real resources.