How to easily start Backstage
Tags: backstage, devops, platform, sre
Published: 2024-06-13 13:06:36

Hi, I'm Tak.
Today's topic is Backstage.

I'm interested Platform engineering, DevOps, Cloud Native.
So I selected it.

## What is  “Backstage” ?
Backstage is an open source IDP (Internal Developer Portal) developed by Spotify to improve developer productivity. 

## Point
1. To build Backstage
2. To make GitHub repository from Backstage
3. To add software template

## Condition
* node v20.11.1
* yarn v1.22.22

## 1. To build Backstage
Type this command in terminal.

```
npx @backstage/create-app@latest
```

Type input app name, for example "test-backstage"
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7tkbsv9i3hgbwgnn3f3.png)

Type this command

```
cd test-backstage && yarn dev
```
Go to `localhost:3000`

Take a look this display.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ajlwdo8zkn5enanmhui1.png)

## 2. To make GitHub repository from Backstage
First, Set GitHub access token in `app-config.local.yaml`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/722pnt5oaj6zruwtpnem.png)

You make it, Go to [https://github.com/settings/tokens/new](https://github.com/settings/tokens/new), 
So make access token.

And add this code in `/package/backend/src/index.ts`
```
backend.add(import('@backstage/plugin-scaffolder-backend-module-github'));
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwju93u0bk3k8jsfo07t.png)

in some cases, type this command in terminal.
```
export NODE_OPTIONS=--no-node-snapshot
```

Then, Click "Create..." in sidebar.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b77t1r1mk1824we8z8dt.png)

Next, Click "CHOOSE",

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjlvbsutn8khffnpgq1g.png)

Input Component name, then click "NEXT"


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kzgjwrcewzyov910whuv.png)

Input owner name and repository name, then click "REVIEW"

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iepag5b75q2n2vpipepw.png)

You check no problem, click "CREATE"

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aueprjlznndwaqn26rqj.png)

It's Created.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jspdxzvyzdme6li0ou5t.png)

Go to GitHub, check repository list.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9lkptb647dgpjh8i21k1.png)

It's source code in repository.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qumtn0qivyokad7qeqbo.png)

Where are files in Backstage codes?

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/so3au28rclwlpi36qxk5.png)

There are it in `/examples/template/content` directory.

## 3. To add software template
So add software template Laravel code.

For example, make `/laravel-example/template`directory.

```
cd /laravel-example/template
composer create-project laravel/laravel content --prefer-dist
```

Copy & Paste from `/examples/template/content/catalog-info.yaml` to `/laravel-example/template/content/catalog-info.yaml`,
And Copy & Paste template.yaml, entities.yaml, org.yaml.

```
.
├── entities.yaml
├── org.yaml
└── template
    ├── content
    │   ├── README.md
    │   ├── app
    │   ├── artisan
    │   ├── bootstrap
    │   ├── catalog-info.yaml
    │   ├── composer.json
    │   ├── composer.lock
    │   ├── config
    │   ├── database
    │   ├── package.json
    │   ├── phpunit.xml
    │   ├── public
    │   ├── resources
    │   ├── routes
    │   ├── storage
    │   └── tests
    └── template.yaml
```

Then, add this code in `app-config.yaml`

```
    - type: file
      target: ../../laravel-example/template/template.yaml
      rules:
        - allow: [Template]
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ww9bbdexpj208qn56ptu.png)

Kill yarn process, next `yarn dev`.
Take a look Create a new componet display.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogdhv9pb0eimglj4zhtw.png)

So you can create laravel code repository.

## Finish
Are you interested Backstage?
It's easily to build and use Backstage.
I'm learning it now, so I'd like to use it more.

Thanks to read it.
Have a good engineer life!!