diff --git a/Makefile b/Makefile index 125f74565e..8bc4ac2482 100644 --- a/Makefile +++ b/Makefile @@ -1,45 +1,6 @@ -### -# All-in-one commands -### -init: init-secrets -install: install-homebrew-dependencies install-yarn-dependencies install-forego -start: build-protocol-definitions - forego start ### # Setup secrets ### init-secrets: cp secrets.env.example secrets.env - -### -# Install any Homebrew dependencies specified in Brewfile -### -install-homebrew-dependencies: - brew bundle - -### -# Download dependencies from the Frontend using Yarn. -### -install-yarn-dependencies: - yarn --cwd ${PWD}/frontend install - -### -# Install Forego for running both frontend and backend in a single command. -### -install-forego: - go get -u github.com/ddollar/forego - -### -# Protobuf Definitions. -# This will generate Protobuf definitions from ./proto to both Go and JS/TypeScript. -### -build-protocol-definitions: - prototool generate ${PWD}/proto - -### -# Create new frontend plugin. -# This will run Cookiecutter to generate a new Backstage frontend plugin. -### -scaffold-new-frontend-plugin: - ${PWD}/tools/cookiecutter/init.sh frontend/packages/plugins/_template --output-dir frontend/packages/plugins diff --git a/README.md b/README.md index 363147a162..04b3d5621a 100644 --- a/README.md +++ b/README.md @@ -50,29 +50,28 @@ The final `yarn start` command should open a local instance of Backstage in your ### Creating a Plugin -Run the following: +To create a new plugin, go to the `frontend/` directory and run the following: ```bash -$ make scaffold-new-frontend-plugin +$ yarn && yarn create-plugin ``` -This will generate a plugin in the `frontend/packages/plugins` folder. It is important to note you will still need to include the plugin in your `frontend/packages/app` in the `package.json`. You will then be able to import it as follows: +This will prompt you to enter an ID for your plugin, and then create your plugin inside the `packages/plugins/` directory. Note that the plugin will not yet be included in the app, to include it add the following for a plugin called `my-plugin`: -```bash -$ make scaffold-new-frontend-plugin -plugin_name [example-plugin]: github-api +In `"dependencies"` inside [packages/app/package.json](frontend/packages/app/package.json) add the following: -$ vim frontend/packages/app/package.json -# Add the following line to your package.json -# Note all plugins are prefixed with "plugin-" by default with a version number of "0.0.0" -# "@backstage/plugin-github-api": "0.0.0", - -$ vim frontend/packages/app/src/App.tsx -# Add the following line to import your generated component -# import { ExampleComponent } from '@backstage/plugin-github-api'; -# +```json +"@spotify-backstage/plugin-my-plugin": "0.0.0" ``` +In [packages/app/src/plugins.ts](frontend/packages/app/src/plugins.ts), add the following: + +``` +export { default as MyPlugin } from '@spotify-backstage/plugin-my-plugin'; +``` + +You should now be able to see the default plugin page at [localhost:3000/my-plugin](http://localhost:3000/my-plugin) if you're serving the frontend. + ## Protobuf Definitions The protobuf definitions are all found in the `/proto` folder in the project root. They are used to generate code for gRPC communication for both the frontend and backend. The generated code is checked into version control though, so unless you want to change the protobuf definitions you don't need to install any tooling. diff --git a/frontend/package.json b/frontend/package.json index ac4b2d6506..1a7dfa5754 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -5,6 +5,7 @@ "start": "yarn workspace @backstage/app start", "build": "yarn workspace @backstage/app build", "test": "cross-env CI=true lerna run test --stream --parallel -- --coverage", + "create-plugin": "yarn workspace @spotify-backstage/cli build && backstage-cli create-plugin", "lint": "lerna run lint --stream" }, "workspaces": { diff --git a/frontend/packages/plugins/_template/cookiecutter.json b/frontend/packages/plugins/_template/cookiecutter.json deleted file mode 100644 index 2cc21e895e..0000000000 --- a/frontend/packages/plugins/_template/cookiecutter.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "plugin_name": "example-plugin" -} diff --git a/frontend/packages/plugins/_template/hooks/pre_gen_project.py b/frontend/packages/plugins/_template/hooks/pre_gen_project.py deleted file mode 100644 index 04f63eb219..0000000000 --- a/frontend/packages/plugins/_template/hooks/pre_gen_project.py +++ /dev/null @@ -1,14 +0,0 @@ -import re -import sys - - -def validate(name, regex, error_message): - if not re.match(regex, name): - print(error_message % name) - - # exits with status 1 to indicate failure - sys.exit(1) - - -validate('{{ cookiecutter.plugin_name }}', - r'^[a-z-]+$', 'ERROR: %s is not a valid plugin name! Only lowercase letters and hyphens are valid (Examples: my-amazing-plugin, myamazingplugin).') diff --git a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/README.md b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/README.md deleted file mode 100644 index 86e39457da..0000000000 --- a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/README.md +++ /dev/null @@ -1 +0,0 @@ -Welcome to your {{cookiecutter.plugin_name}} plugin! diff --git a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/jest.config.js b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/jest.config.js deleted file mode 100644 index 6b28dacb3d..0000000000 --- a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/jest.config.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - ...require('@spotify/web-scripts/config/jest.config.js'), - setupFilesAfterEnv: ['../jest.setup.ts'], -}; diff --git a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/jest.setup.ts b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/jest.setup.ts deleted file mode 100644 index 666127af39..0000000000 --- a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/jest.setup.ts +++ /dev/null @@ -1 +0,0 @@ -import '@testing-library/jest-dom/extend-expect'; diff --git a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/package.json b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/package.json deleted file mode 100644 index 65c76f4df7..0000000000 --- a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/package.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "name": "@backstage/plugin-{{ cookiecutter.plugin_name }}", - "version": "0.0.0", - "main": "src/index.ts", - "main:src": "src/index.ts", - "devDependencies": { - "@spotify-backstage/core": "1.0.0", - "@spotify/web-scripts": "^6.0.0", - "@testing-library/jest-dom": "^4.2.4", - "@testing-library/react": "^9.3.2", - "@testing-library/user-event": "^7.1.2", - "@types/jest": "^24.0.0", - "@types/node": "^12.0.0", - "@types/react": "^16.9.0", - "@types/react-dom": "^16.9.0", - "react": "^16.12.0", - "react-dom": "^16.12.0", - "@material-ui/core": "^4.9.1", - "@material-ui/icons": "^4.9.1" - }, - "scripts": { - "lint": "web-scripts lint", - "test": "web-scripts test" - }, - "license": "Apache-2.0" -} diff --git a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/components/ExampleComponent/ExampleComponent.test.tsx b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/components/ExampleComponent/ExampleComponent.test.tsx deleted file mode 100644 index c231eea700..0000000000 --- a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/components/ExampleComponent/ExampleComponent.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import { render } from '@testing-library/react'; -import ExampleComponent from './ExampleComponent'; - -describe('ExampleComponent', () => { - it('should render', () => { - const rendered = render(); - expect(rendered.getByText('Hello!')).toBeInTheDocument(); - }); -}); diff --git a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/components/ExampleComponent/ExampleComponent.tsx b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/components/ExampleComponent/ExampleComponent.tsx deleted file mode 100644 index bd7c9235ae..0000000000 --- a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/components/ExampleComponent/ExampleComponent.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React, { FC } from 'react'; -import Button from '@material-ui/core/Button'; - -const ExampleComponent: FC<{}> = () => { - return ( - - ); -}; - -export default ExampleComponent; diff --git a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/components/ExampleComponent/index.ts b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/components/ExampleComponent/index.ts deleted file mode 100644 index 520a3bf553..0000000000 --- a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/components/ExampleComponent/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ExampleComponent'; diff --git a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/index.ts b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/index.ts deleted file mode 100644 index a2e45f3a79..0000000000 --- a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './plugin'; -export { default as ExampleComponent } from './components/ExampleComponent'; diff --git a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/plugin.test.ts b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/plugin.test.ts deleted file mode 100644 index 670ca54e93..0000000000 --- a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/plugin.test.ts +++ /dev/null @@ -1,7 +0,0 @@ -import plugin from './plugin'; - -describe('{{ cookiecutter.plugin_name }}', () => { - it('should export plugin', () => { - expect(plugin).toBeDefined(); - }); -}); diff --git a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/plugin.ts b/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/plugin.ts deleted file mode 100644 index ebf526a6ea..0000000000 --- a/frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/plugin.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { createPlugin } from '@spotify-backstage/core'; - -export default createPlugin({ - id: '{{ cookiecutter.plugin_name }}', -}); diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 6914349288..6f284cd8d0 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -2558,36 +2558,6 @@ dependencies: type-detect "4.0.8" -"@spotify-backstage/cli@file:packages/cli": - version "1.1.0" - dependencies: - commander "^4.1.1" - dashify "^2.0.0" - fs-extra "^8.1.0" - handlebars "^4.7.3" - inquirer "^7.0.4" - recursive-readdir "^2.2.2" - replace-in-file "^5.0.2" -"@spotify-backstage/core@file:packages/core": - version "1.0.0" - dependencies: - "@material-ui/core" "^4.9.1" - "@material-ui/icons" "^4.9.1" - "@types/google-protobuf" "^3.7.2" - "@types/jest" "^24.0.0" - "@types/node" "^12.0.0" - "@types/react" "^16.9.0" - "@types/react-dom" "^16.9.0" - "@types/react-router-dom" "^5.1.3" - classnames "^2.2.6" - rc-progress "^2.5.2" - react "^16.12.0" - react-addons-text-content "0.0.4" - react-dom "^16.12.0" - react-helmet "5.2.1" - react-router-dom "^5.1.2" - recompose "0.30.0" - "@spotify/eslint-config-base@^6.0.0": version "6.0.0" resolved "https://registry.npmjs.org/@spotify/eslint-config-base/-/eslint-config-base-6.0.0.tgz#487da7dbb89380b4eb778f4b902b8bba9b1f389f" diff --git a/tools/cookiecutter/Dockerfile b/tools/cookiecutter/Dockerfile deleted file mode 100644 index 106337e3a5..0000000000 --- a/tools/cookiecutter/Dockerfile +++ /dev/null @@ -1,3 +0,0 @@ -FROM python:3.8-slim AS scaffolder -RUN pip install cookiecutter==1.7.0 --index-url https://pypi.python.org/simple -ENTRYPOINT [ "cookiecutter" ] \ No newline at end of file diff --git a/tools/cookiecutter/init.sh b/tools/cookiecutter/init.sh deleted file mode 100755 index 717ab50cd3..0000000000 --- a/tools/cookiecutter/init.sh +++ /dev/null @@ -1,10 +0,0 @@ -#!/usr/bin/env bash - -set -e - -# Build the container -docker build $(pwd)/tools/cookiecutter -t backstage/tools/cookiecutter --quiet - -# Run cookiecutter with our arguments -COOKIECUTTER_FLAGS=${@:-""} -docker run -it -v $(pwd):/app -w /app backstage/tools/cookiecutter $COOKIECUTTER_FLAGS