Merge pull request #115 from spotify/rugvip/plug

packages/cli: some template fixes + register route

README.md

@@ -62,7 +62,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
 

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();
 

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';

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"
   }
 }

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(<ExampleComponent />);
-    expect(rendered.getByText('Hello!')).toBeInTheDocument();
+    expect(rendered.getByText('Welcome to {{ id }}!')).toBeInTheDocument();
   });
 });

frontend/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx

@@ -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;

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 <Typography variant="h1">Welcome to {{ id }}!</Typography>;
+};
+
+export default ExampleComponent;

frontend/packages/cli/templates/default-plugin/src/index.ts

@@ -1,2 +1 @@
 export { default } from './plugin';
-export { default as ExampleComponent } from './components/ExampleComponent';

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);
+  },
 });