Add /dev endpoint

Signed-off-by: sriram ramakrishnan <sramakr@gmail.com>

plugins/analytics-module-ga4/README.md

@@ -186,7 +186,15 @@ normally `gitignore`'d but loaded and merged in when Backstage is bootstrapped.
 If you would like to contribute improvements to this plugin, the easiest way to
 make and test changes is to do the following:
 
-See the [Developer documentation](development.md) for instructions on how to get started developing this plugin.
+1. Clone the main Backstage monorepo `git clone git@github.com:backstage/backstage.git`
+2. Install all dependencies `yarn install`
+3. If one does not exist, create an `app-config.local.yaml` file in the root of
+   the monorepo and add config for this plugin (see below)
+4. Enter this plugin's working directory: `cd plugins/analytics-provider-ga4`
+5. Start the plugin in isolation: `yarn start`
+6. Navigate to the playground page at `http://localhost:3000/ga4`
+7. Open the web console to see events fire when you navigate or when you
+   interact with instrumented components.
 
 Code for the isolated version of the plugin can be found inside the [/dev](./dev)
 directory. Changes to the plugin are hot-reloaded.

plugins/analytics-module-ga4/dev/Playground.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Link } from '@backstage/core-components';
+
+export const Playground = () => {
+  return (
+    <>
+      <Link to="#clicked">Click Here</Link>
+    </>
+  );
+};

plugins/analytics-module-ga4/dev/index.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { createDevApp } from '@backstage/dev-utils';
+import { Playground } from './Playground';
+
+import { createPlugin } from '@backstage/core-plugin-api';
+
+/**
+ * @deprecated Importing and including this plugin in an app has no effect.
+ * This will be removed in a future release.
+ *
+ * @public
+ */
+export const analyticsModuleGA4 = createPlugin({
+  id: 'analytics-provider-ga4',
+});
+createDevApp()
+  .registerPlugin(analyticsModuleGA4)
+  .addPage({
+    path: '/ga4',
+    title: 'GA4 Playground',
+    element: <Playground />,
+  })
+  .render();