README: updated instructions for creating plugin + yarn script and remove cookiecutter
This commit is contained in:
Patrik Oldsberg
@@ -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
|
||||
|
||||
@@ -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';
|
||||
# <ExampleComponent />
|
||||
```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.
|
||||
|
||||
@@ -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": {
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"plugin_name": "example-plugin"
|
||||
}
|
||||
@@ -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).')
|
||||
@@ -1 +0,0 @@
|
||||
Welcome to your {{cookiecutter.plugin_name}} plugin!
|
||||
@@ -1,4 +0,0 @@
|
||||
module.exports = {
|
||||
...require('@spotify/web-scripts/config/jest.config.js'),
|
||||
setupFilesAfterEnv: ['../jest.setup.ts'],
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
import '@testing-library/jest-dom/extend-expect';
|
||||
@@ -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"
|
||||
}
|
||||
-10
@@ -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(<ExampleComponent />);
|
||||
expect(rendered.getByText('Hello!')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
-16
@@ -1,16 +0,0 @@
|
||||
import React, { FC } from 'react';
|
||||
import Button from '@material-ui/core/Button';
|
||||
|
||||
const ExampleComponent: FC<{}> = () => {
|
||||
return (
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => window.location.reload()}
|
||||
>
|
||||
Hello!
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExampleComponent;
|
||||
-1
@@ -1 +0,0 @@
|
||||
export { default } from './ExampleComponent';
|
||||
@@ -1,2 +0,0 @@
|
||||
export { default } from './plugin';
|
||||
export { default as ExampleComponent } from './components/ExampleComponent';
|
||||
@@ -1,7 +0,0 @@
|
||||
import plugin from './plugin';
|
||||
|
||||
describe('{{ cookiecutter.plugin_name }}', () => {
|
||||
it('should export plugin', () => {
|
||||
expect(plugin).toBeDefined();
|
||||
});
|
||||
});
|
||||
@@ -1,5 +0,0 @@
|
||||
import { createPlugin } from '@spotify-backstage/core';
|
||||
|
||||
export default createPlugin({
|
||||
id: '{{ cookiecutter.plugin_name }}',
|
||||
});
|
||||
@@ -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"
|
||||
|
||||
@@ -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" ]
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user