From ec99490137d74af6c936e002ac858f9ef7a796c9 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Mon, 24 Feb 2020 14:38:56 +0100 Subject: [PATCH 1/2] packages/cli: some template fixes + register route --- frontend/packages/app/src/App.tsx | 6 ++---- frontend/packages/app/src/plugins.ts | 2 ++ .../templates/default-plugin/package.json.hbs | 20 ++++--------------- ...test.tsx => ExampleComponent.test.tsx.hbs} | 2 +- .../ExampleComponent/ExampleComponent.tsx | 16 --------------- .../ExampleComponent/ExampleComponent.tsx.hbs | 8 ++++++++ .../cli/templates/default-plugin/src/index.ts | 1 - .../default-plugin/src/plugin.ts.hbs | 6 +++++- 8 files changed, 22 insertions(+), 39 deletions(-) create mode 100644 frontend/packages/app/src/plugins.ts rename frontend/packages/cli/templates/default-plugin/src/components/ExampleComponent/{ExampleComponent.test.tsx => ExampleComponent.test.tsx.hbs} (77%) delete mode 100644 frontend/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx create mode 100644 frontend/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs diff --git a/frontend/packages/app/src/App.tsx b/frontend/packages/app/src/App.tsx index ccf1a9f1e5..8e2e64645b 100644 --- a/frontend/packages/app/src/App.tsx +++ b/frontend/packages/app/src/App.tsx @@ -1,11 +1,10 @@ import { BackstageTheme, createApp, InfoCard } from '@spotify-backstage/core'; //import PageHeader from './components/PageHeader'; import { LoginComponent } from '@backstage/plugin-login'; -import HomePagePlugin from '@backstage/plugin-home-page'; -import CreateEntityPlugin from '@backstage/plugin-create-entity'; import { CssBaseline, makeStyles, ThemeProvider } from '@material-ui/core'; import React, { FC } from 'react'; import { BrowserRouter as Router } from 'react-router-dom'; +import * as plugins from './plugins'; import SideBar from './components/SideBar'; import entities from './entities'; import { LoginBarrier } from './login/LoginBarrier'; @@ -61,8 +60,7 @@ const AppShell: FC<{}> = ({ children }) => { const app = createApp(); app.registerEntityKind(...entities); -app.registerPlugin(HomePagePlugin); -app.registerPlugin(CreateEntityPlugin); +app.registerPlugin(...Object.values(plugins)); const AppComponent = app.build(); diff --git a/frontend/packages/app/src/plugins.ts b/frontend/packages/app/src/plugins.ts new file mode 100644 index 0000000000..b0a0ad21bf --- /dev/null +++ b/frontend/packages/app/src/plugins.ts @@ -0,0 +1,2 @@ +export { default as HomePagePlugin } from '@backstage/plugin-home-page'; +export { default as CreateEntityPlugin } from '@backstage/plugin-create-entity'; diff --git a/frontend/packages/cli/templates/default-plugin/package.json.hbs b/frontend/packages/cli/templates/default-plugin/package.json.hbs index aad674775d..f674201821 100644 --- a/frontend/packages/cli/templates/default-plugin/package.json.hbs +++ b/frontend/packages/cli/templates/default-plugin/package.json.hbs @@ -1,6 +1,6 @@ { - "name": "@spotify-backstage/{{id}}", - "version": "0.0.1", + "name": "@spotify-backstage/plugin-{{id}}", + "version": "0.0.0", "main": "src/index.ts", "main:src": "src/index.ts", "license": "Apache-2.0", @@ -8,21 +8,9 @@ "scripts": { "build": "web-scripts build", "lint": "web-scripts lint", - "test": "web-scripts test", - "start": "nodemon ." + "test": "web-scripts test" }, "devDependencies": { - "@spotify/web-scripts": "^6.0.0", - "@types/node": "^13.7.2", - "nodemon": "^2.0.2", - "ts-node": "^8.6.2" - }, - "bin": { - "backstage-{{id}}": "bin/backstage-{{id}}" - }, - "nodemonConfig": { - "watch": "./src", - "exec": "ts-node", - "ext": "ts" + "@spotify/web-scripts": "^6.0.0" } } diff --git a/frontend/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx b/frontend/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs similarity index 77% rename from frontend/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx rename to frontend/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs index c231eea700..95c7f3c30f 100644 --- a/frontend/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx +++ b/frontend/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs @@ -5,6 +5,6 @@ import ExampleComponent from './ExampleComponent'; describe('ExampleComponent', () => { it('should render', () => { const rendered = render(); - expect(rendered.getByText('Hello!')).toBeInTheDocument(); + expect(rendered.getByText('Welcome to {{ id }}!')).toBeInTheDocument(); }); }); diff --git a/frontend/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx b/frontend/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx deleted file mode 100644 index bd7c9235ae..0000000000 --- a/frontend/packages/cli/templates/default-plugin/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/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs b/frontend/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs new file mode 100644 index 0000000000..e152bcd28d --- /dev/null +++ b/frontend/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs @@ -0,0 +1,8 @@ +import React, { FC } from 'react'; +import Typography from '@material-ui/core/Typography'; + +const ExampleComponent: FC<{}> = () => { + return Welcome to {{ id }}!; +}; + +export default ExampleComponent; diff --git a/frontend/packages/cli/templates/default-plugin/src/index.ts b/frontend/packages/cli/templates/default-plugin/src/index.ts index a2e45f3a79..b68aea57f9 100644 --- a/frontend/packages/cli/templates/default-plugin/src/index.ts +++ b/frontend/packages/cli/templates/default-plugin/src/index.ts @@ -1,2 +1 @@ export { default } from './plugin'; -export { default as ExampleComponent } from './components/ExampleComponent'; diff --git a/frontend/packages/cli/templates/default-plugin/src/plugin.ts.hbs b/frontend/packages/cli/templates/default-plugin/src/plugin.ts.hbs index 32a80e1b5f..830de5f553 100644 --- a/frontend/packages/cli/templates/default-plugin/src/plugin.ts.hbs +++ b/frontend/packages/cli/templates/default-plugin/src/plugin.ts.hbs @@ -1,5 +1,9 @@ -import { createPlugin } from '@backstage/core'; +import { createPlugin } from '@spotify-backstage/core'; +import ExampleComponent from './components/ExampleComponent'; export default createPlugin({ id: '{{ id }}', + register({ router }) { + router.registerRoute('/{{ id }}', ExampleComponent); + }, }); From a290265e5445884c97de56a50545d9d1d02e19e2 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Mon, 24 Feb 2020 14:51:34 +0100 Subject: [PATCH 2/2] frontend/README: update instructions for adding plugin --- README.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index ebeabe6b0c..2341dee85d 100644 --- a/README.md +++ b/README.md @@ -70,7 +70,13 @@ In [packages/app/src/plugins.ts](frontend/packages/app/src/plugins.ts), add the 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. +To apply the above changes, go to the `frontend/` directory and run: + +``` +$ yarn +``` + +Now start or restart `yarn start`, and you should be able to see the default page for your new plugin at [localhost:3000/my-plugin](http://localhost:3000/my-plugin). ## Protobuf Definitions