feat: track demo page and add demo banner #4 (#11)

Author: Rehan van der Merwe

docs/API.md

@@ -370,6 +370,7 @@ const domain: Domain = { ... }
 | <code><a href="#serverless-website-analytics.Domain.property.certificate">certificate</a></code> | <code>aws-cdk-lib.aws_certificatemanager.ICertificate</code> | The certificate to use for the domain. |
 | <code><a href="#serverless-website-analytics.Domain.property.name">name</a></code> | <code>string</code> | Name of the domain to use for the site, example: `serverless-website-analytics.com`. |
 | <code><a href="#serverless-website-analytics.Domain.property.hostedZone">hostedZone</a></code> | <code>aws-cdk-lib.aws_route53.IHostedZone</code> | Optional, if not specified then no DNS records will be created. |
+| <code><a href="#serverless-website-analytics.Domain.property.trackOwnDomain">trackOwnDomain</a></code> | <code>boolean</code> | Optional, if specified, it adds tracking to the dashboard. |
 
 ---
 
@@ -417,6 +418,21 @@ the domain, for example: `{auth.cognito.loginSubDomain}.{domain.name}`.
 
 ---
 
+##### `trackOwnDomain`<sup>Optional</sup> <a name="trackOwnDomain" id="serverless-website-analytics.Domain.property.trackOwnDomain"></a>
+
+```typescript
+public readonly trackOwnDomain: boolean;
+```
+
+- *Type:* boolean
+
+Optional, if specified, it adds tracking to the dashboard.
+
+This is useful if you want to see the usage of
+the serverless-website-analytics dashboard page.
+
+---
+
 ### SwaAuth <a name="SwaAuth" id="serverless-website-analytics.SwaAuth"></a>
 
 The auth configuration which defaults to none.
@@ -628,6 +644,7 @@ const swaProps: SwaProps = { ... }
 | <code><a href="#serverless-website-analytics.SwaProps.property.sites">sites</a></code> | <code>string[]</code> | The list of allowed sites. |
 | <code><a href="#serverless-website-analytics.SwaProps.property.auth">auth</a></code> | <code><a href="#serverless-website-analytics.SwaAuth">SwaAuth</a></code> | The auth configuration which defaults to none. |
 | <code><a href="#serverless-website-analytics.SwaProps.property.domain">domain</a></code> | <code><a href="#serverless-website-analytics.Domain">Domain</a></code> | If specified, it will create the CloudFront and Cognito resources at the specified domain and optionally create the DNS records in the specified Route53 hosted zone. |
+| <code><a href="#serverless-website-analytics.SwaProps.property.isDemoPage">isDemoPage</a></code> | <code>boolean</code> | If specified, adds the banner at the top of the page linking back to the open source project. |
 
 ---
 
@@ -720,5 +737,17 @@ Cognito(`auth.us-east-1.amazoncognito.com`) domains. You can read the website UR
 
 ---
 
+##### `isDemoPage`<sup>Optional</sup> <a name="isDemoPage" id="serverless-website-analytics.SwaProps.property.isDemoPage"></a>
+
+```typescript
+public readonly isDemoPage: boolean;
+```
+
+- *Type:* boolean
+
+If specified, adds the banner at the top of the page linking back to the open source project.
+
+---
+
 
 

src/backend.ts

@@ -107,7 +107,11 @@ export function backend(
     ...defaultNodeJsFuncOpt,
     memorySize: 1024,
     timeout: Duration.seconds(frontLambdaTimeOut),
-    environment: env,
+    environment: {
+      ...env,
+      TRACK_OWN_DOMAIN: props?.domain?.trackOwnDomain ? 'true' : 'false',
+      IS_DEMO_PAGE: props.isDemoPage ? 'true' : 'false',
+    },
     reservedConcurrentExecutions: 100,
   });
   apiFrontLambda.addToRolePolicy(

src/index.ts

@@ -90,6 +90,12 @@ export interface Domain {
    * the domain, for example: `{auth.cognito.loginSubDomain}.{domain.name}`.
    */
   readonly hostedZone?: route53.IHostedZone;
+
+  /**
+   * Optional, if specified, it adds tracking to the dashboard. This is useful if you want to see the usage of
+   * the serverless-website-analytics dashboard page.
+   */
+  readonly trackOwnDomain?: boolean;
 }
 
 export interface SwaProps {
@@ -131,6 +137,11 @@ export interface SwaProps {
    * Cognito(`auth.us-east-1.amazoncognito.com`) domains. You can read the website URL from the stack output.
    */
   readonly domain?: Domain;
+
+  /**
+   * If specified, adds the banner at the top of the page linking back to the open source project.
+   */
+  readonly isDemoPage?: boolean;
 }
 
 export class Swa extends Construct {
@@ -148,6 +159,11 @@ export class Swa extends Construct {
       }
     }
 
+    if (props?.domain?.trackOwnDomain) {
+      props.sites.push(props.domain.name);
+      props.allowedOrigins.push(`https://${props.domain.name}`);
+    }
+
     const authProps = auth(scope, name, props);
     const backendAnalyticsProps = backendAnalytics(scope, name, props);
     const backendProps = backend(scope, name, props, authProps, backendAnalyticsProps);

src/src/backend/api-front/environment.ts

@@ -18,25 +18,37 @@ export class LambdaEnvironment {
   static COGNITO_CLIENT_ID: string | undefined;
   static COGNITO_HOSTED_UI_URL: string | undefined;
 
+  static TRACK_OWN_DOMAIN: boolean;
+  static IS_DEMO_PAGE: boolean;
+
   static init() {
     const schema = z.object({
       AWS_REGION: z.string(),
       ENVIRONMENT: z.string(),
       VERSION: z.string(),
-      TIMEOUT: z.string(),
+      TIMEOUT: z.string().transform((v) => Number(v)),
       LOG_LEVEL: z.string(),
-      ENRICH_RETURNED_ERRORS: z.string(),
+      ENRICH_RETURNED_ERRORS: z.string().transform((v) => Boolean(v) && v !== 'false'),
 
       ANALYTICS_BUCKET: z.string(),
       ANALYTICS_GLUE_DB_NAME: z.string(),
-      SITES: z.string(),
+      SITES: z.string().transform((v) => JSON.parse(v) as string[]),
 
       COGNITO_USER_POOL_ID: z.string().optional(),
       COGNITO_CLIENT_ID: z.string().optional(),
       COGNITO_HOSTED_UI_URL: z.string().optional(),
-    });
 
+      TRACK_OWN_DOMAIN: z
+        .string()
+        .optional()
+        .transform((v) => Boolean(v) && v !== 'false'),
+      IS_DEMO_PAGE: z
+        .string()
+        .optional()
+        .transform((v) => Boolean(v) && v !== 'false'),
+    });
     const parsed = schema.safeParse(process.env);
+
     if (!parsed.success) {
       console.error(parsed.error);
       throw new Error('Environment Variable Parse Error');
@@ -45,13 +57,9 @@ export class LambdaEnvironment {
     for (const key in parsed.data) {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore we know this is safe
-      this[key] = process.env[key];
+      this[key] = parsed.data[key];
     }
 
-    this.TIMEOUT = Number(this.TIMEOUT);
     this.ANALYTICS_BUCKET_ATHENA_PATH = 's3://' + this.ANALYTICS_BUCKET + '/athena-results';
-    this.ENRICH_RETURNED_ERRORS = Boolean(this.ENRICH_RETURNED_ERRORS);
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    this.SITES = JSON.parse(process.env.SITES!) as string[];
   }
 }

src/src/backend/api-front/routes/env/index.ts

@@ -4,6 +4,8 @@ import { LambdaEnvironment } from '@backend/api-front/environment';
 
 const FrontendEnvironmentSchema = z.object({
   cognitoLoginUrl: z.string().optional(),
+  trackOwnDomain: z.boolean().optional(),
+  isDemoPage: z.boolean().optional(),
 });
 export type FrontendEnvironment = z.infer<typeof FrontendEnvironmentSchema>;
 
@@ -20,6 +22,8 @@ export function getFrontendEnvironment(trpcInstance: TrpcInstance) {
       }
       return {
         cognitoLoginUrl,
+        trackOwnDomain: LambdaEnvironment.TRACK_OWN_DOMAIN,
+        isDemoPage: LambdaEnvironment.IS_DEMO_PAGE,
       };
     });
 }

src/src/frontend/.env.development

@@ -1 +1,2 @@
 VITE_FRONTEND_URL=http://localhost:3001/api
+VITE_INGEST_URL=http://localhost:3000

src/src/frontend/.env.production

@@ -1 +1,2 @@
 VITE_FRONTEND_URL=/api
+VITE_INGEST_URL=