Welcome to the Backstage 101 workshop! This workshop is designed to help you get started with Backstage, the open-source platform for building developer portals.

In this workshop, you will learn how to:

• Set up a Backstage app

Before you start, you will need to have the following installed:

The following tools are required to complete this workshop:

I have included the steps to install these tools on macOS. If you are using a different operating system, you can find the installation instructions on the respective websites. The full list of prerequisites can be found here.

• Build Tools

xcode-select --install

• NVM)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

• Node.js

nvm install lts/iron

• Yarn

npm install --global yarn
yarn -v

Ensure you are using Yarn version 4.4.1 or later.

npx @backstage/create-app@latest

At the time of writing this workshop, the latest version of the @backstage/create-app is 0.24.0. If you want to use the exact same version this can be done by running npx @backstage/create-app@0.24.0

cd my-backstage-app

Replace my-backstage-app with the name of your app if you used a different name.

yarn dev

This will start the Backstage app on http://localhost:3000 and the backend at http://localhost:7007.

Navigate to http://localhost:3000 in your browser to see the Backstage app running.

You have successfully set up a Backstage app. You can now move on to the next section to learn how to configure Backstage. Before you move on, make sure to familiarize yourself with the folder structure of the Backstage app you just created.

The Backstage app you just created has the following folder structure:

my-backstage-app/
│   ├── packages/
│   │   ├── app/
│   │   ├── backend/
│   ├── examples/
│   ├── plugins/
├── app-config.yaml/
├── app-config.local.yaml
├── app-config.production.yaml
├── package.json
├── catalog-info.yaml

Backstage is built on mono-repo architecture, which means that the app is divided into multiple packages, each containing a different part of the app. The app package contains the frontend code, the backend package contains the backend code, and the plugins package contains the plugins that extend the functionality of the app.

Now that you have set up a Backstage app, you can move on to the next section to learn how to configure Backstage.

• Configuring Backstage

• Backstage Documentation
• Backstage GitHub repository
• Backstage Discord channel