@seeka-labs/cli-apps 2.2.5 → 3.2.3

package/dist/init-template/app/server-azurefunc/src/app/api/router.ts

@@ -0,0 +1,14 @@
+import { ExampleAppAppInstallState } from "@example-org-name/example-app-name-lib";
+import {getInstallationSettings} from "./routes/getInstallationSettings";
+import {setInstallationSettings} from "./routes/setInstallationSettings";
+import { SeekaAppInstallContext } from "@seeka-labs/sdk-apps-core";
+import { Logger } from "winston";
+import { AppUiHttpRequestResponse, HttpMethod } from "@seeka-labs/sdk-apps-server-host";
+import {HttpRequest, InvocationContext} from "@azure/functions";
+
+export const apiRouteHandler = async (req: HttpRequest, context: InvocationContext, requestedPath: string, requestedMethod: HttpMethod, installation: SeekaAppInstallContext<ExampleAppAppInstallState>, logger: Logger ): Promise<AppUiHttpRequestResponse | null> => {
+    if (requestedPath === '/api/settings' && requestedMethod === 'GET') return await getInstallationSettings(installation, req, context, logger);
+    if (requestedPath === '/api/settings' && requestedMethod === 'POST') return await setInstallationSettings(installation, req, context, logger);
+
+    return null;
+}

package/dist/init-template/app/server-azurefunc/src/app/api/routes/getInstallationSettings.ts

@@ -0,0 +1,13 @@
+import { HttpRequest, HttpResponseInit, InvocationContext } from "@azure/functions";
+import { ExampleAppAppInstallContext, ExampleAppAppInstallSettings } from "@example-org-name/example-app-name-lib";
+import { AppUiHttpRequestResponse } from "@seeka-labs/sdk-apps-server-host";
+import { Logger } from "winston";
+
+export const getInstallationSettings = async (installation: ExampleAppAppInstallContext, req: HttpRequest, context: InvocationContext, logger: Logger): Promise<AppUiHttpRequestResponse> => {
+    // Important to not expose any sensitive data to the client via this endpoint
+    // Be selective, no spread operator here, only the fields you want to expose
+     return {
+        status: 200,
+        jsonBody: installation.installationState?.installationSettings as ExampleAppAppInstallSettings
+    }
+}

package/dist/init-template/app/server-azurefunc/src/app/api/routes/setInstallationSettings.ts

@@ -0,0 +1,35 @@
+import { HttpRequest, InvocationContext } from "@azure/functions";
+import { Logger } from "winston";
+
+import { ExampleAppAppInstallContext, ExampleAppAppInstallSettings, validateInstallationSettings } from "@example-org-name/example-app-name-lib";
+import { AppUiHttpRequestResponse, createOrUpdateInstallation } from "@seeka-labs/sdk-apps-server-host";
+
+export const setInstallationSettings = async (installation: ExampleAppAppInstallContext, req: HttpRequest, context: InvocationContext, logger: Logger): Promise<AppUiHttpRequestResponse> => {
+    // Validate
+    const newSettings = (await req.json()) as ExampleAppAppInstallSettings  | null;
+    if (!newSettings) {
+        return {
+            status: 400,
+            jsonBody: { error: 'Settings are required' }
+        };
+    }
+
+    const error = await validateInstallationSettings(newSettings, logger);
+    if (error) return {
+        status: 400,
+        jsonBody: { error }
+    }
+
+    installation.installationState = {
+        ...installation.installationState,
+        installationSettings: {
+            ...installation.installationState.installationSettings,
+            ...newSettings
+        }
+    };
+    await createOrUpdateInstallation(installation, logger);
+
+    return {
+        status: 200
+    };
+}

package/dist/init-template/app/server-azurefunc/src/app/jobs/index.ts

@@ -0,0 +1,61 @@
+import { QueueClient, QueueSendMessageOptions } from '@azure/storage-queue';
+import type { Logger } from 'winston';
+import {BackgroundJobRequestContext} from "@seeka-labs/sdk-apps-server-host";
+
+export const queueNames = {
+    trackActivity: 'activity-track-queue',
+}
+
+export const triggerBackgroundJob = async <TPayload>(queueName: string, context: BackgroundJobRequestContext<TPayload>, logger: Logger, queueSendOptions?: QueueSendMessageOptions): Promise<void> => {
+    const queueClient = new QueueClient(process.env.AzureWebJobsStorage as string, queueName);
+    return await triggerBackgroundJobWithQueue(queueClient, context, logger, queueSendOptions);
+}
+
+const serialiseQueuePayload = (payload: unknown): string => {
+    const jsonString = JSON.stringify(payload)
+    return Buffer.from(jsonString).toString('base64')
+}
+
+export const deserialiseQueuePayload = <TPayload>(payload: string): TPayload => {
+    const jsonString = Buffer.from(payload, 'base64').toString()
+    return JSON.parse(jsonString) as TPayload;
+}
+
+export const triggerBackgroundJobWithQueue = async <TPayload>(queueClient: QueueClient, context: BackgroundJobRequestContext<TPayload>, logger: Logger, queueSendOptions?: QueueSendMessageOptions): Promise<void> => {
+    const body = {
+        ...context
+    }
+    const bodyStr = serialiseQueuePayload(body);
+
+    const response = await queueClient.sendMessage(bodyStr, queueSendOptions);
+
+    if (response.errorCode) {
+        const { requestId, date, errorCode } = response;
+        logger.error("Failed to trigger background job", { body, requestId, date, errorCode })
+        throw new Error(`Failed to trigger background job: ${response.errorCode}`);
+    }
+    else {
+        logger.info("Background job triggered for " + queueClient.name, { body, messageId: response.messageId, context })
+    }
+}
+
+export const sendQueueMessageToPoisonQueue = async <TPayload>(queueName: string, context: BackgroundJobRequestContext<TPayload>, logger: Logger): Promise<void> => {
+    const body = {
+        ...context
+    }
+    const bodyStr = serialiseQueuePayload(body);
+
+    // https://learn.microsoft.com/en-us/azure/azure-functions/functions-bindings-storage-queue-trigger?tabs=python-v2%2Cisolated-process%2Cnodejs-v4%2Cextensionv5&pivots=programming-language-typescript#poison-messages
+    const queueClient = new QueueClient(process.env.AzureWebJobsStorage as string, `${queueName}-poison`);
+
+    const response = await queueClient.sendMessage(bodyStr, { messageTimeToLive: -1 });
+
+    if (response.errorCode) {
+        const { requestId, date, errorCode } = response;
+        logger.error("Failed to push to poison queue", { body, requestId, date, errorCode })
+        throw new Error(`Failed to push to poison queue: ${response.errorCode}`);
+    }
+    else {
+        logger.verbose("Message pushed to poison queue", { body, messageId: response.messageId, context })
+    }
+}

package/dist/init-template/app/server-azurefunc/src/app/logging/index.ts

@@ -0,0 +1,4 @@
+import * as packageJson from '../../../package.json';
+import {registerSeekaAppOpenTelemetry} from "@seeka-labs/sdk-apps-server-telemetry-logging";
+
+registerSeekaAppOpenTelemetry(packageJson.name, packageJson.version, 'azure', 'azure_function', process.env);

package/dist/init-template/app/server-azurefunc/src/app/models/index.ts

@@ -0,0 +1,12 @@
+
+import {SeekaActivityAcceptedWebhookContent} from "@seeka-labs/sdk-apps-server";
+import { BackgroundJobRequestContext } from "@seeka-labs/sdk-apps-server-host";
+
+export type TrackExampleAppActivityQueueItem = BackgroundJobRequestContext<TrackSeekaExampleAppActivityPayload> & {
+
+}
+
+export type TrackSeekaExampleAppActivityPayload = {
+    seekaActivity: SeekaActivityAcceptedWebhookContent
+}
+

package/dist/init-template/app/server-azurefunc/src/app/services/activites.ts

@@ -0,0 +1,8 @@
+
+import {Logger} from "winston";
+import {TrackSeekaExampleAppActivityPayload} from "../models";
+import {SeekaAppInstallContext} from "@seeka-labs/sdk-apps-core";
+
+export const sendActivityToAnotherSoftware = async (payload: TrackSeekaExampleAppActivityPayload, installation: SeekaAppInstallContext<any>, causationId: string, correlationId: string, logger: Logger): Promise<void> => {
+ // Anything
+}

package/dist/init-template/app/{server-azure-function → server-azurefunc}/src/functions/healthCheck.ts

@@ -1,13 +1,19 @@
 import { app, HttpRequest, HttpResponseInit, InvocationContext } from '@azure/functions';
+import { appLogger } from "@seeka-labs/sdk-apps-server-host";
 
 app.http('healthCheck', {
     methods: ['GET', 'HEAD'],
     authLevel: 'anonymous',
-    route: 'health',
+    route: 'api/health',
     handler: healthCheck
 });
 
 export async function healthCheck(req: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
+    // await otelPing('healthcheck.ping', { route: 'api/health' });
+
+    // logger.verbose('Health check request received', { status: res.status, url: req.url });
+    appLogger.verbose('Health check', { url: req.url });
+
     return {
         status: 200
     }

package/dist/init-template/app/server-azurefunc/src/functions/seekaAppWebhook.ts

@@ -0,0 +1,201 @@
+import * as winston from 'winston';
+
+import {app, HttpRequest, HttpResponseInit, InvocationContext} from '@azure/functions';
+import {
+    SeekaActivityAcceptedWebhookPayload, SeekaAppInstalledWebhookPayload,
+    SeekaAppUninstalledWebhookPayload,
+    SeekaIdentityChangedWebhookPayload, SeekaWebhookCallType, SeekaWebhookPayload,
+    throwOnInvalidWebhookSignature
+} from '@seeka-labs/sdk-apps-server';
+
+import {tryGetInstallation,
+    createOrUpdateInstallation, deleteInstallation, getSeekaBrowserPlugin, startServices,
+    webhookLogger,
+    childLogger,
+} from '@seeka-labs/sdk-apps-server-host';
+
+import { validateInstallationSettings, ExampleAppAppBrowserSdkPluginConfig, ExampleAppAppInstallContext} from '@example-org-name/example-app-name-lib'
+
+import type {Logger} from 'winston';
+import {queueNames, triggerBackgroundJob} from '../app/jobs';
+import {TrackExampleAppActivityQueueItem} from "../app/models";
+
+app.http('seekaAppWebhook', {
+    methods: ['POST'],
+    authLevel: 'anonymous',
+    route: 'api/webhook/seeka/app',
+    handler: seekaAppWebhook
+});
+
+export async function seekaAppWebhook(req: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
+    const bodyStr = (await req.text()) as string;
+    if (!bodyStr) {
+        return {
+            status: 400,
+            jsonBody: {error: "Body missing. Ensure body is present and either specify the Content-Length request header OR set Transfer-Encoding request header to 'chunked'"}
+        }
+    }
+    const body = JSON.parse(bodyStr) as SeekaWebhookPayload;
+
+    let logger = webhookLogger(body, context);
+    logger.profile('http.seeka.webhook.app')
+    logger.verbose('Received webhook from Seeka', {body});
+
+    // Handle probe
+    if (body.type === SeekaWebhookCallType.Probe) {
+        return {
+            status: 204
+        }
+    }
+
+    // Validate webhook
+    try {
+        throwOnInvalidWebhookSignature(process.env.SEEKA_APP_SECRET as string, req.headers as Headers, bodyStr);
+        logger.debug('Webhook signature validated', {body});
+    } catch {
+        logger.warn('Webhook signature invalid', {body});
+        return {
+            status: 401,
+            jsonBody: {error: "Webhook call invalid"}
+        }
+    }
+
+    if (body.isTest) {
+        // This is a test webhook call
+        return {
+            status: 204
+        }
+    }
+
+    await startServices(logger);
+
+    // Check if the webhook is for an app we have installed
+    let installation: ExampleAppAppInstallContext | null = null;
+    if (body.type != SeekaWebhookCallType.AppInstalled) {
+        installation = await tryGetInstallation((body as SeekaAppInstalledWebhookPayload).context?.applicationInstallId as string, false, logger);
+        if (installation == null) {
+            logger.warn('Webhook call cannot be processed as the installation ID is not known by this app', {body});
+
+            return {
+                status: 422,
+                jsonBody: {error: "App not installed"}
+            }
+        }
+    }
+
+    logger = childLogger(null, installation, logger, context);
+
+    // Do something
+    let errorMessage: string | null = null;
+    try {
+        switch (body.type) {
+            case SeekaWebhookCallType.AppInstalled: {
+                errorMessage = await onInstallation(body as SeekaAppInstalledWebhookPayload, logger);
+                break;
+            }
+            case SeekaWebhookCallType.AppUninstalled: {
+                if (!body.isTest) {
+                    const payload = body as SeekaAppUninstalledWebhookPayload;
+                    await deleteInstallation(payload.context?.applicationInstallId as string, logger)
+                }
+                break;
+            }
+            case SeekaWebhookCallType.ActivityAccepted: {
+                const payload = body as SeekaActivityAcceptedWebhookPayload;
+                await handleSeekaActivity(payload, installation, context, logger);
+
+                break;
+            }
+            case SeekaWebhookCallType.IdentityChanged: {
+                const payload = body as SeekaIdentityChangedWebhookPayload;
+
+                logger.debug('Identity changed webhook received', {personId: payload.content.personId });
+
+                break;
+            }
+
+            case SeekaWebhookCallType.BrowserSdkPlugin: {
+                // Configuration object passed to the Seeka browser plugin
+                // Under no circumstances should internal or private api keys be exposed to the client/browser via the below object
+                const pluginConfig = {
+                  appId: process.env.SEEKA_APP_ID,
+                  appInstallId: installation.applicationInstallId,
+                  appUrl: process.env.SELF_HOST_BASEURL,
+                  installationSettings: {
+                    browserPluginAppSetting1: installation.installationState?.installationSettings?.browserPluginAppSetting1
+                  }
+                } as ExampleAppAppBrowserSdkPluginConfig;
+                const plugin = await getSeekaBrowserPlugin<ExampleAppAppBrowserSdkPluginConfig>('ExampleAppAppConvergeSdkPlugin', pluginConfig, logger);
+
+                logger.profile('http.seeka.webhook.app')
+                return {
+                    status: 200,
+                    body: JSON.stringify(plugin),
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                }
+            }
+        }
+    } catch (err) {
+        logger.error('Failed to handle webhook', {ex: winston.exceptions.getAllInfo(err)});
+        return {
+            status: 500,
+            jsonBody: {error: "Request failed"}
+        }
+    } finally {
+        logger.profile('http.seeka.webhook.app')
+        logger.verbose('Seeka webhook handled');
+    }
+
+    if (errorMessage) {
+        logger.warn('Webhook call failed', {errorMessage});
+        return {
+            status: 400,
+            jsonBody: {error: {message: errorMessage}}
+        }
+    }
+
+    return {
+        status: 204
+    }
+}
+
+const onInstallation = async (payload: SeekaAppInstalledWebhookPayload, logger: Logger): Promise<string | null> => {
+    if (payload.isTest) return null;
+
+    const errorMessage = await validateInstallationSettings(payload.content?.installationSettings || {}, logger);
+    if (errorMessage) return errorMessage;
+
+    const installation = await createOrUpdateInstallation({
+        ...payload.context,
+        installationState: {
+            grantedPermissions: payload.content?.grantedPermissions || [],
+            installationSettings: payload.content?.installationSettings || {}
+        },
+        applicationInstallId: payload.context?.applicationInstallId as string,
+        organisationBrandId: payload.context?.organisationBrandId as string,
+        organisationId: payload.context?.organisationId as string,
+        installedAt: new Date().toISOString(),
+    }, logger)
+
+    return null;
+}
+
+const handleSeekaActivity = async (activity: SeekaActivityAcceptedWebhookPayload, installation: ExampleAppAppInstallContext, context: InvocationContext, logger: Logger) => {
+    logger = childLogger({
+        'Activity_ActivityIdentifier': activity?.content?.activity?.activityId,
+        'Tracking_Source_Url': activity?.content?.source?.loc,
+        'Activity_Name': activity?.content?.activity?.activityNameCustom || activity?.content?.activity?.activityName?.toString()
+    }, installation, logger, context);
+
+    await triggerBackgroundJob(queueNames.trackActivity, {
+        payload: activity.content,
+        organisationBrandId: installation.organisationBrandId,
+        organisationId: installation.organisationId,
+        applicationInstallId: installation.applicationInstallId,
+        causationId: context.invocationId,
+        correlationId: context.invocationId
+    } as TrackExampleAppActivityQueueItem, logger)
+}
+

package/dist/init-template/app/server-azurefunc/src/functions/trackActivityQueueHandler.ts

@@ -0,0 +1,48 @@
+import * as winston from 'winston';
+
+import {app, InvocationContext} from '@azure/functions';
+
+import {deserialiseQueuePayload, queueNames, sendQueueMessageToPoisonQueue} from '../app/jobs';
+import {sendActivityToAnotherSoftware} from "../app/services/activites";
+import {TrackExampleAppActivityQueueItem} from "../app/models";
+import {backgroundJobLogger, childLogger, startServices, tryGetInstallation} from "@seeka-labs/sdk-apps-server-host";
+
+app.storageQueue('trackActivityQueueHandler', {
+    queueName: queueNames.trackActivity,
+    connection: 'AzureWebJobsStorage',
+    handler: trackActivityQueueHandler
+});
+
+export async function trackActivityQueueHandler(queueItem: unknown, context: InvocationContext): Promise<void> {
+    const body = typeof queueItem === 'string' ? deserialiseQueuePayload<TrackExampleAppActivityQueueItem>(queueItem) : queueItem as TrackExampleAppActivityQueueItem;
+    let logger = backgroundJobLogger(queueNames.trackActivity, body, context);
+    logger.profile(`queue.${queueNames.trackActivity}`)
+
+    await startServices(logger);
+
+    const applicationInstallId = body.applicationInstallId as string || (body.payload as any)?.applicationInstallId as string; // Support legacy payload / previous bug
+
+    const installation = await tryGetInstallation(applicationInstallId as string, true, logger);
+
+    logger = childLogger({
+        'Activity_ActivityIdentifier': body?.payload?.seekaActivity?.activity?.activityId,
+        'Tracking_Source_Url': body?.payload?.seekaActivity?.source?.loc,
+        'Activity_Name': body?.payload?.seekaActivity?.activity?.activityNameCustom || body?.payload?.seekaActivity?.activity?.activityName?.toString()
+    }, installation, logger, context)
+
+    logger.info('Received request to track activity for ExampleApp', {body});
+
+    try {
+        await sendActivityToAnotherSoftware(body.payload, installation, context.invocationId, context.invocationId, logger);
+    } catch (err) {
+        const ex: any = winston.exceptions.getAllInfo(err);
+        logger.error('Error handling track ExampleApp activity queue item', {ex});
+
+        await sendQueueMessageToPoisonQueue(queueNames.trackActivity, {
+            ...body,
+            correlationId: context.invocationId,
+        } as TrackExampleAppActivityQueueItem, logger);
+    }
+
+    logger.profile(`queue.${queueNames.trackActivity}`)
+}

package/dist/init-template/app/server-azurefunc/src/functions/ui.ts

@@ -0,0 +1,46 @@
+import {app, HttpRequest, HttpResponseInit, InvocationContext} from '@azure/functions';
+import { ExampleAppAppInstallState, ExampleAppAppUiClientInitState } from "@example-org-name/example-app-name-lib";
+import { SeekaAppInstallContext } from "@seeka-labs/sdk-apps-core";
+
+import { generateAppUiHttpRequestResponse, HttpMethod} from '@seeka-labs/sdk-apps-server-host';
+import {Logger} from "winston";
+import {apiRouteHandler} from "../app/api/router";
+
+// Define your route and handler for the /ui path
+app.http('ui', {
+    methods: ['GET', 'HEAD', 'POST', 'DELETE'],
+    authLevel: 'anonymous',
+    route: 'app/{*route}',  // Wildcard route under /ui
+    handler: ui
+});
+
+// Function to serve the React app under /app
+export async function ui(req: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
+    const createBrowserInitState = async (installation: SeekaAppInstallContext<ExampleAppAppInstallState>, logger: Logger ): Promise<ExampleAppAppUiClientInitState> => {
+        // Under no circumstances should internal or private api keys be exposed to the client/browser via the below object
+        // Below state will be passed in plain text to the UI app, important to be selective (no spread operators on installation state)
+        // and not expose any internal or private api keys to the client/browser
+        return {
+            exampleInstallSetting1: installation?.installationState?.installationSettings?.exampleInstallSetting1
+        }
+    }
+
+    const res = await generateAppUiHttpRequestResponse(
+        req.url,
+        req.method as HttpMethod,
+        req.headers as Headers,
+        context,
+        createBrowserInitState,
+        async(...args) => {
+            return await apiRouteHandler(req, context, ...args)
+        }
+    )
+
+    return {
+        status: res.status,
+        headers: res.headers,
+        cookies: res.cookies,
+        body: res.body as HttpResponseInit['body'],
+        jsonBody: res.jsonBody
+    };
+}

package/dist/init-template/app/{server-azure-function/local.settings.example.json → server-azurefunc/template.settings.json}

@@ -7,20 +7,28 @@
     "FUNCTIONS_WORKER_RUNTIME": "node",
     "FUNCTIONS_EXTENSION_VERSION": "~4",
     "AzureWebJobsFeatureFlags": "EnableWorkerIndexing",
-    "AzureWebJobsStorage": "UseDevelopmentStorage=true",
-    "SEEKA_APP_ID": "",
-    "SEEKA_APP_SECRET": "",
     "SEEKA_DEBUG_ENABLED": "true",
+    "NODE_TLS_REJECT_UNAUTHORIZED": "0",
+    "REDIS_CONNECTION_USER": "default",
+    "OTEL_EXPORTER_OTLP_LOGS_ENDPOINT": "",
+    "OTEL_EXPORTER_OTLP_LOGS_HEADERS": "",
     "SEEKA_INGEST_URL": "",
     "SEEKA_ISSUER_URL": "",
-    "NODE_TLS_REJECT_UNAUTHORIZED": "1",
-    "REDIS_CONNECTION_USER": "default",
+    "SEEKA_APP_ID": "",
+    "SEEKA_APP_SECRET": "",
+    "REDIS_CONNECTION_HOST": "",
     "REDIS_CONNECTION_PASSWORD": "",
+    "AzureWebJobsStorage": "",
+    "SEEKA_TELEMETRY_URL": "",
+    "REDIS_CONNECTION_PORT": "6379",
     "REDIS_CONNECTION_TLS": "true",
-    "REDIS_CONNECTION_HOST": "",
-    "REDIS_CONNECTION_PORT": "",
-    "LOGGING_SEQ_SERVERURL": "",
-    "LOGGING_SEQ_APIKEY": "",
-    "LOGGING_LEVEL": "silly"
+    "OTEL_LOG_LEVEL": "debug",
+    "LOGGING_LEVEL": "silly",
+    "SELF_HOST_BASEURL": "",
+    "APP_UI_BASE_PATH": "",
+    "OTEL_TRACES_EXPORTER": "none",
+    "OTEL_METRICS_EXPORTER": "none",
+    "OTEL_LOGS_EXPORTER": "none",
+    "OTEL_PROPAGATORS": "none"
   }
 }

package/dist/init-template/app/{server-azure-function → server-azurefunc}/tsconfig.json

@@ -10,9 +10,15 @@
     "module": "CommonJS",
     "target": "ES6",
     "resolveJsonModule": true,
-    "isolatedModules": false,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "isolatedModules": false
   },
   "include": [
-    "src/functions/*.ts"
+    "src/**/*.ts",
+    "src/definitions.d.ts"
+  ],
+  "exclude": [
+    "node_modules"
   ]
 }

package/dist/init-template/app/ui/.env

@@ -0,0 +1,9 @@
+PORT=3000
+EXTEND_ESLINT=TRUE
+REACT_APP_RELEASE_TAG=dev
+VITE_BASE_URL=/app/
+VITE_URLS_SEEKA_API_CORE= https://api-localdev-env0-seeka.au.ngrok.io
+VITE_URLS_SEEKA_APP_CORE_ORIGIN=https://localhost:4200
+
+PROD_VITE_URLS_SEEKA_API_CORE=https://api.seeka.services
+PROD_VITE_URLS_SEEKA_APP_CORE_ORIGIN=https://seeka.app

package/dist/init-template/app/ui/README.md

@@ -0,0 +1,40 @@
+# Material UI - Create React App example in TypeScript
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/mui/material-ui):
+
+<!-- #default-branch-switch -->
+
+```bash
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-cra-ts
+cd material-ui-cra-ts
+```
+
+Install it and run:
+
+```bash
+npm install
+npm start
+```
+
+or:
+
+<!-- #default-branch-switch -->
+
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-cra-ts)
+
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-cra-ts)
+
+## The idea behind the example
+
+This example demonstrates how you can use Material UI with [Create React App](https://github.com/facebookincubator/create-react-app) in [TypeScript](https://github.com/Microsoft/TypeScript).
+It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v6.
+If you prefer, you can [use styled-components instead](https://mui.com/material-ui/integrations/interoperability/#styled-components).
+
+## What's next?
+
+<!-- #default-branch-switch -->
+
+You now have a working example project.
+You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section.

package/dist/init-template/app/ui/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8"/>
+    <link rel="icon" href="/favicon.ico"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Seeka ExampleApp</title>
+    <!-- Fonts to support Material Design -->
+    <link rel="preconnect" href="https://fonts.googleapis.com"/>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"/>
+    <script vite-ignore src="%VITE_BASE_URL%config.js?c=%VITE_RELEASE_TAG%"></script>
+    <script type="module" src="/src/index.tsx"></script>
+</head>
+<body>
+<noscript>You need to enable JavaScript to run this app.</noscript>
+<div id="root"></div>
+</body>
+
+</html>