@backstage/cli 0.33.2-next.0 → 0.34.0-next.2

package/dist/modules/build/lib/bundler/server.cjs.js

@@ -4,8 +4,8 @@ var chalk = require('chalk');
 var fs = require('fs-extra');
 var path = require('path');
 var openBrowser = require('react-dev-utils/openBrowser');
-var webpack = require('webpack');
-var WebpackDevServer = require('webpack-dev-server');
+var core = require('@rspack/core');
+var devServer = require('@rspack/dev-server');
 var paths$1 = require('../../../../lib/paths.cjs.js');
 var config = require('../../../config/lib/config.cjs.js');
 var config$1 = require('./config.cjs.js');
@@ -17,8 +17,6 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var chalk__default = /*#__PURE__*/_interopDefaultCompat(chalk);
 var fs__default = /*#__PURE__*/_interopDefaultCompat(fs);
 var openBrowser__default = /*#__PURE__*/_interopDefaultCompat(openBrowser);
-var webpack__default = /*#__PURE__*/_interopDefaultCompat(webpack);
-var WebpackDevServer__default = /*#__PURE__*/_interopDefaultCompat(WebpackDevServer);
 
 async function serveBundle(options) {
   const paths$2 = paths.resolveBundlingPaths(options);
@@ -38,14 +36,14 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be
   const { name } = await fs__default.default.readJson(
     path.resolve(options.targetDir ?? paths$1.paths.targetDir, "package.json")
   );
-  let webpackServer = void 0;
+  let devServer$1 = void 0;
   let latestFrontendAppConfigs = [];
   const triggerReload = () => {
-    if (webpackServer) {
-      webpackServer.invalidate();
-      if (process.env.EXPERIMENTAL_RSPACK) {
-        webpackServer.sendMessage(
-          webpackServer.webSocketServer?.clients ?? [],
+    if (devServer$1) {
+      devServer$1.invalidate();
+      if (!process.env.LEGACY_WEBPACK_BUILD) {
+        devServer$1.sendMessage(
+          devServer$1.webSocketServer?.clients ?? [],
           "static-changed"
         );
       }
@@ -92,14 +90,14 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be
       triggerReload();
     }
   });
-  const rspack = process.env.EXPERIMENTAL_RSPACK ? require("@rspack/core") : void 0;
+  const webpack = process.env.LEGACY_WEBPACK_BUILD ? require("webpack") : void 0;
   const commonConfigOptions = {
     ...options,
     checksEnabled: options.checksEnabled,
     isDev: true,
     baseUrl: url,
     frontendConfig,
-    rspack,
+    webpack,
     getFrontendAppConfigs: () => {
       return latestFrontendAppConfigs;
     }
@@ -109,12 +107,10 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be
     additionalEntryPoints: detectedModulesEntryPoint,
     moduleFederation: options.moduleFederation
   });
-  const bundler = rspack ?? webpack__default.default;
-  const DevServer = rspack ? require("@rspack/dev-server").RspackDevServer : WebpackDevServer__default.default;
-  if (rspack) {
-    console.log(
-      chalk__default.default.yellow(`\u26A0\uFE0F  WARNING: Using experimental RSPack dev server.`)
-    );
+  const bundler = webpack ?? core.rspack;
+  const DevServer = webpack ? require("webpack-dev-server") : devServer.RspackDevServer;
+  if (webpack) {
+    console.log(chalk__default.default.yellow(`\u26A0\uFE0F  WARNING: Using legacy WebPack dev server.`));
   }
   const publicPaths = await paths.resolveOptionalBundlingPaths({
     entry: "src/index-public-experimental",
@@ -128,7 +124,7 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be
     );
   }
   const compiler = publicPaths ? bundler([config$2, await config$1.createConfig(publicPaths, commonConfigOptions)]) : bundler(config$2);
-  webpackServer = new DevServer(
+  devServer$1 = new DevServer(
     {
       hot: !process.env.CI,
       devMiddleware: {
@@ -172,8 +168,8 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be
     compiler
   );
   await new Promise(async (resolve, reject) => {
-    if (webpackServer) {
-      webpackServer.startCallback((err) => {
+    if (devServer$1) {
+      devServer$1.startCallback((err) => {
         if (err) {
           reject(err);
           return;
@@ -190,7 +186,7 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be
   const waitForExit = async () => {
     for (const signal of ["SIGINT", "SIGTERM"]) {
       process.on(signal, () => {
-        webpackServer?.stop();
+        devServer$1?.stop();
         process.exit();
       });
     }

package/dist/modules/build/lib/bundler/transforms.cjs.js

@@ -1,15 +1,10 @@
 'use strict';
 
-var MiniCssExtractPlugin = require('mini-css-extract-plugin');
-var svgrTemplate = require('../../../../lib/svgrTemplate.cjs.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var MiniCssExtractPlugin__default = /*#__PURE__*/_interopDefaultCompat(MiniCssExtractPlugin);
+var core = require('@rspack/core');
 
 const transforms = (options) => {
-  const { isDev, isBackend, rspack } = options;
-  const CssExtractRspackPlugin = rspack ? rspack.CssExtractRspackPlugin : MiniCssExtractPlugin__default.default;
+  const { isDev, isBackend, webpack } = options;
+  const CssExtractPlugin = webpack ? require("mini-css-extract-plugin") : core.CssExtractRspackPlugin;
   function insertBeforeJssStyles(element) {
     const head = document.head;
     const firstJssNode = head.querySelector("style[data-jss]");
@@ -25,7 +20,7 @@ const transforms = (options) => {
       exclude: /node_modules/,
       use: [
         {
-          loader: rspack ? "builtin:swc-loader" : require.resolve("swc-loader"),
+          loader: webpack ? require.resolve("swc-loader") : "builtin:swc-loader",
           options: {
             jsc: {
               target: "es2022",
@@ -51,7 +46,7 @@ const transforms = (options) => {
       exclude: /node_modules/,
       use: [
         {
-          loader: rspack ? "builtin:swc-loader" : require.resolve("swc-loader"),
+          loader: webpack ? require.resolve("swc-loader") : "builtin:swc-loader",
           options: {
             jsc: {
               target: "es2022",
@@ -78,29 +73,6 @@ const transforms = (options) => {
         fullySpecified: false
       }
     },
-    {
-      test: [/\.icon\.svg$/],
-      use: [
-        {
-          loader: rspack ? "builtin:swc-loader" : require.resolve("swc-loader"),
-          options: {
-            jsc: {
-              target: "es2022",
-              externalHelpers: !isBackend,
-              parser: {
-                syntax: "ecmascript",
-                jsx: !isBackend,
-                dynamicImport: true
-              }
-            }
-          }
-        },
-        {
-          loader: require.resolve("@svgr/webpack"),
-          options: { babel: false, template: svgrTemplate.svgrTemplate }
-        }
-      ]
-    },
     {
       test: [
         /\.bmp$/,
@@ -145,7 +117,7 @@ const transforms = (options) => {
           options: {
             insert: insertBeforeJssStyles
           }
-        } : CssExtractRspackPlugin.loader,
+        } : CssExtractPlugin.loader,
         {
           loader: require.resolve("css-loader"),
           options: {
@@ -158,7 +130,7 @@ const transforms = (options) => {
   const plugins = new Array();
   if (!isDev) {
     plugins.push(
-      new CssExtractRspackPlugin({
+      new CssExtractPlugin({
         filename: "static/[name].[contenthash:8].css",
         chunkFilename: "static/[name].[id].[contenthash:8].css",
         insert: insertBeforeJssStyles

package/dist/packages/cli/package.json.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var version = "0.33.2-next.0";
+var version = "0.34.0-next.2";
 var dependencies = {
 	"@backstage/catalog-model": "workspace:^",
 	"@backstage/cli-common": "workspace:^",
@@ -18,20 +18,16 @@ var dependencies = {
 	"@octokit/graphql-schema": "^13.7.0",
 	"@octokit/oauth-app": "^4.2.0",
 	"@octokit/request": "^8.0.0",
-	"@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
 	"@rollup/plugin-commonjs": "^26.0.0",
 	"@rollup/plugin-json": "^6.0.0",
 	"@rollup/plugin-node-resolve": "^15.0.0",
 	"@rollup/plugin-yaml": "^4.0.0",
+	"@rspack/core": "^1.4.11",
+	"@rspack/dev-server": "^1.1.4",
+	"@rspack/plugin-react-refresh": "^1.4.3",
 	"@spotify/eslint-config-base": "^15.0.0",
 	"@spotify/eslint-config-react": "^15.0.0",
 	"@spotify/eslint-config-typescript": "^15.0.0",
-	"@sucrase/webpack-loader": "^2.0.0",
-	"@svgr/core": "6.5.x",
-	"@svgr/plugin-jsx": "6.5.x",
-	"@svgr/plugin-svgo": "6.5.x",
-	"@svgr/rollup": "6.5.x",
-	"@svgr/webpack": "6.5.x",
 	"@swc/core": "^1.3.46",
 	"@swc/helpers": "^0.5.0",
 	"@swc/jest": "^0.2.22",
@@ -51,7 +47,6 @@ var dependencies = {
 	"css-loader": "^6.5.1",
 	"ctrlc-windows": "^2.1.0",
 	esbuild: "^0.25.0",
-	"esbuild-loader": "^4.0.0",
 	eslint: "^8.6.0",
 	"eslint-config-prettier": "^9.0.0",
 	"eslint-formatter-friendly": "^7.0.0",
@@ -62,9 +57,8 @@ var dependencies = {
 	"eslint-plugin-react": "^7.37.2",
 	"eslint-plugin-react-hooks": "^5.0.0",
 	"eslint-plugin-unused-imports": "^4.1.4",
-	"eslint-webpack-plugin": "^4.2.0",
+	"eslint-rspack-plugin": "^4.2.1",
 	express: "^4.17.1",
-	"fork-ts-checker-webpack-plugin": "^9.0.0",
 	"fs-extra": "^11.2.0",
 	"git-url-parse": "^15.0.0",
 	glob: "^7.1.7",
@@ -80,7 +74,6 @@ var dependencies = {
 	"jest-runtime": "^29.0.2",
 	"json-schema": "^0.4.0",
 	lodash: "^4.17.21",
-	"mini-css-extract-plugin": "^2.4.2",
 	minimatch: "^9.0.0",
 	"node-stdlib-browser": "^1.3.1",
 	"npm-packlist": "^5.0.0",
@@ -104,12 +97,10 @@ var dependencies = {
 	sucrase: "^3.20.2",
 	"swc-loader": "^0.2.3",
 	tar: "^6.1.12",
-	"terser-webpack-plugin": "^5.1.3",
+	"ts-checker-rspack-plugin": "^1.1.5",
 	"ts-morph": "^24.0.0",
 	undici: "^7.2.3",
 	util: "^0.12.3",
-	webpack: "^5.94.0",
-	"webpack-dev-server": "^5.0.0",
 	yaml: "^2.0.0",
 	yargs: "^16.2.0",
 	"yml-loader": "^2.1.0",
@@ -134,9 +125,7 @@ var devDependencies = {
 	"@backstage/plugin-scaffolder-node-test-utils": "workspace:^",
 	"@backstage/test-utils": "workspace:^",
 	"@backstage/theme": "workspace:^",
-	"@rspack/core": "^1.3.9",
-	"@rspack/dev-server": "^1.1.1",
-	"@rspack/plugin-react-refresh": "^1.4.2",
+	"@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
 	"@types/cross-spawn": "^6.0.2",
 	"@types/ejs": "^3.1.3",
 	"@types/express": "^4.17.6",
@@ -154,8 +143,15 @@ var devDependencies = {
 	"@types/webpack-sources": "^3.2.3",
 	"@types/yarnpkg__lockfile": "^1.1.4",
 	del: "^8.0.0",
+	"esbuild-loader": "^4.0.0",
+	"eslint-webpack-plugin": "^4.2.0",
+	"fork-ts-checker-webpack-plugin": "^9.0.0",
+	"mini-css-extract-plugin": "^2.4.2",
 	msw: "^1.0.0",
-	nodemon: "^3.0.1"
+	nodemon: "^3.0.1",
+	"terser-webpack-plugin": "^5.1.3",
+	webpack: "~5.96.0",
+	"webpack-dev-server": "^5.0.0"
 };
 
 exports.dependencies = dependencies;

package/dist/packages/core-components/package.json.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var version = "0.17.5-next.0";
+var version = "0.17.5-next.2";
 
 exports.version = version;
 //# sourceMappingURL=package.json.cjs.js.map

package/dist/packages/frontend-defaults/package.json.cjs.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var version = "0.3.0-next.3";
+
+exports.version = version;
+//# sourceMappingURL=package.json.cjs.js.map

package/dist/packages/frontend-plugin-api/package.json.cjs.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var version = "0.11.0-next.2";
+
+exports.version = version;
+//# sourceMappingURL=package.json.cjs.js.map

package/dist/packages/frontend-test-utils/package.json.cjs.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var version = "0.3.5-next.2";
+
+exports.version = version;
+//# sourceMappingURL=package.json.cjs.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/cli",
-  "version": "0.33.2-next.0",
+  "version": "0.34.0-next.2",
   "description": "CLI for developing Backstage plugins and apps",
   "backstage": {
     "role": "cli"
@@ -63,20 +63,16 @@
     "@octokit/graphql-schema": "^13.7.0",
     "@octokit/oauth-app": "^4.2.0",
     "@octokit/request": "^8.0.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
     "@rollup/plugin-commonjs": "^26.0.0",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-yaml": "^4.0.0",
+    "@rspack/core": "^1.4.11",
+    "@rspack/dev-server": "^1.1.4",
+    "@rspack/plugin-react-refresh": "^1.4.3",
     "@spotify/eslint-config-base": "^15.0.0",
     "@spotify/eslint-config-react": "^15.0.0",
     "@spotify/eslint-config-typescript": "^15.0.0",
-    "@sucrase/webpack-loader": "^2.0.0",
-    "@svgr/core": "6.5.x",
-    "@svgr/plugin-jsx": "6.5.x",
-    "@svgr/plugin-svgo": "6.5.x",
-    "@svgr/rollup": "6.5.x",
-    "@svgr/webpack": "6.5.x",
     "@swc/core": "^1.3.46",
     "@swc/helpers": "^0.5.0",
     "@swc/jest": "^0.2.22",
@@ -96,7 +92,6 @@
     "css-loader": "^6.5.1",
     "ctrlc-windows": "^2.1.0",
     "esbuild": "^0.25.0",
-    "esbuild-loader": "^4.0.0",
     "eslint": "^8.6.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-formatter-friendly": "^7.0.0",
@@ -107,9 +102,8 @@
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-unused-imports": "^4.1.4",
-    "eslint-webpack-plugin": "^4.2.0",
+    "eslint-rspack-plugin": "^4.2.1",
     "express": "^4.17.1",
-    "fork-ts-checker-webpack-plugin": "^9.0.0",
     "fs-extra": "^11.2.0",
     "git-url-parse": "^15.0.0",
     "glob": "^7.1.7",
@@ -125,7 +119,6 @@
     "jest-runtime": "^29.0.2",
     "json-schema": "^0.4.0",
     "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^2.4.2",
     "minimatch": "^9.0.0",
     "node-stdlib-browser": "^1.3.1",
     "npm-packlist": "^5.0.0",
@@ -149,12 +142,10 @@
     "sucrase": "^3.20.2",
     "swc-loader": "^0.2.3",
     "tar": "^6.1.12",
-    "terser-webpack-plugin": "^5.1.3",
+    "ts-checker-rspack-plugin": "^1.1.5",
     "ts-morph": "^24.0.0",
     "undici": "^7.2.3",
     "util": "^0.12.3",
-    "webpack": "^5.94.0",
-    "webpack-dev-server": "^5.0.0",
     "yaml": "^2.0.0",
     "yargs": "^16.2.0",
     "yml-loader": "^2.1.0",
@@ -168,7 +159,7 @@
     "@backstage/catalog-client": "1.11.0-next.0",
     "@backstage/config": "1.3.3",
     "@backstage/core-app-api": "1.18.0",
-    "@backstage/core-components": "0.17.5-next.0",
+    "@backstage/core-components": "0.17.5-next.2",
     "@backstage/core-plugin-api": "1.10.9",
     "@backstage/dev-utils": "1.1.13-next.1",
     "@backstage/errors": "1.2.7",
@@ -179,9 +170,7 @@
     "@backstage/plugin-scaffolder-node-test-utils": "0.3.2-next.0",
     "@backstage/test-utils": "1.7.11-next.0",
     "@backstage/theme": "0.6.8-next.0",
-    "@rspack/core": "^1.3.9",
-    "@rspack/dev-server": "^1.1.1",
-    "@rspack/plugin-react-refresh": "^1.4.2",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
     "@types/cross-spawn": "^6.0.2",
     "@types/ejs": "^3.1.3",
     "@types/express": "^4.17.6",
@@ -199,22 +188,53 @@
     "@types/webpack-sources": "^3.2.3",
     "@types/yarnpkg__lockfile": "^1.1.4",
     "del": "^8.0.0",
+    "esbuild-loader": "^4.0.0",
+    "eslint-webpack-plugin": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^9.0.0",
+    "mini-css-extract-plugin": "^2.4.2",
     "msw": "^1.0.0",
-    "nodemon": "^3.0.1"
+    "nodemon": "^3.0.1",
+    "terser-webpack-plugin": "^5.1.3",
+    "webpack": "~5.96.0",
+    "webpack-dev-server": "^5.0.0"
   },
   "peerDependencies": {
-    "@rspack/core": "^1.2.8",
-    "@rspack/dev-server": "^1.0.9",
-    "@rspack/plugin-react-refresh": "^1.0.0"
+    "@module-federation/enhanced": "^0.9.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
+    "esbuild-loader": "^4.0.0",
+    "eslint-webpack-plugin": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^9.0.0",
+    "mini-css-extract-plugin": "^2.4.2",
+    "terser-webpack-plugin": "^5.1.3",
+    "webpack": "~5.96.0",
+    "webpack-dev-server": "^5.0.0"
   },
   "peerDependenciesMeta": {
-    "@rspack/core": {
+    "@module-federation/enhanced": {
+      "optional": true
+    },
+    "@pmmmwh/react-refresh-webpack-plugin": {
+      "optional": true
+    },
+    "esbuild-loader": {
+      "optional": true
+    },
+    "eslint-webpack-plugin": {
+      "optional": true
+    },
+    "fork-ts-checker-webpack-plugin": {
+      "optional": true
+    },
+    "mini-css-extract-plugin": {
+      "optional": true
+    },
+    "terser-webpack-plugin": {
       "optional": true
     },
-    "@rspack/dev-server": {
+    "webpack": {
       "optional": true
     },
-    "@rspack/plugin-react-refresh": {
+    "webpack-dev-server": {
       "optional": true
     }
   },

package/templates/new-frontend-plugin/.eslintrc.js.hbs

@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);

package/templates/new-frontend-plugin/README.md.hbs

@@ -0,0 +1,20 @@
+# {{pluginId}}
+
+Welcome to the {{pluginId}} plugin!
+
+_This plugin was created through the Backstage CLI_
+
+## Getting started
+
+Your plugin has been added to the app in this repository, meaning you'll be able
+to access it by running `yarn start` in the root directory, and then navigating
+to [/{{pluginId}}](http://localhost:3000/{{pluginId}}).
+
+This plugin is built with Backstage's [new frontend
+system](https://backstage.io/docs/frontend-system/architecture/index), and you
+can find more information about building plugins in the [plugin builder
+documentation](https://backstage.io/docs/frontend-system/building-plugins/index).
+
+You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
+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 [/dev](./dev) directory.

package/templates/new-frontend-plugin/dev/index.tsx

@@ -0,0 +1,10 @@
+import { createApp } from '@backstage/frontend-defaults';
+import ReactDOM from 'react-dom';
+
+import plugin from '../src';
+
+const app = createApp({
+  features: [plugin],
+});
+
+ReactDOM.render(app.createRoot(), document.getElementById('root'));

package/templates/new-frontend-plugin/package.json.hbs

@@ -0,0 +1,49 @@
+{
+  "name": "{{packageName}}",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "backstage": {
+    "role": "frontend-plugin",
+    "pluginId": "{{pluginId}}"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "start": "backstage-cli package start",
+    "build": "backstage-cli package build",
+    "lint": "backstage-cli package lint",
+    "test": "backstage-cli package test",
+    "clean": "backstage-cli package clean",
+    "prepack": "backstage-cli package prepack",
+    "postpack": "backstage-cli package postpack"
+  },
+  "dependencies": {
+    "@backstage/core-components": "{{versionQuery '@backstage/core-components'}}",
+    "@backstage/frontend-plugin-api": "{{versionQuery '@backstage/frontend-plugin-api'}}",
+    "@backstage/theme": "{{versionQuery '@backstage/theme'}}",
+    "@material-ui/core": "{{versionQuery '@material-ui/core' '4.12.2'}}",
+    "@material-ui/icons": "{{versionQuery '@material-ui/icons' '4.9.1'}}",
+    "@material-ui/lab": "{{versionQuery '@material-ui/lab' '4.0.0-alpha.61'}}",
+    "react-use": "{{versionQuery 'react-use' '17.2.4'}}"
+  },
+  "peerDependencies": {
+    "react": "{{versionQuery 'react' '^16.13.1 || ^17.0.0 || ^18.0.0'}}"
+  },
+  "devDependencies": {
+    "@backstage/cli": "{{versionQuery '@backstage/cli'}}",
+    "@backstage/frontend-defaults": "{{versionQuery '@backstage/frontend-defaults'}}",
+    "@backstage/frontend-test-utils": "{{versionQuery '@backstage/frontend-test-utils'}}",
+    "@testing-library/jest-dom": "{{versionQuery '@testing-library/jest-dom' '6.0.0'}}",
+    "@testing-library/react": "{{versionQuery '@testing-library/react' '14.0.0'}}",
+    "@testing-library/user-event": "{{versionQuery '@testing-library/user-event' '14.0.0'}}",
+    "msw": "{{versionQuery 'msw' '1.0.0'}}",
+    "react": "{{versionQuery 'react' '^16.13.1 || ^17.0.0 || ^18.0.0'}}"
+  },
+  "files": [
+    "dist"
+  ]
+}

package/templates/new-frontend-plugin/portable-template.yaml

@@ -0,0 +1,5 @@
+name: frontend-plugin
+role: frontend-plugin
+description: A new frontend plugin
+values:
+  pluginVar: '{{ camelCase pluginId }}Plugin'

package/templates/new-frontend-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs

@@ -0,0 +1,28 @@
+import { ExampleComponent } from './ExampleComponent';
+import { rest } from 'msw';
+import { setupServer } from 'msw/node';
+import { screen } from '@testing-library/react';
+import {
+  registerMswTestHooks,
+  renderInTestApp,
+} from '@backstage/frontend-test-utils';
+
+describe('ExampleComponent', () => {
+  const server = setupServer();
+  // Enable sane handlers for network requests
+  registerMswTestHooks(server);
+
+  // setup mock response
+  beforeEach(() => {
+    server.use(
+      rest.get('/*', (_, res, ctx) => res(ctx.status(200), ctx.json({}))),
+    );
+  });
+
+  it('should render', async () => {
+    await renderInTestApp(<ExampleComponent />);
+    expect(
+      screen.getByText('Welcome to {{pluginId}}!'),
+    ).toBeInTheDocument();
+  });
+});

package/templates/new-frontend-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs

@@ -0,0 +1,37 @@
+import { Typography, Grid } from '@material-ui/core';
+import {
+  InfoCard,
+  Header,
+  Page,
+  Content,
+  ContentHeader,
+  HeaderLabel,
+  SupportButton,
+} from '@backstage/core-components';
+import { ExampleFetchComponent } from '../ExampleFetchComponent';
+
+export const ExampleComponent = () => (
+  <Page themeId="tool">
+    <Header title="Welcome to {{pluginId}}!" subtitle="Optional subtitle">
+      <HeaderLabel label="Owner" value="Team X" />
+      <HeaderLabel label="Lifecycle" value="Alpha" />
+    </Header>
+    <Content>
+      <ContentHeader title="Plugin title">
+        <SupportButton>A description of your plugin goes here.</SupportButton>
+      </ContentHeader>
+      <Grid container spacing={3} direction="column">
+        <Grid item>
+          <InfoCard title="Information card">
+            <Typography variant="body1">
+              All content should be wrapped in a card like this.
+            </Typography>
+          </InfoCard>
+        </Grid>
+        <Grid item>
+          <ExampleFetchComponent />
+        </Grid>
+      </Grid>
+    </Content>
+  </Page>
+);

package/templates/new-frontend-plugin/src/components/ExampleComponent/index.ts

@@ -0,0 +1 @@
+export { ExampleComponent } from './ExampleComponent';

package/templates/new-frontend-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs

@@ -0,0 +1,19 @@
+import { renderInTestApp } from '@backstage/frontend-test-utils';
+import { ExampleFetchComponent } from './ExampleFetchComponent';
+
+describe('ExampleFetchComponent', () => {
+  it('renders the user table', async () => {
+    const { getAllByText, getByAltText, getByText, findByRole } =
+      await renderInTestApp(<ExampleFetchComponent />);
+
+    // Wait for the table to render
+    const table = await findByRole('table');
+    const nationality = getAllByText('GB');
+    // Assert that the table contains the expected user data
+    expect(table).toBeInTheDocument();
+    expect(getByAltText('Carolyn')).toBeInTheDocument();
+    expect(getByText('Carolyn Moore')).toBeInTheDocument();
+    expect(getByText('carolyn.moore@example.com')).toBeInTheDocument();
+    expect(nationality[0]).toBeInTheDocument();
+  });
+});