diff --git a/packages/cli/templates/default-backend-module.yaml b/packages/cli/templates/default-backend-module.yaml
index 9973e17410..45dde4e438 100644
--- a/packages/cli/templates/default-backend-module.yaml
+++ b/packages/cli/templates/default-backend-module.yaml
@@ -5,3 +5,5 @@ role: backend-plugin-module
additionalActions:
- install-backend
- add-backend
+templateValues:
+ moduleVar: '{{ camelCase pluginId }}Module{{ upperFirst ( camelCase moduleId ) }}'
diff --git a/packages/cli/templates/default-backend-module/README.md.hbs b/packages/cli/templates/default-backend-module/README.md.hbs
index 3fb632e1af..b389ac8d1e 100644
--- a/packages/cli/templates/default-backend-module/README.md.hbs
+++ b/packages/cli/templates/default-backend-module/README.md.hbs
@@ -1,5 +1,5 @@
-# {{name}}
+# {{packageName}}
-The {{moduleId}} backend module for the {{id}} plugin.
+The {{moduleId}} backend module for the {{pluginId}} plugin.
_This plugin was created through the Backstage CLI_
diff --git a/packages/cli/templates/default-backend-module/package.json.hbs b/packages/cli/templates/default-backend-module/package.json.hbs
index 39d4ae00dc..2aa648fbc0 100644
--- a/packages/cli/templates/default-backend-module/package.json.hbs
+++ b/packages/cli/templates/default-backend-module/package.json.hbs
@@ -1,7 +1,7 @@
{
- "name": "{{name}}",
- "description": "The {{moduleId}} backend module for the {{id}} plugin.",
- "version": "{{pluginVersion}}",
+ "name": "{{packageName}}",
+ "description": "The {{moduleId}} backend module for the {{pluginId}} plugin.",
+ "version": "{{packageVersion}}",
"main": "src/index.ts",
"types": "src/index.ts",
"license": "{{license}}",
diff --git a/packages/cli/templates/default-backend-module/src/index.ts.hbs b/packages/cli/templates/default-backend-module/src/index.ts.hbs
index 9f70884d59..7075598e13 100644
--- a/packages/cli/templates/default-backend-module/src/index.ts.hbs
+++ b/packages/cli/templates/default-backend-module/src/index.ts.hbs
@@ -1,6 +1,6 @@
/***/
/**
- * The {{moduleId}} backend module for the {{id}} plugin.
+ * The {{moduleId}} backend module for the {{pluginId}} plugin.
*
* @packageDocumentation
*/
diff --git a/packages/cli/templates/default-backend-module/src/module.ts.hbs b/packages/cli/templates/default-backend-module/src/module.ts.hbs
index b0fb48b4ef..64445871b2 100644
--- a/packages/cli/templates/default-backend-module/src/module.ts.hbs
+++ b/packages/cli/templates/default-backend-module/src/module.ts.hbs
@@ -4,7 +4,7 @@ import {
} from '@backstage/backend-plugin-api';
export const {{moduleVar}} = createBackendModule({
- pluginId: '{{id}}',
+ pluginId: '{{pluginId}}',
moduleId: '{{moduleId}}',
register(reg) {
reg.registerInit({
diff --git a/packages/cli/templates/default-backend-plugin.yaml b/packages/cli/templates/default-backend-plugin.yaml
index cc085044d2..6082363f5b 100644
--- a/packages/cli/templates/default-backend-plugin.yaml
+++ b/packages/cli/templates/default-backend-plugin.yaml
@@ -5,3 +5,5 @@ role: backend-plugin
additionalActions:
- install-backend
- add-backend
+templateValues:
+ pluginVar: '{{ camelCase pluginId }}Plugin'
diff --git a/packages/cli/templates/default-backend-plugin/README.md.hbs b/packages/cli/templates/default-backend-plugin/README.md.hbs
index 00e83a33ec..76189c07c2 100644
--- a/packages/cli/templates/default-backend-plugin/README.md.hbs
+++ b/packages/cli/templates/default-backend-plugin/README.md.hbs
@@ -1,14 +1,14 @@
-# {{id}}
+# {{pluginId}}
This plugin backend was templated using the Backstage CLI. You should replace this text with a description of your plugin backend.
## Installation
-This plugin is installed via the `{{name}}` package. To install it to your backend package, run the following command:
+This plugin is installed via the `{{packageName}}` package. To install it to your backend package, run the following command:
```bash
# From your root directory
-yarn --cwd packages/backend add {{name}}
+yarn --cwd packages/backend add {{packageName}}
```
Then add the plugin to your backend in `packages/backend/src/index.ts`:
@@ -16,7 +16,7 @@ Then add the plugin to your backend in `packages/backend/src/index.ts`:
```ts
const backend = createBackend();
// ...
-backend.add(import('{{name}}'));
+backend.add(import('{{packageName}}'));
```
## Development
diff --git a/packages/cli/templates/default-backend-plugin/dev/index.ts.hbs b/packages/cli/templates/default-backend-plugin/dev/index.ts.hbs
index ce1d2919c9..765031bb97 100644
--- a/packages/cli/templates/default-backend-plugin/dev/index.ts.hbs
+++ b/packages/cli/templates/default-backend-plugin/dev/index.ts.hbs
@@ -11,17 +11,17 @@ import { catalogServiceMock } from '@backstage/plugin-catalog-node/testUtils';
//
// Create a new todo item, standalone or for the sample component:
//
-// curl http://localhost:7007/api/{{id}}/todos -H 'Content-Type: application/json' -d '{"title": "My Todo"}'
-// curl http://localhost:7007/api/{{id}}/todos -H 'Content-Type: application/json' -d '{"title": "My Todo", "entityRef": "component:default/sample"}'
+// curl http://localhost:7007/api/{{pluginId}}/todos -H 'Content-Type: application/json' -d '{"title": "My Todo"}'
+// curl http://localhost:7007/api/{{pluginId}}/todos -H 'Content-Type: application/json' -d '{"title": "My Todo", "entityRef": "component:default/sample"}'
//
// List TODOs:
//
-// curl http://localhost:7007/api/{{id}}/todos
+// curl http://localhost:7007/api/{{pluginId}}/todos
//
// Explicitly make an unauthenticated request, or with service auth:
//
-// curl http://localhost:7007/api/{{id}}/todos -H 'Authorization: Bearer mock-none-token'
-// curl http://localhost:7007/api/{{id}}/todos -H 'Authorization: Bearer mock-service-token'
+// curl http://localhost:7007/api/{{pluginId}}/todos -H 'Authorization: Bearer mock-none-token'
+// curl http://localhost:7007/api/{{pluginId}}/todos -H 'Authorization: Bearer mock-service-token'
const backend = createBackend();
diff --git a/packages/cli/templates/default-backend-plugin/package.json.hbs b/packages/cli/templates/default-backend-plugin/package.json.hbs
index 2f7c0931d8..3acb1b2f44 100644
--- a/packages/cli/templates/default-backend-plugin/package.json.hbs
+++ b/packages/cli/templates/default-backend-plugin/package.json.hbs
@@ -1,6 +1,6 @@
{
- "name": "{{name}}",
- "version": "{{pluginVersion}}",
+ "name": "{{packageName}}",
+ "version": "{{packageVersion}}",
"main": "src/index.ts",
"types": "src/index.ts",
"license": "{{license}}",
diff --git a/packages/cli/templates/default-backend-plugin/src/plugin.test.ts.hbs b/packages/cli/templates/default-backend-plugin/src/plugin.test.ts.hbs
index b6f387383e..e105c6ebd2 100644
--- a/packages/cli/templates/default-backend-plugin/src/plugin.test.ts.hbs
+++ b/packages/cli/templates/default-backend-plugin/src/plugin.test.ts.hbs
@@ -17,12 +17,12 @@ describe('plugin', () => {
features: [{{pluginVar}}],
});
- await request(server).get('/api/{{id}}/todos').expect(200, {
+ await request(server).get('/api/{{pluginId}}/todos').expect(200, {
items: [],
});
const createRes = await request(server)
- .post('/api/{{id}}/todos')
+ .post('/api/{{pluginId}}/todos')
.send({ title: 'My Todo' });
expect(createRes.status).toBe(201);
@@ -36,13 +36,13 @@ describe('plugin', () => {
const createdTodoItem = createRes.body;
await request(server)
- .get('/api/{{id}}/todos')
+ .get('/api/{{pluginId}}/todos')
.expect(200, {
items: [createdTodoItem],
});
await request(server)
- .get(`/api/{{id}}/todos/${createdTodoItem.id}`)
+ .get(`/api/{{pluginId}}/todos/${createdTodoItem.id}`)
.expect(200, createdTodoItem);
});
@@ -71,7 +71,7 @@ describe('plugin', () => {
});
const createRes = await request(server)
- .post('/api/{{id}}/todos')
+ .post('/api/{{pluginId}}/todos')
.send({ title: 'My Todo', entityRef: 'component:default/my-component' });
expect(createRes.status).toBe(201);
diff --git a/packages/cli/templates/default-backend-plugin/src/plugin.ts.hbs b/packages/cli/templates/default-backend-plugin/src/plugin.ts.hbs
index a9cccc2af2..b71850ea84 100644
--- a/packages/cli/templates/default-backend-plugin/src/plugin.ts.hbs
+++ b/packages/cli/templates/default-backend-plugin/src/plugin.ts.hbs
@@ -12,7 +12,7 @@ import { createTodoListService } from './services/TodoListService';
* @public
*/
export const {{pluginVar}} = createBackendPlugin({
- pluginId: '{{id}}',
+ pluginId: '{{pluginId}}',
register(env) {
env.registerInit({
deps: {
diff --git a/packages/cli/templates/default-common-plugin-package/README.md.hbs b/packages/cli/templates/default-common-plugin-package/README.md.hbs
index 917e18d4b9..c29c19f19b 100644
--- a/packages/cli/templates/default-common-plugin-package/README.md.hbs
+++ b/packages/cli/templates/default-common-plugin-package/README.md.hbs
@@ -1,5 +1,5 @@
-# {{name}}
+# {{packageName}}
-Welcome to the common package for the {{id}} plugin!
+Welcome to the common package for the {{pluginId}} plugin!
_This plugin was created through the Backstage CLI_
diff --git a/packages/cli/templates/default-common-plugin-package/package.json.hbs b/packages/cli/templates/default-common-plugin-package/package.json.hbs
index 689c3e6f53..93c51a9f97 100644
--- a/packages/cli/templates/default-common-plugin-package/package.json.hbs
+++ b/packages/cli/templates/default-common-plugin-package/package.json.hbs
@@ -1,7 +1,7 @@
{
- "name": "{{name}}",
- "description": "Common functionalities for the {{id}} plugin",
- "version": "{{pluginVersion}}",
+ "name": "{{packageName}}",
+ "description": "Common functionalities for the {{pluginId}} plugin",
+ "version": "{{packageVersion}}",
"main": "src/index.ts",
"types": "src/index.ts",
"license": "{{license}}",
diff --git a/packages/cli/templates/default-common-plugin-package/src/index.ts.hbs b/packages/cli/templates/default-common-plugin-package/src/index.ts.hbs
index 6584512572..c347bc7a65 100644
--- a/packages/cli/templates/default-common-plugin-package/src/index.ts.hbs
+++ b/packages/cli/templates/default-common-plugin-package/src/index.ts.hbs
@@ -1,6 +1,6 @@
/***/
/**
- * Common functionalities for the {{id}} plugin.
+ * Common functionalities for the {{pluginId}} plugin.
*
* @packageDocumentation
*/
diff --git a/packages/cli/templates/default-node-plugin-package/README.md.hbs b/packages/cli/templates/default-node-plugin-package/README.md.hbs
index a9fc97935e..7eaa344f7c 100644
--- a/packages/cli/templates/default-node-plugin-package/README.md.hbs
+++ b/packages/cli/templates/default-node-plugin-package/README.md.hbs
@@ -1,5 +1,5 @@
-# {{name}}
+# {{packageName}}
-Welcome to the Node.js library package for the {{id}} plugin!
+Welcome to the Node.js library package for the {{pluginId}} plugin!
_This plugin was created through the Backstage CLI_
diff --git a/packages/cli/templates/default-node-plugin-package/package.json.hbs b/packages/cli/templates/default-node-plugin-package/package.json.hbs
index d58f95b3b2..82dc0aef12 100644
--- a/packages/cli/templates/default-node-plugin-package/package.json.hbs
+++ b/packages/cli/templates/default-node-plugin-package/package.json.hbs
@@ -1,7 +1,7 @@
{
- "name": "{{name}}",
- "description": "Node.js library for the {{id}} plugin",
- "version": "{{pluginVersion}}",
+ "name": "{{packageName}}",
+ "description": "Node.js library for the {{pluginId}} plugin",
+ "version": "{{packageVersion}}",
"main": "src/index.ts",
"types": "src/index.ts",
"license": "{{license}}",
diff --git a/packages/cli/templates/default-node-plugin-package/src/index.ts.hbs b/packages/cli/templates/default-node-plugin-package/src/index.ts.hbs
index 355b35c373..ce180ec7ec 100644
--- a/packages/cli/templates/default-node-plugin-package/src/index.ts.hbs
+++ b/packages/cli/templates/default-node-plugin-package/src/index.ts.hbs
@@ -1,6 +1,6 @@
/***/
/**
- * Node.js library for the {{id}} plugin.
+ * Node.js library for the {{pluginId}} plugin.
*
* @packageDocumentation
*/
diff --git a/packages/cli/templates/default-plugin.yaml b/packages/cli/templates/default-plugin.yaml
index 9dd71394d8..5b855c6765 100644
--- a/packages/cli/templates/default-plugin.yaml
+++ b/packages/cli/templates/default-plugin.yaml
@@ -5,3 +5,6 @@ role: frontend-plugin
additionalActions:
- install-frontend
- add-frontend-legacy
+templateValues:
+ pluginVar: '{{ camelCase pluginId }}Plugin'
+ extensionName: '{{ upperFirst ( camelCase pluginId ) }}Page'
diff --git a/packages/cli/templates/default-plugin/README.md.hbs b/packages/cli/templates/default-plugin/README.md.hbs
index 6d68ca8250..5eae32b7dc 100644
--- a/packages/cli/templates/default-plugin/README.md.hbs
+++ b/packages/cli/templates/default-plugin/README.md.hbs
@@ -1,12 +1,12 @@
-# {{id}}
+# {{pluginId}}
-Welcome to the {{id}} plugin!
+Welcome to the {{pluginId}} plugin!
_This plugin was created through the Backstage CLI_
## Getting started
-Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/{{id}}](http://localhost:3000/{{id}}).
+Your plugin has been added to the example 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}}).
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.
diff --git a/packages/cli/templates/default-plugin/dev/index.tsx.hbs b/packages/cli/templates/default-plugin/dev/index.tsx.hbs
index da6c4fee04..61cd8f2695 100644
--- a/packages/cli/templates/default-plugin/dev/index.tsx.hbs
+++ b/packages/cli/templates/default-plugin/dev/index.tsx.hbs
@@ -7,6 +7,6 @@ createDevApp()
.addPage({
element: <{{ extensionName }} />,
title: 'Root Page',
- path: '/{{ id }}',
+ path: '/{{pluginId}}',
})
.render();
diff --git a/packages/cli/templates/default-plugin/package.json.hbs b/packages/cli/templates/default-plugin/package.json.hbs
index b4034fd742..c19763afad 100644
--- a/packages/cli/templates/default-plugin/package.json.hbs
+++ b/packages/cli/templates/default-plugin/package.json.hbs
@@ -1,6 +1,6 @@
{
- "name": "{{name}}",
- "version": "{{pluginVersion}}",
+ "name": "{{packageName}}",
+ "version": "{{packageVersion}}",
"main": "src/index.ts",
"types": "src/index.ts",
"license": "{{license}}",
diff --git a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs
index c79977f301..81b4dec2c3 100644
--- a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs
+++ b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs
@@ -23,7 +23,7 @@ describe('ExampleComponent', () => {
it('should render', async () => {
await renderInTestApp();
expect(
- screen.getByText('Welcome to {{ id }}!'),
+ screen.getByText('Welcome to {{pluginId}}!'),
).toBeInTheDocument();
});
});
diff --git a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
index 1820671fa5..95a8f044d1 100644
--- a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
+++ b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
@@ -13,7 +13,7 @@ import { ExampleFetchComponent } from '../ExampleFetchComponent';
export const ExampleComponent = () => (
-
+
diff --git a/packages/cli/templates/default-plugin/src/plugin.test.ts.hbs b/packages/cli/templates/default-plugin/src/plugin.test.ts.hbs
index 9d44a9c497..cf27fa33d2 100644
--- a/packages/cli/templates/default-plugin/src/plugin.test.ts.hbs
+++ b/packages/cli/templates/default-plugin/src/plugin.test.ts.hbs
@@ -1,6 +1,6 @@
import { {{ pluginVar }} } from './plugin';
-describe('{{ id }}', () => {
+describe('{{pluginId}}', () => {
it('should export plugin', () => {
expect({{ pluginVar }}).toBeDefined();
});
diff --git a/packages/cli/templates/default-plugin/src/plugin.ts.hbs b/packages/cli/templates/default-plugin/src/plugin.ts.hbs
index 942eacf113..1ae984b20e 100644
--- a/packages/cli/templates/default-plugin/src/plugin.ts.hbs
+++ b/packages/cli/templates/default-plugin/src/plugin.ts.hbs
@@ -6,7 +6,7 @@ import {
import { rootRouteRef } from './routes';
export const {{ pluginVar }} = createPlugin({
- id: '{{ id }}',
+ id: '{{pluginId}}',
routes: {
root: rootRouteRef,
},
diff --git a/packages/cli/templates/default-plugin/src/routes.ts.hbs b/packages/cli/templates/default-plugin/src/routes.ts.hbs
index 7e5d8f85f0..491b05d933 100644
--- a/packages/cli/templates/default-plugin/src/routes.ts.hbs
+++ b/packages/cli/templates/default-plugin/src/routes.ts.hbs
@@ -1,5 +1,5 @@
import { createRouteRef } from '@backstage/core-plugin-api';
export const rootRouteRef = createRouteRef({
- id: '{{ id }}',
+ id: '{{pluginId}}',
});
diff --git a/packages/cli/templates/default-react-plugin-package/README.md.hbs b/packages/cli/templates/default-react-plugin-package/README.md.hbs
index ab1c36da6b..8d8647399a 100644
--- a/packages/cli/templates/default-react-plugin-package/README.md.hbs
+++ b/packages/cli/templates/default-react-plugin-package/README.md.hbs
@@ -1,5 +1,5 @@
-# {{name}}
+# {{packageName}}
-Welcome to the web library package for the {{id}} plugin!
+Welcome to the web library package for the {{pluginId}} plugin!
_This plugin was created through the Backstage CLI_
diff --git a/packages/cli/templates/default-react-plugin-package/package.json.hbs b/packages/cli/templates/default-react-plugin-package/package.json.hbs
index bea066630f..f133fe289e 100644
--- a/packages/cli/templates/default-react-plugin-package/package.json.hbs
+++ b/packages/cli/templates/default-react-plugin-package/package.json.hbs
@@ -1,7 +1,7 @@
{
- "name": "{{name}}",
- "description": "Web library for the {{id}} plugin",
- "version": "{{pluginVersion}}",
+ "name": "{{packageName}}",
+ "description": "Web library for the {{pluginId}} plugin",
+ "version": "{{packageVersion}}",
"main": "src/index.ts",
"types": "src/index.ts",
"license": "{{license}}",
diff --git a/packages/cli/templates/default-react-plugin-package/src/index.ts.hbs b/packages/cli/templates/default-react-plugin-package/src/index.ts.hbs
index 9b22677a3e..70f1987895 100644
--- a/packages/cli/templates/default-react-plugin-package/src/index.ts.hbs
+++ b/packages/cli/templates/default-react-plugin-package/src/index.ts.hbs
@@ -1,6 +1,6 @@
/***/
/**
- * Web library for the {{id}} plugin.
+ * Web library for the {{pluginId}} plugin.
*
* @packageDocumentation
*/
diff --git a/packages/cli/templates/node-library-package/README.md.hbs b/packages/cli/templates/node-library-package/README.md.hbs
index 0e2813c87a..0f5f9a08b6 100644
--- a/packages/cli/templates/node-library-package/README.md.hbs
+++ b/packages/cli/templates/node-library-package/README.md.hbs
@@ -1,4 +1,4 @@
-# {{name}}
+# {{packageName}}
_This package was created through the Backstage CLI_.
@@ -8,5 +8,5 @@ Install the package via Yarn:
```sh
cd # if within a monorepo
-yarn add {{name}}
+yarn add {{packageName}}
```
diff --git a/packages/cli/templates/node-library-package/package.json.hbs b/packages/cli/templates/node-library-package/package.json.hbs
index d56a51bcd6..15e88daeb5 100644
--- a/packages/cli/templates/node-library-package/package.json.hbs
+++ b/packages/cli/templates/node-library-package/package.json.hbs
@@ -1,6 +1,6 @@
{
- "name": "{{name}}",
- "version": "{{pluginVersion}}",
+ "name": "{{packageName}}",
+ "version": "{{packageVersion}}",
"main": "src/index.ts",
"types": "src/index.ts",
"license": "{{license}}",
diff --git a/packages/cli/templates/scaffolder-module.yaml b/packages/cli/templates/scaffolder-module.yaml
index cf206bf51c..4fa3905a26 100644
--- a/packages/cli/templates/scaffolder-module.yaml
+++ b/packages/cli/templates/scaffolder-module.yaml
@@ -4,6 +4,8 @@ targetPath: plugins
role: backend-plugin-module
params:
pluginId: scaffolder
+templateValues:
+ moduleVar: '{{ camelCase pluginId }}Module{{ upperFirst ( camelCase moduleId ) }}'
additionalActions:
- install-backend
- add-backend
diff --git a/packages/cli/templates/scaffolder-module/README.md.hbs b/packages/cli/templates/scaffolder-module/README.md.hbs
index 96396f0e4c..141699922d 100644
--- a/packages/cli/templates/scaffolder-module/README.md.hbs
+++ b/packages/cli/templates/scaffolder-module/README.md.hbs
@@ -1,4 +1,4 @@
-# {{name}}
+# {{packageName}}
The {{moduleId}} module for [@backstage/plugin-scaffolder-backend](https://www.npmjs.com/package/@backstage/plugin-scaffolder-backend).
diff --git a/packages/cli/templates/scaffolder-module/package.json.hbs b/packages/cli/templates/scaffolder-module/package.json.hbs
index 7f613baebe..fd6b1a4c7f 100644
--- a/packages/cli/templates/scaffolder-module/package.json.hbs
+++ b/packages/cli/templates/scaffolder-module/package.json.hbs
@@ -1,7 +1,7 @@
{
- "name": "{{name}}",
+ "name": "{{packageName}}",
"description": "The {{moduleId}} module for @backstage/plugin-scaffolder-backend",
- "version": "{{pluginVersion}}",
+ "version": "{{packageVersion}}",
"main": "src/index.ts",
"types": "src/index.ts",
"license": "{{license}}",
diff --git a/packages/cli/templates/web-library-package/README.md.hbs b/packages/cli/templates/web-library-package/README.md.hbs
index 0e2813c87a..0f5f9a08b6 100644
--- a/packages/cli/templates/web-library-package/README.md.hbs
+++ b/packages/cli/templates/web-library-package/README.md.hbs
@@ -1,4 +1,4 @@
-# {{name}}
+# {{packageName}}
_This package was created through the Backstage CLI_.
@@ -8,5 +8,5 @@ Install the package via Yarn:
```sh
cd # if within a monorepo
-yarn add {{name}}
+yarn add {{packageName}}
```
diff --git a/packages/cli/templates/web-library-package/package.json.hbs b/packages/cli/templates/web-library-package/package.json.hbs
index 64a693dd4c..e63fe5f218 100644
--- a/packages/cli/templates/web-library-package/package.json.hbs
+++ b/packages/cli/templates/web-library-package/package.json.hbs
@@ -1,6 +1,6 @@
{
- "name": "{{name}}",
- "version": "{{pluginVersion}}",
+ "name": "{{packageName}}",
+ "version": "{{packageVersion}}",
"main": "src/index.ts",
"types": "src/index.ts",
"license": "{{license}}",