No Drama, Just Code: Setting up Backstage

Introduction Backstage is the open-source framework for building developer portals, this blog series aims to reduce the pain of getting started. In this post, we'll cover how to: What you need before you start Set up a Backstage app from scratch. Prerequisites Before diving in, ensure you have the following tools installed on your system. Below are macOS-specific instructions, but installation steps for other operating systems can be found on the respective websites. The full list of prerequisites is available here. Build Tools xcode-select --install NVM (Node Version Manager) 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. Setting Up Your Backstage App Follow these simple steps to scaffold and run a Backstage app: Scaffold a New Backstage App Run the following command to create a new Backstage app: npx @backstage/create-app@latest At the time of writing, the latest version of @backstage/create-app is 0.24.0. To use this exact version, you can run: Navigate to Your App Directory cd my-backstage-app Replace my-backstage-app with the name of your app if you used a different name during creation. Start the Backstage App yarn dev This command will start both the frontend and backend servers: Frontend: http://localhost:3000 Backend: http://localhost:7007 Open the App in Your Browser Navigate to http://localhost:3000 to see your Backstage app in action. Celebrate Your Success! Congratulations! You've successfully set up a Backstage app. Before moving on, take a moment to familiarize yourself with its folder structure. Understanding the Folder Structure The Backstage app you just created uses a monorepo architecture, organizing the codebase into packages for better scalability and maintainability. Here's a quick look at the structure: my-backstage-app/ ├── packages/ │ ├── app/ # Frontend code │ ├── backend/ # Backend code │ ├── plugins/ # Extendable plugins ├── examples/ # Sample templates ├── app-config.yaml # Main configuration file ├── app-config.local.yaml ├── app-config.production.yaml ├── package.json ├── catalog-info.yaml Key Highlights packages/: Contains the frontend (app) and backend (backend) code. plugins/: Stores plugins to extend Backstage's functionality. app-config.yaml: Central configuration for the Backstage app. Understanding this structure will help you customize and extend your app effectively. Next Steps Now that your Backstage app is up and running, it's time to explore its configuration options. Check out the next part of the series: Configuring Backstage (Coming Soon). Additional Resources Here are some helpful links to deepen your Backstage knowledge: Backstage 101 GitHub Repository Read on Linkedin

Jan 19, 2025 - 16:47

No Drama, Just Code: Setting up Backstage

Introduction

Backstage is the open-source framework for building developer portals, this blog series aims to reduce the pain of getting started.

In this post, we'll cover how to:

What you need before you start
Set up a Backstage app from scratch.

Prerequisites

Before diving in, ensure you have the following tools installed on your system. Below are macOS-specific instructions, but installation steps for other operating systems can be found on the respective websites.

The full list of prerequisites is available here.

Build Tools

xcode-select --install

NVM (Node Version Manager)

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.

Setting Up Your Backstage App

Follow these simple steps to scaffold and run a Backstage app:

Scaffold a New Backstage App

Run the following command to create a new Backstage app:

npx @backstage/create-app@latest

At the time of writing, the latest version of @backstage/create-app is 0.24.0. To use this exact version, you can run:

Navigate to Your App Directory

cd my-backstage-app

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

Start the Backstage App

yarn dev

This command will start both the frontend and backend servers:

Frontend: http://localhost:3000
Backend: http://localhost:7007

Open the App in Your Browser

Navigate to http://localhost:3000 to see your Backstage app in action.

Celebrate Your Success!

Congratulations! You've successfully set up a Backstage app. Before moving on, take a moment to familiarize yourself with its folder structure.

Understanding the Folder Structure

The Backstage app you just created uses a monorepo architecture, organizing the codebase into packages for better scalability and maintainability. Here's a quick look at the structure:

my-backstage-app/
├── packages/
│   ├── app/       # Frontend code
│   ├── backend/   # Backend code
│
├── plugins/        # Extendable plugins
├── examples/       # Sample templates
├── app-config.yaml # Main configuration file
├── app-config.local.yaml
├── app-config.production.yaml
├── package.json
├── catalog-info.yaml

Key Highlights

packages/: Contains the frontend (app) and backend (backend) code.
plugins/: Stores plugins to extend Backstage's functionality.
app-config.yaml: Central configuration for the Backstage app.

Understanding this structure will help you customize and extend your app effectively.

Next Steps

Now that your Backstage app is up and running, it's time to explore its configuration options. Check out the next part of the series: Configuring Backstage (Coming Soon).