danny-avila · danny-avila · May 17, 2023 · May 16, 2023 · May 17, 2023 · May 17, 2023
diff --git a/client/.env.example b/client/.env.example
@@ -1,3 +1,10 @@
+###########################
+# App configuration:
+###########################
+
+# Custom app name, this text will be displayed in the landing page and the footer.
+VITE_APP_TITLE="ChatGPT Clone"
+
 ###########################
 # Server URL configuration: 
 ###########################

diff --git a/client/index.html b/client/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="theme-color" content="#343541">
-    <title>ChatGPT Clone</title>
+    <title>%VITE_APP_TITLE%</title>
     <link
       rel="shortcut icon"
       href="#"

diff --git a/client/src/components/Input/Footer.jsx b/client/src/components/Input/Footer.jsx
@@ -9,7 +9,7 @@ export default function Footer() {
         rel="noreferrer"
         className="underline"
       >
-        ChatGPT Clone
+        {import.meta.env.VITE_APP_TITLE || "ChatGPT Clone"}
       </a>
       . Serves and searches all conversations reliably. All AI convos under one house. Pay per call and not
       per month (cents compared to dollars).

diff --git a/client/src/components/ui/Landing.jsx b/client/src/components/ui/Landing.jsx
@@ -33,7 +33,7 @@ export default function Landing() {
     <div className="flex h-full flex-col items-center overflow-y-auto pt-0 text-sm dark:bg-gray-800">
       <div className="w-full px-6 text-gray-800 dark:text-gray-100 md:flex md:max-w-2xl md:flex-col lg:max-w-3xl">
         <h1 id="landing-title" className="mt-6 ml-auto mr-auto mb-10 flex items-center justify-center gap-2 text-center text-4xl font-semibold sm:mb-16 md:mt-[10vh]">
-          ChatGPT Clone
+          {import.meta.env.VITE_APP_TITLE || "ChatGPT Clone"}
         </h1>
         <div className="items-start gap-3.5 text-center md:flex">
           <div className="mb-8 flex flex-1 flex-col gap-3.5 md:mb-auto">

diff --git a/client/vite.config.ts b/client/vite.config.ts
@@ -1,66 +1,76 @@
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
 import type { Plugin } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  server: {
-    host: 'localhost',
-    port: 3090,
-    strictPort: false,
-    proxy: {
-      '/api': {
-        target: 'http://localhost:3080',
-        changeOrigin: true
-      },
-      '/auth': {
-        target: 'http://localhost:3080',
-        changeOrigin: true
-      },
-      '/oauth': {
-        target: 'http://localhost:3080',
-        changeOrigin: true
-      }
-    }
-  },
-  plugins: [react(), sourcemapExclude({excludeNodeModules: true})],
-  publicDir: './public',
-  build: {
-    sourcemap: true,
-    outDir: './dist',
-    rollupOptions: {
-      output: {
-        manualChunks: id => {
-          if (id.includes('node_modules')) {
-            return 'vendor';
-          }
+    server: {
+        host: 'localhost',
+        port: 3090,
+        strictPort: false,
+        proxy: {
+            '/api': {
+                target: 'http://localhost:3080',
+                changeOrigin: true
+            },
+            '/auth': {
+                target: 'http://localhost:3080',
+                changeOrigin: true
+            },
+            '/oauth': {
+                target: 'http://localhost:3080',
+                changeOrigin: true
+            }
+        }
+    },
+    plugins: [react(), sourcemapExclude({ excludeNodeModules: true })],
+    publicDir: './public',
+    build: {
+        sourcemap: true,
+        outDir: './dist',
+        rollupOptions: {
+            output: {
+                manualChunks: id => {
+                    if (id.includes('node_modules')) {
+                        return 'vendor';
+                    }
+                }
+            }
+        }
+    },
+    resolve: {
+        alias: {
+            '~': path.join(__dirname, 'src/')
         }
-      }
-    }
-  },
-  resolve: {
-    alias: {
-      '~': path.join(__dirname, 'src/')
     }
-  }
 });
 
 interface SourcemapExclude {
-  excludeNodeModules?: boolean;
+    excludeNodeModules?: boolean;
 }
 export function sourcemapExclude(opts?: SourcemapExclude): Plugin {
-  return {
-      name: "sourcemap-exclude",
-      transform(code: string, id: string) {
-          if (opts?.excludeNodeModules && id.includes("node_modules")) {
-              return {
-                  code,
-                  // https://github.com/rollup/rollup/blob/master/docs/plugin-development/index.md#source-code-transformations
-                  map: { mappings: "" },
-              };
-          }
-      },
-  };
+    return {
+        name: "sourcemap-exclude",
+        transform(code: string, id: string) {
+            if (opts?.excludeNodeModules && id.includes("node_modules")) {
+                return {
+                    code,
+                    // https://github.com/rollup/rollup/blob/master/docs/plugin-development/index.md#source-code-transformations
+                    map: { mappings: "" },
+                };
+            }
+        },
+    };
 }
 
+function htmlPlugin(env: ReturnType<typeof loadEnv>) {
+    return {
+        name: "html-transform",
+        transformIndexHtml: {
+            enforce: "pre" as const,
+            transform: (html: string): string =>
+                html.replace(/%(.*?)%/g, (match, p1) => env[p1] ?? match),
+        },
+    };
+}
diff --git a/e2e/specs/landing.spec.js b/e2e/specs/landing.spec.js
@@ -1,7 +1,8 @@
-import {expect, test} from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
-test('landing page', async ({page}) => {
+
+test('landing page', async ({ page }) => {
   await page.goto('http://localhost:3080/');
   // expect (await page.title()).toBe('ChatGPT Clone');
-  expect (await page.textContent('#landing-title')).toBe('ChatGPT Clone');
+  expect(await page.textContent('#landing-title')).toBe(import.meta.env.VITE_APP_TITLE || "ChatGPT Clone");
 });