From 44ea3601c90610e422f7a8e7d2a2bc5ea14dc525 Mon Sep 17 00:00:00 2001 From: dncc89 <42793498+dncc89@users.noreply.github.com> Date: Thu, 18 May 2023 08:23:13 +0900 Subject: [PATCH] feat: Frontend app title environment variable (#291) * Add app name change support * fix indentation --- client/.env.example | 7 ++ client/index.html | 2 +- client/src/components/Input/Footer.jsx | 2 +- client/src/components/ui/Landing.jsx | 2 +- client/vite.config.ts | 112 ++++++++++++++----------- e2e/specs/landing.spec.js | 7 +- 6 files changed, 75 insertions(+), 57 deletions(-) diff --git a/client/.env.example b/client/.env.example index 91c12acd69..322d44d33f 100644 --- 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 index d81d0bf3d4..e77f5dc708 100644 --- a/client/index.html +++ b/client/index.html @@ -3,7 +3,7 @@ - ChatGPT Clone + %VITE_APP_TITLE% - ChatGPT Clone + {import.meta.env.VITE_APP_TITLE || "ChatGPT Clone"} . 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 index 27d4066c48..fcb54550fc 100644 --- a/client/src/components/ui/Landing.jsx +++ b/client/src/components/ui/Landing.jsx @@ -33,7 +33,7 @@ export default function Landing() {

- ChatGPT Clone + {import.meta.env.VITE_APP_TITLE || "ChatGPT Clone"}

diff --git a/client/vite.config.ts b/client/vite.config.ts index 5546e30baa..643f20a6c2 100644 --- 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) { + 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 index c57023def0..c8d722e1d9 100644 --- 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"); }); \ No newline at end of file