proteum 2.1.6 → 2.1.7

package/cli/commands/dev.ts

@@ -174,13 +174,22 @@ async function startApp(app: App) {
         });
 
         const child = cp;
+        let childReady = false;
 
-        child.on('exit', () => {
-            if (cp === child) cp = undefined;
+        child.on('exit', (code, signal) => {
+            const isCurrentChild = cp === child;
+            if (isCurrentChild) cp = undefined;
+            if (!isCurrentChild || devSessionStopping || childReady) return;
+
+            console.error(
+                `Proteum dev server exited before reporting ready.${code !== null ? ` Exit code: ${code}.` : ''}${signal ? ` Signal: ${signal}.` : ''}`,
+            );
+            process.exit(code && code !== 0 ? code : 1);
         });
 
         child.on('message', (message: unknown) => {
             if (isServerReadyMessage(message)) {
+                childReady = true;
                 void (async () => {
                     console.info(
                         await renderServerReadyBanner({

package/cli/compiler/artifacts/manifest.ts

@@ -5,6 +5,7 @@ import app from '../../app';
 import cli from '../..';
 import { inspectProteumEnv } from '../../../common/env/proteumEnv';
 import { reservedRouteSetupKeys, routeSetupOptionKeys } from '../../../common/router/pageSetup';
+import { getProjectInstructionGitignoreEntries } from '../../utils/agents';
 import {
     TProteumManifest,
     TProteumManifestCommand,
@@ -39,6 +40,10 @@ const collectManifestDiagnostics = ({
     routes: TProteumManifest['routes'];
 }) => {
     const diagnostics: TProteumManifestDiagnostic[] = [];
+    const expectedGitignoreEntries = [
+        ...requiredGitignoreEntries,
+        ...getProjectInstructionGitignoreEntries({ coreRoot: cli.paths.core.root }),
+    ];
 
     const pushDiagnostic = (diagnostic: TProteumManifestDiagnostic) => {
         diagnostics.push(diagnostic);
@@ -224,7 +229,7 @@ const collectManifestDiagnostics = ({
         pushDiagnostic({
             level: 'warning',
             code: 'app.gitignore-missing',
-            message: `Missing .gitignore. Proteum generated output should ignore ${requiredGitignoreEntries.join(', ')}.`,
+            message: `Missing .gitignore. Proteum-managed paths should ignore ${expectedGitignoreEntries.join(', ')}.`,
             filepath: gitignoreFilepath,
         });
     } else {
@@ -236,14 +241,14 @@ const collectManifestDiagnostics = ({
                 .map(normalizeGitignoreEntry),
         );
 
-        for (const requiredEntry of requiredGitignoreEntries) {
+        for (const requiredEntry of expectedGitignoreEntries) {
             const normalizedRequiredEntry = normalizeGitignoreEntry(requiredEntry);
             if (entries.has(normalizedRequiredEntry)) continue;
 
             pushDiagnostic({
                 level: 'warning',
                 code: 'app.gitignore-generated-entry-missing',
-                message: `Add "${requiredEntry}" to .gitignore so Proteum generated output stays untracked.`,
+                message: `Add "${requiredEntry}" to .gitignore so Proteum-managed paths stay untracked.`,
                 filepath: gitignoreFilepath,
             });
         }

package/cli/scaffold/index.ts

@@ -5,7 +5,7 @@ import { UsageError } from 'clipanion';
 
 import cli from '..';
 import { loadApplicationIdentityConfig } from '../../common/applicationConfigLoader';
-import { ensureProjectAgentSymlinks } from '../utils/agents';
+import { ensureProjectAgentSymlinks, renderProjectInstructionGitignoreBlock } from '../utils/agents';
 import { runProcess } from '../utils/runProcess';
 import {
     createClientTsconfigTemplate,
@@ -633,7 +633,9 @@ const createInitFilePlans = (config: TScaffoldInitConfig): TScaffoldFilePlan[] =
     },
     {
         relativePath: '.gitignore',
-        content: createGitignoreTemplate(),
+        content: createGitignoreTemplate({
+            projectInstructionGitignoreBlock: renderProjectInstructionGitignoreBlock({ coreRoot: cli.paths.core.root }),
+        }),
     },
     {
         relativePath: 'eslint.config.mjs',

package/cli/scaffold/templates.ts

@@ -237,7 +237,11 @@ export const createServerTsconfigTemplate = () => `{
 }
 `;
 
-export const createGitignoreTemplate = () => `node_modules
+export const createGitignoreTemplate = ({
+    projectInstructionGitignoreBlock,
+}: {
+    projectInstructionGitignoreBlock: string;
+}) => `node_modules
 /.proteum
 /.cache
 /bin
@@ -245,6 +249,8 @@ export const createGitignoreTemplate = () => `node_modules
 /var
 /proteum.connected.json
 .env
+
+${projectInstructionGitignoreBlock}
 `;
 
 export const createEnvTemplate = ({ port, url }: { port: number; url: string }) => `ENV_NAME=local

package/cli/utils/agents.ts

@@ -11,6 +11,7 @@ import { logVerbose } from '../runtime/verbose';
 - TYPES
 ----------------------------------*/
 
+type TProjectInstructionArgs = { coreRoot: string };
 type TEnsureProjectAgentSymlinksArgs = { appRoot: string; coreRoot: string };
 
 type TAgentLinkDefinition = { projectPath: string; sourcePath: string; ensureParentDir?: boolean };
@@ -34,41 +35,107 @@ const projectAgentLinkDefinitions: TAgentLinkDefinition[] = [
     { projectPath: path.join('server', 'routes', 'AGENTS.md'), sourcePath: path.join('server', 'routes', 'AGENTS.md') },
     { projectPath: path.join('tests', 'e2e', 'AGENTS.md'), sourcePath: path.join('tests', 'AGENTS.md') },
 ];
+const projectInstructionGitignoreBlockStart = '# Proteum-managed instruction symlinks';
+const projectInstructionGitignoreBlockEnd = '# End Proteum-managed instruction symlinks';
 
 /*----------------------------------
 - PUBLIC API
 ----------------------------------*/
 
 export function ensureProjectAgentSymlinks({ appRoot, coreRoot }: TEnsureProjectAgentSymlinksArgs) {
-    const agentSourceRoot = path.join(coreRoot, 'agents', 'project');
-    const agentLinks = projectAgentLinkDefinitions.map((linkDefinition) => ({
-        ...linkDefinition,
-        sourcePath: path.join(agentSourceRoot, linkDefinition.sourcePath),
-    }));
+    ensureSymlinks(appRoot, getProjectAgentLinkDefinitions({ coreRoot }), '[agents]');
+    ensureSymlinks(appRoot, getProjectSkillLinkDefinitions({ coreRoot }), '[skills]');
+    ensureProjectInstructionGitignoreEntries({ appRoot, coreRoot });
+}
+
+export function getProjectInstructionGitignoreEntries({ coreRoot }: TProjectInstructionArgs) {
+    const entries = new Set<string>();
 
-    ensureSymlinks(appRoot, agentLinks, '[agents]');
-    ensureProjectSkillSymlinks({ appRoot, coreRoot });
+    for (const linkDefinition of [
+        ...getProjectAgentLinkDefinitions({ coreRoot }),
+        ...getProjectSkillLinkDefinitions({ coreRoot }),
+    ]) {
+        entries.add(`/${normalizeProjectPathForGitignore(linkDefinition.projectPath)}`);
+    }
+
+    return Array.from(entries);
+}
+
+export function renderProjectInstructionGitignoreBlock({ coreRoot }: TProjectInstructionArgs) {
+    return [
+        projectInstructionGitignoreBlockStart,
+        ...getProjectInstructionGitignoreEntries({ coreRoot }),
+        projectInstructionGitignoreBlockEnd,
+    ].join('\n');
 }
 
 /*----------------------------------
 - HELPERS
 ----------------------------------*/
 
-function ensureProjectSkillSymlinks({ appRoot, coreRoot }: TEnsureProjectAgentSymlinksArgs) {
+function getProjectAgentLinkDefinitions({ coreRoot }: TProjectInstructionArgs) {
+    const agentSourceRoot = path.join(coreRoot, 'agents', 'project');
+
+    return projectAgentLinkDefinitions.map((linkDefinition) => ({
+        ...linkDefinition,
+        sourcePath: path.join(agentSourceRoot, linkDefinition.sourcePath),
+    }));
+}
+
+function getProjectSkillLinkDefinitions({ coreRoot }: TProjectInstructionArgs) {
     const frameworkSkillsRoot = path.join(coreRoot, 'skills');
-    if (!fs.existsSync(frameworkSkillsRoot)) return;
+    if (!fs.existsSync(frameworkSkillsRoot)) return [];
 
-    const skillLinks: TAgentLinkDefinition[] = fs
+    return fs
         .readdirSync(frameworkSkillsRoot, { withFileTypes: true })
         .filter((dirent) => dirent.isDirectory())
+        .sort((left, right) => left.name.localeCompare(right.name))
         .map((dirent) => ({
             projectPath: path.join('skills', dirent.name),
             sourcePath: path.join(frameworkSkillsRoot, dirent.name),
             ensureParentDir: true,
         }))
         .filter((linkDefinition) => pathEntryExists(path.join(linkDefinition.sourcePath, 'SKILL.md')));
+}
+
+function ensureProjectInstructionGitignoreEntries({ appRoot, coreRoot }: TEnsureProjectAgentSymlinksArgs) {
+    const gitignoreFilepath = path.join(appRoot, '.gitignore');
+    if (!pathEntryExists(gitignoreFilepath)) return;
+
+    const managedEntries = getProjectInstructionGitignoreEntries({ coreRoot });
+    const managedNormalizedEntries = new Set(managedEntries.map(normalizeGitignoreEntry));
+    const lines = fs.readFileSync(gitignoreFilepath, 'utf8').split(/\r?\n/);
+    const filteredLines: string[] = [];
+
+    let insideManagedBlock = false;
 
-    ensureSymlinks(appRoot, skillLinks, '[skills]');
+    for (const line of lines) {
+        const trimmedLine = line.trim();
+
+        if (trimmedLine === projectInstructionGitignoreBlockStart) {
+            insideManagedBlock = true;
+            continue;
+        }
+
+        if (trimmedLine === projectInstructionGitignoreBlockEnd) {
+            insideManagedBlock = false;
+            continue;
+        }
+
+        if (insideManagedBlock) continue;
+        if (shouldSkipLegacyManagedGitignoreLine(line, managedNormalizedEntries)) continue;
+
+        filteredLines.push(line);
+    }
+
+    const baseContent = trimTrailingBlankLines(filteredLines).join('\n');
+    const managedBlock = renderProjectInstructionGitignoreBlock({ coreRoot });
+    const nextContent = baseContent ? `${baseContent}\n\n${managedBlock}\n` : `${managedBlock}\n`;
+
+    if (nextContent === fs.readFileSync(gitignoreFilepath, 'utf8')) return;
+
+    fs.writeFileSync(gitignoreFilepath, nextContent);
+    logVerbose(`[agents] Updated ${path.relative(appRoot, gitignoreFilepath) || '.gitignore'} with Proteum-managed instruction ignore entries.`);
 }
 
 function ensureSymlinks(appRoot: string, linkDefinitions: TAgentLinkDefinition[], logPrefix: string) {
@@ -93,6 +160,30 @@ function ensureSymlinks(appRoot: string, linkDefinitions: TAgentLinkDefinition[]
     }
 }
 
+function normalizeProjectPathForGitignore(projectPath: string) {
+    return projectPath.replace(/\\/g, '/');
+}
+
+function normalizeGitignoreEntry(value: string) {
+    return value.trim().replace(/#.*/, '').replace(/\\/g, '/').replace(/^\/+/, '').replace(/\/+$/, '');
+}
+
+function shouldSkipLegacyManagedGitignoreLine(line: string, managedNormalizedEntries: Set<string>) {
+    const normalizedLine = normalizeGitignoreEntry(line);
+    if (!normalizedLine) return false;
+    if (line.trim().startsWith('#')) return false;
+
+    return managedNormalizedEntries.has(normalizedLine);
+}
+
+function trimTrailingBlankLines(lines: string[]) {
+    const trimmedLines = [...lines];
+
+    while (trimmedLines.length > 0 && trimmedLines[trimmedLines.length - 1].trim() === '') trimmedLines.pop();
+
+    return trimmedLines;
+}
+
 function pathEntryExists(filepath: string) {
     try {
         fs.lstatSync(filepath);

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "proteum",
 	"description": "LLM-first Opinionated Typescript Framework for web applications.",
-	"version": "2.1.6",
+	"version": "2.1.7",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/proteum.git",
 	"license": "MIT",

package/server/app/container/index.ts

@@ -74,7 +74,13 @@ export class ApplicationContainer<TServicesIndex extends StartedServicesIndex =
 
         // Start application
         try {
-            this.application.start();
+            void this.application.start().catch(async (error) => {
+                try {
+                    await this.handleBug(error, 'Failed to start the Application');
+                } finally {
+                    process.exit(1);
+                }
+            });
         } catch (error) {
             this.handleBug(error, 'Failed to start the Application');
             process.exit(1);

package/server/services/router/http/index.ts

@@ -92,6 +92,27 @@ const createContentSecurityPolicy = (config: Config['csp']): TContentSecurityPol
     };
 };
 
+const immutablePublicAssetCacheControl = 'public, max-age=31536000, immutable';
+const revalidatedPublicAssetCacheControl = 'public, max-age=0, must-revalidate';
+const hashedPublicAssetPattern = /(^|[-_.])[a-f0-9]{6,}(?=(\.[^.]+)+$)/i;
+const connectedProjectBootRetryCount = 10;
+const connectedProjectBootRetryDelayMs = 5_000;
+
+const isVersionedPublicAssetRequest = (res: express.Response, filePath: string) => {
+    const requestUrl = res.req?.originalUrl || res.req?.url || '';
+    const searchParams = new URL(requestUrl, 'http://proteum.local').searchParams;
+    if (searchParams.has('v')) return true;
+
+    return hashedPublicAssetPattern.test(path.basename(filePath));
+};
+
+const resolvePublicAssetCacheControl = (res: express.Response, filePath: string) =>
+    isVersionedPublicAssetRequest(res, filePath) ? immutablePublicAssetCacheControl : revalidatedPublicAssetCacheControl;
+const wait = async (durationMs: number) =>
+    await new Promise<void>((resolve) => {
+        setTimeout(resolve, durationMs);
+    });
+
 /*----------------------------------
 - FUNCTION
 ----------------------------------*/
@@ -149,22 +170,38 @@ export default class HttpServer<TRouter extends TServerRouter = TServerRouter> {
     private async verifyConnectedProjectsBeforeStart() {
         for (const connectedProject of Object.values(this.app.connectedProjects || {})) {
             const healthUrl = new URL(connectedProjectHealthPath, connectedProject.urlInternal).toString();
+            let lastError: Error | undefined;
 
-            let response: Response;
-            try {
-                response = await fetch(healthUrl, {
-                    headers: { Accept: 'application/json' },
-                });
-            } catch (error) {
-                throw new Error(
-                    `Connected project "${connectedProject.namespace}" is unreachable at ${connectedProject.urlInternal}. ${error instanceof Error ? error.message : String(error)}`,
-                );
-            }
+            for (let retryIndex = 0; retryIndex <= connectedProjectBootRetryCount; retryIndex++) {
+                try {
+                    const response = await fetch(healthUrl, {
+                        headers: { Accept: 'application/json' },
+                    });
+
+                    if (!response.ok) {
+                        throw new Error(
+                            `Connected project "${connectedProject.namespace}" health check failed at ${healthUrl} with status ${response.status}.`,
+                        );
+                    }
+
+                    lastError = undefined;
+                    break;
+                } catch (error) {
+                    lastError =
+                        error instanceof Error && error.message.startsWith(`Connected project "${connectedProject.namespace}"`)
+                            ? error
+                            : new Error(
+                                  `Connected project "${connectedProject.namespace}" is unreachable at ${connectedProject.urlInternal}. ${error instanceof Error ? error.message : String(error)}`,
+                              );
+                }
 
-            if (!response.ok) {
-                throw new Error(
-                    `Connected project "${connectedProject.namespace}" health check failed at ${healthUrl} with status ${response.status}.`,
+                if (!lastError) continue;
+                if (retryIndex === connectedProjectBootRetryCount) throw lastError;
+
+                console.warn(
+                    `[connect] ${lastError.message} Retrying ${retryIndex + 1}/${connectedProjectBootRetryCount} in ${connectedProjectBootRetryDelayMs / 1000}s.`,
                 );
+                await wait(connectedProjectBootRetryDelayMs);
             }
         }
     }
@@ -329,17 +366,8 @@ export default class HttpServer<TRouter extends TServerRouter = TServerRouter> {
             '/public',
             express.static(path.join(Container.path.root, APP_OUTPUT_DIR, 'public'), {
                 dotfiles: 'deny',
-                setHeaders: function setCustomCacheControl(res, path) {
-                    const dontCache = ['/public/icons', '/public/client'];
-
-                    res.setHeader('Cache-Control', 'public, max-age=0');
-
-                    // Set long term cache, except for non-hashed filenames
-                    /*if (dontCache.some( p => path.startsWith( p ))) {
-                        res.setHeader('Cache-Control', 'public, max-age=0');
-                    } else {
-                        res.setHeader('Cache-Control', 'public, max-age=604800000'); // 7 Days
-                    }*/
+                setHeaders: function setCustomCacheControl(res, filePath) {
+                    res.setHeader('Cache-Control', resolvePublicAssetCacheControl(res, filePath));
                 },
             }),
             (req, res) => {

package/server/services/router/index.ts

@@ -95,6 +95,9 @@ export type TApiResponseData = { data: any; triggers?: { [cle: string]: any } };
 
 export type HttpHeaders = { [cle: string]: string };
 
+const dynamicHtmlCacheControl = 'no-store, no-cache, must-revalidate, proxy-revalidate';
+const staticHtmlCacheControl = 'public, max-age=0, must-revalidate';
+
 /*----------------------------------
 - SERVICE CONFIG
 ----------------------------------*/
@@ -571,14 +574,10 @@ export default class ServerRouter<
     - RESOLUTION
     ----------------------------------*/
     public async middleware(req: express.Request, res: express.Response) {
-        // Don't cache HTML, because in case of update, assets file name will change (hash.ext)
-        // https://github.com/helmetjs/nocache/blob/main/index.ts
-        res.setHeader('Surrogate-Control', 'no-store');
-        res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
-
         // Create request
         let requestId = uuid();
         const cachedPage = req.headers['bypasscache'] ? undefined : this.cache[req.path];
+        this.applyHtmlCacheHeaders(res, Boolean(cachedPage));
         const headers: HttpHeaders = Object.fromEntries(
             Object.entries(req.headers).map(([key, value]) => [key, Array.isArray(value) ? value.join(', ') : value || '']),
         );
@@ -638,10 +637,39 @@ export default class ServerRouter<
             // Static pages
             if (cachedPage) {
                 console.log('[router] Get static page from cache', req.path);
+                res.status(response.statusCode);
+                res.header(response.headers);
+
+                if (response.headers['Location']) {
+                    res.send(response.data === undefined ? '' : response.data);
+                    this.app.container.Trace.record(
+                        request.id,
+                        'response.send',
+                        {
+                            cached: true,
+                            statusCode: response.statusCode,
+                            contentType: response.headers['Content-Type'] || '',
+                            headerKeys: Object.keys(response.headers),
+                            redirected: true,
+                        },
+                        'summary',
+                    );
+                    this.app.container.Trace.finishRequest(request.id, {
+                        statusCode: response.statusCode,
+                        user: request.user?.email,
+                    });
+                    return;
+                }
+
                 this.app.container.Trace.record(
                     request.id,
                     'response.send',
-                    { cached: true, statusCode: response.statusCode, contentType: 'text/html' },
+                    {
+                        cached: true,
+                        statusCode: response.statusCode,
+                        contentType: response.headers['Content-Type'] || 'text/html',
+                        headerKeys: Object.keys(response.headers),
+                    },
                     'summary',
                 );
                 res.send(cachedPage.rendered);
@@ -870,6 +898,12 @@ export default class ServerRouter<
                         }
 
                         this.app.container.Trace.record(request.id, 'resolve.routes-evaluated', routeStats, 'resolve');
+
+                        if (isStatic) {
+                            resolve(response);
+                            return;
+                        }
+
                         this.app.container.Trace.record(request.id, 'resolve.not-found', { path: request.path }, 'summary');
                         reject(new NotFound());
                     } catch (error) {
@@ -923,10 +957,19 @@ export default class ServerRouter<
         await response.runController(route);
         if (!response.wasProvided) return;
 
-        // Set in cache
-        if (response.request.path && route.options.static && route.options.static.urls.includes('*')) {
-            console.log('[router] Set in cache', response.request.path);
-            this.renderStatic(response.request.path, route.options.static, response.data);
+        if (response.request.path && route.options.static) {
+            const staticUrls = route.options.static.urls.includes('*') ? [response.request.path] : route.options.static.urls;
+
+            for (const staticUrl of staticUrls) {
+                if (!staticUrl) continue;
+
+                console.log('[router] Set in cache', staticUrl);
+                void this.renderStatic(
+                    staticUrl,
+                    route.options.static,
+                    staticUrl === response.request.path ? response.data : undefined,
+                );
+            }
         }
 
         const timeEndResolving = Date.now();
@@ -1008,4 +1051,17 @@ export default class ServerRouter<
 
         return response;
     }
+
+    private applyHtmlCacheHeaders(res: express.Response, isStaticHtml: boolean) {
+        if (isStaticHtml) {
+            res.removeHeader('Surrogate-Control');
+            res.setHeader('Cache-Control', staticHtmlCacheControl);
+            return;
+        }
+
+        // Don't cache dynamic HTML, because updated releases can change asset hashes.
+        // https://github.com/helmetjs/nocache/blob/main/index.ts
+        res.setHeader('Surrogate-Control', 'no-store');
+        res.setHeader('Cache-Control', dynamicHtmlCacheControl);
+    }
 }

package/server/services/router/response/page/document.tsx

@@ -34,12 +34,10 @@ export default class DocumentRenderer<TRouter extends TServerRouter> {
                     <head>
                         {/* Format */}
                         <meta charSet="utf-8" />
-                        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
+                        <meta name="viewport" content="width=device-width, initial-scale=1" />
 
                         {/* CSS */}
                         {this.clientStyles()}
-                        <link rel="preload" as="font" href={'/public/icons.woff2?v=' + BUILD_ID} type="font/woff2" />
-                        <link rel="stylesheet" type="text/css" href="/public/icons.css" />
 
                         {/* JS */}
                         <script
@@ -69,7 +67,7 @@ export default class DocumentRenderer<TRouter extends TServerRouter> {
                         {/* Format */}
                         <meta charSet="utf-8" />
                         <meta content="IE=edge" httpEquiv="X-UA-Compatible" />
-                        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
+                        <meta name="viewport" content="width=device-width, initial-scale=1" />
 
                         {/* Mobile */}
                         <meta name="application-name" content={this.app.identity.web.title} />
@@ -80,18 +78,28 @@ export default class DocumentRenderer<TRouter extends TServerRouter> {
                         <meta name="msapplication-TileColor" content={this.app.identity.maincolor} />
                         <meta name="apple-mobile-web-app-capable" content="yes" />
                         <meta name="mobile-web-app-capable" content="yes" />
-                        <meta
-                            name="viewport"
-                            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
-                        />
 
                         {/* https://stackoverflow.com/questions/48956465/favicon-standard-2019-svg-ico-png-and-dimensions */}
                         {/*<link rel="manifest" href={RES['manifest.json']} />*/}
-                        <link rel="shortcut icon" href="/public/app/favicon.ico" />
-                        <link rel="icon" type="image/png" sizes="16x16" href="/public/app/favicon-16x16.png" />
-                        <link rel="icon" type="image/png" sizes="32x32" href="/public/app/favicon-32x32.png" />
-                        <link rel="apple-touch-icon" sizes="180x180" href="/public/app/apple-touch-icon-180x180.png" />
-                        <meta name="msapplication-config" content="/public/app/browserconfig.xml" />
+                        <link rel="shortcut icon" href={this.publicAssetUrl('app/favicon.ico', true)} />
+                        <link
+                            rel="icon"
+                            type="image/png"
+                            sizes="16x16"
+                            href={this.publicAssetUrl('app/favicon-16x16.png', true)}
+                        />
+                        <link
+                            rel="icon"
+                            type="image/png"
+                            sizes="32x32"
+                            href={this.publicAssetUrl('app/favicon-32x32.png', true)}
+                        />
+                        <link
+                            rel="apple-touch-icon"
+                            sizes="180x180"
+                            href={this.publicAssetUrl('app/apple-touch-icon-180x180.png', true)}
+                        />
+                        <meta name="msapplication-config" content={this.publicAssetUrl('app/browserconfig.xml', true)} />
 
                         {/* Page */}
                         <title>{page.title}</title>
@@ -165,7 +173,7 @@ export default class DocumentRenderer<TRouter extends TServerRouter> {
         return (
             <>
                 {scripts.map((script) => {
-                    const src = this.clientAssetUrl(script, true);
+                    const src = this.clientAssetUrl(script);
 
                     return (
                         <React.Fragment key={script}>
@@ -248,6 +256,10 @@ export default class DocumentRenderer<TRouter extends TServerRouter> {
     }
 
     private clientAssetUrl(asset: string, withBuildId = false) {
+        return this.publicAssetUrl(asset, withBuildId);
+    }
+
+    private publicAssetUrl(asset: string, withBuildId = false) {
         return `/public/${asset}${withBuildId ? `?v=${BUILD_ID}` : ''}`;
     }
 }