diff --git a/docs/assets/plugins/create-plugin_types.png b/docs/assets/plugins/create-plugin_types.png new file mode 100644 index 0000000000..d10ae04442 Binary files /dev/null and b/docs/assets/plugins/create-plugin_types.png differ diff --git a/docs/assets/my-plugin_screenshot.png b/docs/assets/plugins/my-plugin_screenshot.png similarity index 100% rename from docs/assets/my-plugin_screenshot.png rename to docs/assets/plugins/my-plugin_screenshot.png diff --git a/docs/features/software-catalog/extending-the-model.md b/docs/features/software-catalog/extending-the-model.md index 52ef565837..06140bdf75 100644 --- a/docs/features/software-catalog/extending-the-model.md +++ b/docs/features/software-catalog/extending-the-model.md @@ -447,6 +447,9 @@ want to have an isomorphic package that houses these types. Within the Backstage main repo the package naming pattern of `-common` is used for isomorphic packages, and you may choose to adopt this pattern as well. +You can generate an isomorphic plugin by running:`yarn new --select plugin-common` +or you can run `yarn new` and then select "plugin-common" from the list of options + There's at this point no existing templates for generating isomorphic plugins using the `@backstage/cli`. Perhaps the simplest wat to get started right now is to copy the contents of one of the existing packages in the main repository, diff --git a/docs/plugins/create-a-plugin.md b/docs/plugins/create-a-plugin.md index cbd789c757..cc8c2f1296 100644 --- a/docs/plugins/create-a-plugin.md +++ b/docs/plugins/create-a-plugin.md @@ -8,7 +8,7 @@ A Backstage Plugin adds functionality to Backstage. ## Create a Plugin -To create a new plugin, make sure you've run `yarn install` and installed +To create a new frontend plugin, make sure you've run `yarn install` and installed dependencies, then run the following on your command line (a shortcut to invoking the [`backstage-cli new --select plugin`](../local-dev/cli-commands.md#new)) @@ -18,7 +18,7 @@ from the root of your project. yarn new --select plugin ``` -![](../assets/getting-started/create-plugin_output.png) +![Example of output when creating a new plugin](../assets/getting-started/create-plugin_output.png) This will create a new Backstage Plugin based on the ID that was provided. It will be built and added to the Backstage App automatically. @@ -27,7 +27,7 @@ will be built and added to the Backstage App automatically. > should be able to see the default page for your new plugin directly by > navigating to `http://localhost:3000/my-plugin`. -![](../assets/my-plugin_screenshot.png) +![Example of new plugin running in browser](../assets/plugins/my-plugin_screenshot.png) You can also serve the plugin in isolation by running `yarn start` in the plugin directory. Or by using the yarn workspace command, for example: @@ -39,3 +39,11 @@ yarn workspace @backstage/plugin-my-plugin start # Also supports --check This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads. It is only meant for local development, and the setup for it can be found inside the plugin's `dev/` directory. + +### Other Plugin Types + +There are other plugin types that you can chose from. To be able to select the type +when you create a new plugin just run: `yarn new`. You'll then be asked what type of +plugin you wish to create like this: + +![List of available plugin types to pick from](../assets/plugins/create-plugin_types.png) diff --git a/docs/plugins/index.md b/docs/plugins/index.md index a582556311..755c1b8a7d 100644 --- a/docs/plugins/index.md +++ b/docs/plugins/index.md @@ -12,7 +12,7 @@ development tool as a plugin in Backstage. By following strong [design guidelines](../dls/design.md) we ensure the overall user experience stays consistent between plugins. -![plugin](../assets/my-plugin_screenshot.png) +![plugin](../assets/plugins/my-plugin_screenshot.png) ## Creating a plugin