diff --git a/waspc/ChangeLog.md b/waspc/ChangeLog.md index 3c7525ace..ddf519fd9 100644 --- a/waspc/ChangeLog.md +++ b/waspc/ChangeLog.md @@ -1,5 +1,26 @@ # Changelog +## 0.11.6 + +### 🎉 [New Feature] Enable Customising the Vite Config + +You can now customise the Vite config for your client app. This allows you to add plugins, change the dev server settings and more. + +By adding a `vite.config.ts` or `vite.config.js` to your `client` directory, you can customise the Vite config. For example, you change the dev server behaviour +not to open the browser automatically: + +```ts +import { defineConfig } from 'vite' + +export default defineConfig({ + server: { + open: false, + }, +}) +``` + +⚠️ Be careful when changing the dev server port, you'll need to update the `WASP_WEB_CLIENT_URL` env var in your `.env.server` file. + ## 0.11.5 ### 🐞 Bug fixes / 🔧 small improvements diff --git a/waspc/data/Cli/templates/basic/src/client/vite.config.ts b/waspc/data/Cli/templates/basic/src/client/vite.config.ts new file mode 100644 index 000000000..a55924e2b --- /dev/null +++ b/waspc/data/Cli/templates/basic/src/client/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' + +export default defineConfig({ + server: { + open: true, + }, +}) diff --git a/waspc/data/Generator/templates/react-app/tsconfig.node.json b/waspc/data/Generator/templates/react-app/tsconfig.node.json index 42872c59f..d90bb30d8 100644 --- a/waspc/data/Generator/templates/react-app/tsconfig.node.json +++ b/waspc/data/Generator/templates/react-app/tsconfig.node.json @@ -6,5 +6,5 @@ "moduleResolution": "bundler", "allowSyntheticDefaultImports": true }, - "include": ["vite.config.ts"] + "include": ["vite.config.ts", "./src/ext-src/vite.config.ts"] } diff --git a/waspc/data/Generator/templates/react-app/vite.config.ts b/waspc/data/Generator/templates/react-app/vite.config.ts index 8b3650d21..ae660116f 100644 --- a/waspc/data/Generator/templates/react-app/vite.config.ts +++ b/waspc/data/Generator/templates/react-app/vite.config.ts @@ -1,21 +1,35 @@ +{{={= =}=}} /// -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react-swc' +import { mergeConfig } from "vite"; +import react from "@vitejs/plugin-react-swc"; -// https://vitejs.dev/config/ -export default defineConfig({ +{=# customViteConfig.isDefined =} +{=& customViteConfig.importStatement =} +const _waspUserProvidedConfig = {=& customViteConfig.importIdentifier =} +{=/ customViteConfig.isDefined =} +{=^ customViteConfig.isDefined =} +const _waspUserProvidedConfig = {}; +{=/ customViteConfig.isDefined =} + +const defaultViteConfig = { plugins: [react()], server: { port: 3000, - host: '0.0.0.0', + host: "0.0.0.0", open: true, }, - envPrefix: 'REACT_APP_', + envPrefix: "REACT_APP_", build: { - outDir: 'build', + outDir: "build", }, test: { - environment: 'jsdom', - setupFiles: ['./src/test/vitest/setup.ts'], + environment: "jsdom", + setupFiles: ["./src/test/vitest/setup.ts"], }, -}) +}; + +// https://vitejs.dev/config/ +export default mergeConfig( + defaultViteConfig, + _waspUserProvidedConfig +); diff --git a/waspc/e2e-test/test-outputs/waspBuild-golden/files.manifest b/waspc/e2e-test/test-outputs/waspBuild-golden/files.manifest index d5204e3ba..96fee87b1 100644 --- a/waspc/e2e-test/test-outputs/waspBuild-golden/files.manifest +++ b/waspc/e2e-test/test-outputs/waspBuild-golden/files.manifest @@ -51,6 +51,7 @@ waspBuild/.wasp/build/web-app/src/entities/index.ts waspBuild/.wasp/build/web-app/src/ext-src/Main.css waspBuild/.wasp/build/web-app/src/ext-src/MainPage.jsx waspBuild/.wasp/build/web-app/src/ext-src/vite-env.d.ts +waspBuild/.wasp/build/web-app/src/ext-src/vite.config.ts waspBuild/.wasp/build/web-app/src/ext-src/waspLogo.png waspBuild/.wasp/build/web-app/src/index.tsx waspBuild/.wasp/build/web-app/src/logo.png @@ -85,6 +86,7 @@ waspBuild/src/client/Main.css waspBuild/src/client/MainPage.jsx waspBuild/src/client/tsconfig.json waspBuild/src/client/vite-env.d.ts +waspBuild/src/client/vite.config.ts waspBuild/src/client/waspLogo.png waspBuild/src/server/tsconfig.json waspBuild/src/shared/tsconfig.json diff --git a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/.waspchecksums b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/.waspchecksums index 7dd547ace..f9824cd28 100644 --- a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/.waspchecksums +++ b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/.waspchecksums @@ -370,6 +370,13 @@ ], "d677883c270ee71acc9bfd95c824650b541036599427a8ffc0ad33323d08e61d" ], + [ + [ + "file", + "web-app/src/ext-src/vite.config.ts" + ], + "797dfb8022557b5ce5ce856daca01911974497f9ccf656f5920e5b42a986f4f8" + ], [ [ "file", @@ -550,13 +557,13 @@ "file", "web-app/tsconfig.node.json" ], - "9e2abb169ea87b7190613a1d4da57ca608463a453bd4231fa3aeee5e308370dd" + "30fed1f6aa4710deb690d1ae47628066f34afda7b633f0c696fafcda9e2dbc1e" ], [ [ "file", "web-app/vite.config.ts" ], - "0ab8b3892a5d5d25b85646ef30e8b2487904415021912e68670fab316b2ecf2d" + "ba22ae0b9027a2a4d3cd2689e9a9e1caff526b96dfab5e7f0f58f194dff830d9" ] ] \ No newline at end of file diff --git a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/ext-src/vite.config.ts b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/ext-src/vite.config.ts new file mode 100644 index 000000000..a55924e2b --- /dev/null +++ b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/src/ext-src/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' + +export default defineConfig({ + server: { + open: true, + }, +}) diff --git a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/tsconfig.node.json b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/tsconfig.node.json index 42872c59f..d90bb30d8 100644 --- a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/tsconfig.node.json +++ b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/tsconfig.node.json @@ -6,5 +6,5 @@ "moduleResolution": "bundler", "allowSyntheticDefaultImports": true }, - "include": ["vite.config.ts"] + "include": ["vite.config.ts", "./src/ext-src/vite.config.ts"] } diff --git a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/vite.config.ts b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/vite.config.ts index 8b3650d21..c30ab7ea8 100644 --- a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/vite.config.ts +++ b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/.wasp/build/web-app/vite.config.ts @@ -1,21 +1,29 @@ /// -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react-swc' +import { mergeConfig } from "vite"; +import react from "@vitejs/plugin-react-swc"; -// https://vitejs.dev/config/ -export default defineConfig({ +import customViteConfig from './src/ext-src/vite.config' +const _waspUserProvidedConfig = customViteConfig + +const defaultViteConfig = { plugins: [react()], server: { port: 3000, - host: '0.0.0.0', + host: "0.0.0.0", open: true, }, - envPrefix: 'REACT_APP_', + envPrefix: "REACT_APP_", build: { - outDir: 'build', + outDir: "build", }, test: { - environment: 'jsdom', - setupFiles: ['./src/test/vitest/setup.ts'], + environment: "jsdom", + setupFiles: ["./src/test/vitest/setup.ts"], }, -}) +}; + +// https://vitejs.dev/config/ +export default mergeConfig( + defaultViteConfig, + _waspUserProvidedConfig +); diff --git a/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/src/client/vite.config.ts b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/src/client/vite.config.ts new file mode 100644 index 000000000..a55924e2b --- /dev/null +++ b/waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/src/client/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' + +export default defineConfig({ + server: { + open: true, + }, +}) diff --git a/waspc/e2e-test/test-outputs/waspCompile-golden/files.manifest b/waspc/e2e-test/test-outputs/waspCompile-golden/files.manifest index b2f00e949..d84378957 100644 --- a/waspc/e2e-test/test-outputs/waspCompile-golden/files.manifest +++ b/waspc/e2e-test/test-outputs/waspCompile-golden/files.manifest @@ -53,6 +53,7 @@ waspCompile/.wasp/out/web-app/src/entities/index.ts waspCompile/.wasp/out/web-app/src/ext-src/Main.css waspCompile/.wasp/out/web-app/src/ext-src/MainPage.jsx waspCompile/.wasp/out/web-app/src/ext-src/vite-env.d.ts +waspCompile/.wasp/out/web-app/src/ext-src/vite.config.ts waspCompile/.wasp/out/web-app/src/ext-src/waspLogo.png waspCompile/.wasp/out/web-app/src/index.tsx waspCompile/.wasp/out/web-app/src/logo.png @@ -87,6 +88,7 @@ waspCompile/src/client/Main.css waspCompile/src/client/MainPage.jsx waspCompile/src/client/tsconfig.json waspCompile/src/client/vite-env.d.ts +waspCompile/src/client/vite.config.ts waspCompile/src/client/waspLogo.png waspCompile/src/server/tsconfig.json waspCompile/src/shared/tsconfig.json diff --git a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/.waspchecksums b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/.waspchecksums index f63add315..a8857d05c 100644 --- a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/.waspchecksums +++ b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/.waspchecksums @@ -384,6 +384,13 @@ ], "d677883c270ee71acc9bfd95c824650b541036599427a8ffc0ad33323d08e61d" ], + [ + [ + "file", + "web-app/src/ext-src/vite.config.ts" + ], + "797dfb8022557b5ce5ce856daca01911974497f9ccf656f5920e5b42a986f4f8" + ], [ [ "file", @@ -564,13 +571,13 @@ "file", "web-app/tsconfig.node.json" ], - "9e2abb169ea87b7190613a1d4da57ca608463a453bd4231fa3aeee5e308370dd" + "30fed1f6aa4710deb690d1ae47628066f34afda7b633f0c696fafcda9e2dbc1e" ], [ [ "file", "web-app/vite.config.ts" ], - "0ab8b3892a5d5d25b85646ef30e8b2487904415021912e68670fab316b2ecf2d" + "ba22ae0b9027a2a4d3cd2689e9a9e1caff526b96dfab5e7f0f58f194dff830d9" ] ] \ No newline at end of file diff --git a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/ext-src/vite.config.ts b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/ext-src/vite.config.ts new file mode 100644 index 000000000..a55924e2b --- /dev/null +++ b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/src/ext-src/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' + +export default defineConfig({ + server: { + open: true, + }, +}) diff --git a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/tsconfig.node.json b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/tsconfig.node.json index 42872c59f..d90bb30d8 100644 --- a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/tsconfig.node.json +++ b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/tsconfig.node.json @@ -6,5 +6,5 @@ "moduleResolution": "bundler", "allowSyntheticDefaultImports": true }, - "include": ["vite.config.ts"] + "include": ["vite.config.ts", "./src/ext-src/vite.config.ts"] } diff --git a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/vite.config.ts b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/vite.config.ts index 8b3650d21..c30ab7ea8 100644 --- a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/vite.config.ts +++ b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/.wasp/out/web-app/vite.config.ts @@ -1,21 +1,29 @@ /// -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react-swc' +import { mergeConfig } from "vite"; +import react from "@vitejs/plugin-react-swc"; -// https://vitejs.dev/config/ -export default defineConfig({ +import customViteConfig from './src/ext-src/vite.config' +const _waspUserProvidedConfig = customViteConfig + +const defaultViteConfig = { plugins: [react()], server: { port: 3000, - host: '0.0.0.0', + host: "0.0.0.0", open: true, }, - envPrefix: 'REACT_APP_', + envPrefix: "REACT_APP_", build: { - outDir: 'build', + outDir: "build", }, test: { - environment: 'jsdom', - setupFiles: ['./src/test/vitest/setup.ts'], + environment: "jsdom", + setupFiles: ["./src/test/vitest/setup.ts"], }, -}) +}; + +// https://vitejs.dev/config/ +export default mergeConfig( + defaultViteConfig, + _waspUserProvidedConfig +); diff --git a/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/src/client/vite.config.ts b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/src/client/vite.config.ts new file mode 100644 index 000000000..a55924e2b --- /dev/null +++ b/waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/src/client/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' + +export default defineConfig({ + server: { + open: true, + }, +}) diff --git a/waspc/e2e-test/test-outputs/waspComplexTest-golden/files.manifest b/waspc/e2e-test/test-outputs/waspComplexTest-golden/files.manifest index c3701e466..3effe68da 100644 --- a/waspc/e2e-test/test-outputs/waspComplexTest-golden/files.manifest +++ b/waspc/e2e-test/test-outputs/waspComplexTest-golden/files.manifest @@ -118,6 +118,7 @@ waspComplexTest/.wasp/out/web-app/src/ext-src/Main.css waspComplexTest/.wasp/out/web-app/src/ext-src/MainPage.jsx waspComplexTest/.wasp/out/web-app/src/ext-src/myClientSetupCode.js waspComplexTest/.wasp/out/web-app/src/ext-src/vite-env.d.ts +waspComplexTest/.wasp/out/web-app/src/ext-src/vite.config.ts waspComplexTest/.wasp/out/web-app/src/ext-src/waspLogo.png waspComplexTest/.wasp/out/web-app/src/index.tsx waspComplexTest/.wasp/out/web-app/src/logo.png @@ -156,6 +157,7 @@ waspComplexTest/src/client/MainPage.jsx waspComplexTest/src/client/myClientSetupCode.js waspComplexTest/src/client/tsconfig.json waspComplexTest/src/client/vite-env.d.ts +waspComplexTest/src/client/vite.config.ts waspComplexTest/src/client/waspLogo.png waspComplexTest/src/server/actions/bar.js waspComplexTest/src/server/apiNamespaces.ts diff --git a/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/.waspchecksums b/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/.waspchecksums index e8c739ece..b72c25ea4 100644 --- a/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/.waspchecksums +++ b/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/.waspchecksums @@ -818,6 +818,13 @@ ], "d677883c270ee71acc9bfd95c824650b541036599427a8ffc0ad33323d08e61d" ], + [ + [ + "file", + "web-app/src/ext-src/vite.config.ts" + ], + "797dfb8022557b5ce5ce856daca01911974497f9ccf656f5920e5b42a986f4f8" + ], [ [ "file", @@ -1012,13 +1019,13 @@ "file", "web-app/tsconfig.node.json" ], - "9e2abb169ea87b7190613a1d4da57ca608463a453bd4231fa3aeee5e308370dd" + "30fed1f6aa4710deb690d1ae47628066f34afda7b633f0c696fafcda9e2dbc1e" ], [ [ "file", "web-app/vite.config.ts" ], - "0ab8b3892a5d5d25b85646ef30e8b2487904415021912e68670fab316b2ecf2d" + "ba22ae0b9027a2a4d3cd2689e9a9e1caff526b96dfab5e7f0f58f194dff830d9" ] ] \ No newline at end of file diff --git a/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/web-app/src/ext-src/vite.config.ts b/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/web-app/src/ext-src/vite.config.ts new file mode 100644 index 000000000..a55924e2b --- /dev/null +++ b/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/web-app/src/ext-src/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' + +export default defineConfig({ + server: { + open: true, + }, +}) diff --git a/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/web-app/tsconfig.node.json b/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/web-app/tsconfig.node.json index 42872c59f..d90bb30d8 100644 --- a/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/web-app/tsconfig.node.json +++ b/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/web-app/tsconfig.node.json @@ -6,5 +6,5 @@ "moduleResolution": "bundler", "allowSyntheticDefaultImports": true }, - "include": ["vite.config.ts"] + "include": ["vite.config.ts", "./src/ext-src/vite.config.ts"] } diff --git a/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/web-app/vite.config.ts b/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/web-app/vite.config.ts index 8b3650d21..c30ab7ea8 100644 --- a/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/web-app/vite.config.ts +++ b/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/web-app/vite.config.ts @@ -1,21 +1,29 @@ /// -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react-swc' +import { mergeConfig } from "vite"; +import react from "@vitejs/plugin-react-swc"; -// https://vitejs.dev/config/ -export default defineConfig({ +import customViteConfig from './src/ext-src/vite.config' +const _waspUserProvidedConfig = customViteConfig + +const defaultViteConfig = { plugins: [react()], server: { port: 3000, - host: '0.0.0.0', + host: "0.0.0.0", open: true, }, - envPrefix: 'REACT_APP_', + envPrefix: "REACT_APP_", build: { - outDir: 'build', + outDir: "build", }, test: { - environment: 'jsdom', - setupFiles: ['./src/test/vitest/setup.ts'], + environment: "jsdom", + setupFiles: ["./src/test/vitest/setup.ts"], }, -}) +}; + +// https://vitejs.dev/config/ +export default mergeConfig( + defaultViteConfig, + _waspUserProvidedConfig +); diff --git a/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/src/client/vite.config.ts b/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/src/client/vite.config.ts new file mode 100644 index 000000000..a55924e2b --- /dev/null +++ b/waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/src/client/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' + +export default defineConfig({ + server: { + open: true, + }, +}) diff --git a/waspc/e2e-test/test-outputs/waspJob-golden/files.manifest b/waspc/e2e-test/test-outputs/waspJob-golden/files.manifest index 484418ab3..1d8986f7d 100644 --- a/waspc/e2e-test/test-outputs/waspJob-golden/files.manifest +++ b/waspc/e2e-test/test-outputs/waspJob-golden/files.manifest @@ -60,6 +60,7 @@ waspJob/.wasp/out/web-app/src/entities/index.ts waspJob/.wasp/out/web-app/src/ext-src/Main.css waspJob/.wasp/out/web-app/src/ext-src/MainPage.jsx waspJob/.wasp/out/web-app/src/ext-src/vite-env.d.ts +waspJob/.wasp/out/web-app/src/ext-src/vite.config.ts waspJob/.wasp/out/web-app/src/ext-src/waspLogo.png waspJob/.wasp/out/web-app/src/index.tsx waspJob/.wasp/out/web-app/src/logo.png @@ -94,6 +95,7 @@ waspJob/src/client/Main.css waspJob/src/client/MainPage.jsx waspJob/src/client/tsconfig.json waspJob/src/client/vite-env.d.ts +waspJob/src/client/vite.config.ts waspJob/src/client/waspLogo.png waspJob/src/server/jobs/bar.js waspJob/src/server/tsconfig.json diff --git a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/.waspchecksums b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/.waspchecksums index d42f9e854..99d3f0d82 100644 --- a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/.waspchecksums +++ b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/.waspchecksums @@ -426,6 +426,13 @@ ], "d677883c270ee71acc9bfd95c824650b541036599427a8ffc0ad33323d08e61d" ], + [ + [ + "file", + "web-app/src/ext-src/vite.config.ts" + ], + "797dfb8022557b5ce5ce856daca01911974497f9ccf656f5920e5b42a986f4f8" + ], [ [ "file", @@ -606,13 +613,13 @@ "file", "web-app/tsconfig.node.json" ], - "9e2abb169ea87b7190613a1d4da57ca608463a453bd4231fa3aeee5e308370dd" + "30fed1f6aa4710deb690d1ae47628066f34afda7b633f0c696fafcda9e2dbc1e" ], [ [ "file", "web-app/vite.config.ts" ], - "0ab8b3892a5d5d25b85646ef30e8b2487904415021912e68670fab316b2ecf2d" + "ba22ae0b9027a2a4d3cd2689e9a9e1caff526b96dfab5e7f0f58f194dff830d9" ] ] \ No newline at end of file diff --git a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/ext-src/vite.config.ts b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/ext-src/vite.config.ts new file mode 100644 index 000000000..a55924e2b --- /dev/null +++ b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/ext-src/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' + +export default defineConfig({ + server: { + open: true, + }, +}) diff --git a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/tsconfig.node.json b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/tsconfig.node.json index 42872c59f..d90bb30d8 100644 --- a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/tsconfig.node.json +++ b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/tsconfig.node.json @@ -6,5 +6,5 @@ "moduleResolution": "bundler", "allowSyntheticDefaultImports": true }, - "include": ["vite.config.ts"] + "include": ["vite.config.ts", "./src/ext-src/vite.config.ts"] } diff --git a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/vite.config.ts b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/vite.config.ts index 8b3650d21..c30ab7ea8 100644 --- a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/vite.config.ts +++ b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/vite.config.ts @@ -1,21 +1,29 @@ /// -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react-swc' +import { mergeConfig } from "vite"; +import react from "@vitejs/plugin-react-swc"; -// https://vitejs.dev/config/ -export default defineConfig({ +import customViteConfig from './src/ext-src/vite.config' +const _waspUserProvidedConfig = customViteConfig + +const defaultViteConfig = { plugins: [react()], server: { port: 3000, - host: '0.0.0.0', + host: "0.0.0.0", open: true, }, - envPrefix: 'REACT_APP_', + envPrefix: "REACT_APP_", build: { - outDir: 'build', + outDir: "build", }, test: { - environment: 'jsdom', - setupFiles: ['./src/test/vitest/setup.ts'], + environment: "jsdom", + setupFiles: ["./src/test/vitest/setup.ts"], }, -}) +}; + +// https://vitejs.dev/config/ +export default mergeConfig( + defaultViteConfig, + _waspUserProvidedConfig +); diff --git a/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/src/client/vite.config.ts b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/src/client/vite.config.ts new file mode 100644 index 000000000..a55924e2b --- /dev/null +++ b/waspc/e2e-test/test-outputs/waspJob-golden/waspJob/src/client/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' + +export default defineConfig({ + server: { + open: true, + }, +}) diff --git a/waspc/e2e-test/test-outputs/waspMigrate-golden/files.manifest b/waspc/e2e-test/test-outputs/waspMigrate-golden/files.manifest index a287e9f87..f66369723 100644 --- a/waspc/e2e-test/test-outputs/waspMigrate-golden/files.manifest +++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/files.manifest @@ -58,6 +58,7 @@ waspMigrate/.wasp/out/web-app/src/entities/index.ts waspMigrate/.wasp/out/web-app/src/ext-src/Main.css waspMigrate/.wasp/out/web-app/src/ext-src/MainPage.jsx waspMigrate/.wasp/out/web-app/src/ext-src/vite-env.d.ts +waspMigrate/.wasp/out/web-app/src/ext-src/vite.config.ts waspMigrate/.wasp/out/web-app/src/ext-src/waspLogo.png waspMigrate/.wasp/out/web-app/src/index.tsx waspMigrate/.wasp/out/web-app/src/logo.png @@ -94,6 +95,7 @@ waspMigrate/src/client/Main.css waspMigrate/src/client/MainPage.jsx waspMigrate/src/client/tsconfig.json waspMigrate/src/client/vite-env.d.ts +waspMigrate/src/client/vite.config.ts waspMigrate/src/client/waspLogo.png waspMigrate/src/server/tsconfig.json waspMigrate/src/shared/tsconfig.json diff --git a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/.waspchecksums b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/.waspchecksums index 7e1b05654..eb93d6162 100644 --- a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/.waspchecksums +++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/.waspchecksums @@ -384,6 +384,13 @@ ], "d677883c270ee71acc9bfd95c824650b541036599427a8ffc0ad33323d08e61d" ], + [ + [ + "file", + "web-app/src/ext-src/vite.config.ts" + ], + "797dfb8022557b5ce5ce856daca01911974497f9ccf656f5920e5b42a986f4f8" + ], [ [ "file", @@ -564,13 +571,13 @@ "file", "web-app/tsconfig.node.json" ], - "9e2abb169ea87b7190613a1d4da57ca608463a453bd4231fa3aeee5e308370dd" + "30fed1f6aa4710deb690d1ae47628066f34afda7b633f0c696fafcda9e2dbc1e" ], [ [ "file", "web-app/vite.config.ts" ], - "0ab8b3892a5d5d25b85646ef30e8b2487904415021912e68670fab316b2ecf2d" + "ba22ae0b9027a2a4d3cd2689e9a9e1caff526b96dfab5e7f0f58f194dff830d9" ] ] \ No newline at end of file diff --git a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/ext-src/vite.config.ts b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/ext-src/vite.config.ts new file mode 100644 index 000000000..a55924e2b --- /dev/null +++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/src/ext-src/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' + +export default defineConfig({ + server: { + open: true, + }, +}) diff --git a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/tsconfig.node.json b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/tsconfig.node.json index 42872c59f..d90bb30d8 100644 --- a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/tsconfig.node.json +++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/tsconfig.node.json @@ -6,5 +6,5 @@ "moduleResolution": "bundler", "allowSyntheticDefaultImports": true }, - "include": ["vite.config.ts"] + "include": ["vite.config.ts", "./src/ext-src/vite.config.ts"] } diff --git a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/vite.config.ts b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/vite.config.ts index 8b3650d21..c30ab7ea8 100644 --- a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/vite.config.ts +++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/.wasp/out/web-app/vite.config.ts @@ -1,21 +1,29 @@ /// -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react-swc' +import { mergeConfig } from "vite"; +import react from "@vitejs/plugin-react-swc"; -// https://vitejs.dev/config/ -export default defineConfig({ +import customViteConfig from './src/ext-src/vite.config' +const _waspUserProvidedConfig = customViteConfig + +const defaultViteConfig = { plugins: [react()], server: { port: 3000, - host: '0.0.0.0', + host: "0.0.0.0", open: true, }, - envPrefix: 'REACT_APP_', + envPrefix: "REACT_APP_", build: { - outDir: 'build', + outDir: "build", }, test: { - environment: 'jsdom', - setupFiles: ['./src/test/vitest/setup.ts'], + environment: "jsdom", + setupFiles: ["./src/test/vitest/setup.ts"], }, -}) +}; + +// https://vitejs.dev/config/ +export default mergeConfig( + defaultViteConfig, + _waspUserProvidedConfig +); diff --git a/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/src/client/vite.config.ts b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/src/client/vite.config.ts new file mode 100644 index 000000000..a55924e2b --- /dev/null +++ b/waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/src/client/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' + +export default defineConfig({ + server: { + open: true, + }, +}) diff --git a/waspc/e2e-test/test-outputs/waspNew-golden/files.manifest b/waspc/e2e-test/test-outputs/waspNew-golden/files.manifest index c9cadbc44..c54010eed 100644 --- a/waspc/e2e-test/test-outputs/waspNew-golden/files.manifest +++ b/waspc/e2e-test/test-outputs/waspNew-golden/files.manifest @@ -5,6 +5,7 @@ waspNew/src/client/Main.css waspNew/src/client/MainPage.jsx waspNew/src/client/tsconfig.json waspNew/src/client/vite-env.d.ts +waspNew/src/client/vite.config.ts waspNew/src/client/waspLogo.png waspNew/src/server/tsconfig.json waspNew/src/shared/tsconfig.json diff --git a/waspc/e2e-test/test-outputs/waspNew-golden/waspNew/src/client/vite.config.ts b/waspc/e2e-test/test-outputs/waspNew-golden/waspNew/src/client/vite.config.ts new file mode 100644 index 000000000..a55924e2b --- /dev/null +++ b/waspc/e2e-test/test-outputs/waspNew-golden/waspNew/src/client/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' + +export default defineConfig({ + server: { + open: true, + }, +}) diff --git a/waspc/src/Wasp/AppSpec.hs b/waspc/src/Wasp/AppSpec.hs index bc66ba109..752694d92 100644 --- a/waspc/src/Wasp/AppSpec.hs +++ b/waspc/src/Wasp/AppSpec.hs @@ -36,6 +36,7 @@ import Wasp.AppSpec.Core.Decl (Decl, IsDecl, takeDecls) import Wasp.AppSpec.Core.Ref (Ref, refName) import Wasp.AppSpec.Crud (Crud) import Wasp.AppSpec.Entity (Entity) +import Wasp.AppSpec.ExternalCode (SourceExternalCodeDir) import qualified Wasp.AppSpec.ExternalCode as ExternalCode import Wasp.AppSpec.Job (Job) import Wasp.AppSpec.Page (Page) @@ -75,7 +76,8 @@ data AppSpec = AppSpec configFiles :: [ConfigFileRelocator], -- | Connection URL for a database used during development. If provided, generated app will -- make sure to use it when run in development mode. - devDatabaseUrl :: Maybe String + devDatabaseUrl :: Maybe String, + customViteConfigPath :: Maybe (Path' (Rel SourceExternalCodeDir) File') } -- TODO: Make this return "Named" declarations? diff --git a/waspc/src/Wasp/Generator/WebAppGenerator.hs b/waspc/src/Wasp/Generator/WebAppGenerator.hs index d7050fa43..4f5b64d79 100644 --- a/waspc/src/Wasp/Generator/WebAppGenerator.hs +++ b/waspc/src/Wasp/Generator/WebAppGenerator.hs @@ -9,6 +9,7 @@ where import Data.Aeson (object, (.=)) import Data.Char (toLower) import Data.List (intercalate) +import Data.Maybe (fromJust) import StrongPath ( Dir, File', @@ -20,6 +21,7 @@ import StrongPath relfile, (), ) +import qualified StrongPath as SP import Wasp.AppSpec (AppSpec) import qualified Wasp.AppSpec as AS import Wasp.AppSpec.App (App (webSocket)) @@ -28,6 +30,7 @@ import qualified Wasp.AppSpec.App.Client as AS.App.Client import qualified Wasp.AppSpec.App.Dependency as AS.Dependency import Wasp.AppSpec.App.WebSocket (WebSocket (..)) import qualified Wasp.AppSpec.Entity as AS.Entity +import Wasp.AppSpec.ExternalCode (SourceExternalCodeDir) import Wasp.AppSpec.Valid (getApp, isAuthEnabled) import Wasp.Env (envVarsToDotEnvContent) import Wasp.Generator.Common @@ -36,8 +39,10 @@ import Wasp.Generator.Common ) import qualified Wasp.Generator.ConfigFile as G.CF import Wasp.Generator.ExternalCodeGenerator (genExternalCodeDir) +import qualified Wasp.Generator.ExternalCodeGenerator.Common as ECC import Wasp.Generator.FileDraft (FileDraft, createTextFileDraft) import qualified Wasp.Generator.FileDraft as FD +import Wasp.Generator.JsImport (jsImportToImportJson) import Wasp.Generator.Monad (Generator) import qualified Wasp.Generator.NpmDependencies as N import Wasp.Generator.WebAppGenerator.AuthG (genAuth) @@ -47,10 +52,16 @@ import Wasp.Generator.WebAppGenerator.ExternalCodeGenerator ( extClientCodeGeneratorStrategy, extSharedCodeGeneratorStrategy, ) +import qualified Wasp.Generator.WebAppGenerator.ExternalCodeGenerator as EC import Wasp.Generator.WebAppGenerator.JsImport (extImportToImportJson) import Wasp.Generator.WebAppGenerator.OperationsGenerator (genOperations) import Wasp.Generator.WebAppGenerator.RouterGenerator (genRouter) import qualified Wasp.Generator.WebSocket as AS.WS +import Wasp.JsImport + ( JsImport, + JsImportName (JsImportModule), + makeJsImport, + ) import qualified Wasp.Node.Version as NodeVersion import qualified Wasp.SemanticVersion as SV import Wasp.Util ((<++>)) @@ -62,7 +73,6 @@ genWebApp spec = do [ genFileCopy [relfile|README.md|], genFileCopy [relfile|tsconfig.json|], genFileCopy [relfile|tsconfig.node.json|], - genFileCopy [relfile|vite.config.ts|], genFileCopy [relfile|src/test/vitest/setup.ts|], genFileCopy [relfile|src/test/vitest/helpers.tsx|], genFileCopy [relfile|src/test/index.ts|], @@ -70,7 +80,8 @@ genWebApp spec = do genPackageJson spec (npmDepsForWasp spec), genNpmrc, genGitignore, - genIndexHtml spec + genIndexHtml spec, + genViteConfig spec ] <++> genSrcDir spec <++> return extClientCodeFileDrafts @@ -322,3 +333,22 @@ genWebSocketProvider spec = return $ C.mkTmplFdWithData tmplFile tmplData shouldAutoConnect = (autoConnect <$> maybeWebSocket) /= Just (Just False) tmplData = object ["autoConnect" .= map toLower (show shouldAutoConnect)] tmplFile = C.asTmplFile [relfile|src/webSocket/WebSocketProvider.tsx|] + +genViteConfig :: AppSpec -> Generator FileDraft +genViteConfig spec = return $ C.mkTmplFdWithData tmplFile tmplData + where + tmplFile = C.asTmplFile [relfile|vite.config.ts|] + tmplData = + object ["customViteConfig" .= jsImportToImportJson (makeCustomViteConfigJsImport <$> AS.customViteConfigPath spec)] + + makeCustomViteConfigJsImport :: Path' (Rel SourceExternalCodeDir) File' -> JsImport + makeCustomViteConfigJsImport pathToConfig = makeJsImport importPath importName + where + importPath = C.toViteImportPath $ fromJust $ SP.relFileToPosix pathToConfigInSrc + pathToConfigInSrc = + SP.castRel $ + C.webAppSrcDirInWebAppRootDir + EC.extClientCodeDirInWebAppSrcDir + ECC.castRelPathFromSrcToGenExtCodeDir pathToConfig + + importName = JsImportModule "customViteConfig" diff --git a/waspc/src/Wasp/Project/Analyze.hs b/waspc/src/Wasp/Project/Analyze.hs index fc5865447..4fc532083 100644 --- a/waspc/src/Wasp/Project/Analyze.hs +++ b/waspc/src/Wasp/Project/Analyze.hs @@ -22,6 +22,7 @@ import Wasp.Project.Db (makeDevDatabaseUrl) import Wasp.Project.Db.Migrations (findMigrationsDir) import Wasp.Project.Deployment (loadUserDockerfileContents) import Wasp.Project.Env (readDotEnvClient, readDotEnvServer) +import Wasp.Project.Vite (findCustomViteConfigPath) import Wasp.Util (maybeToEither) import qualified Wasp.Util.IO as IOUtil @@ -63,6 +64,8 @@ constructAppSpec waspDir options decls = do let devDbUrl = makeDevDatabaseUrl waspDir decls serverEnvVars <- readDotEnvServer waspDir clientEnvVars <- readDotEnvClient waspDir + + let customViteConfigPath = findCustomViteConfigPath externalClientCodeFiles let appSpec = AS.AppSpec { AS.decls = decls, @@ -76,7 +79,8 @@ constructAppSpec waspDir options decls = do AS.isBuild = CompileOptions.isBuild options, AS.userDockerfileContents = maybeUserDockerfileContents, AS.configFiles = configFiles, - AS.devDatabaseUrl = devDbUrl + AS.devDatabaseUrl = devDbUrl, + AS.customViteConfigPath = customViteConfigPath } return $ case validateAppSpec appSpec of [] -> Right appSpec diff --git a/waspc/src/Wasp/Project/Vite.hs b/waspc/src/Wasp/Project/Vite.hs new file mode 100644 index 000000000..6208f4fcf --- /dev/null +++ b/waspc/src/Wasp/Project/Vite.hs @@ -0,0 +1,23 @@ +module Wasp.Project.Vite where + +import Data.List (find) +import StrongPath (File', Path', Rel, relfile) +import Wasp.AppSpec.ExternalCode (SourceExternalCodeDir) +import qualified Wasp.AppSpec.ExternalCode as ExternalCode + +findCustomViteConfigPath :: [ExternalCode.File] -> Maybe (Path' (Rel SourceExternalCodeDir) File') +findCustomViteConfigPath externalClientCodeFiles = ExternalCode._pathInExtCodeDir <$> maybeCustomViteConfigPath + where + maybeCustomViteConfigPath = find isCustomViteConfig externalClientCodeFiles + + isCustomViteConfig :: ExternalCode.File -> Bool + isCustomViteConfig + ExternalCode.File + { _pathInExtCodeDir = path + } = path == pathToViteTsConfig || path == pathToViteJsConfig + + pathToViteTsConfig :: Path' (Rel SourceExternalCodeDir) File' + pathToViteTsConfig = [relfile|vite.config.ts|] + + pathToViteJsConfig :: Path' (Rel SourceExternalCodeDir) File' + pathToViteJsConfig = [relfile|vite.config.js|] diff --git a/waspc/test/AppSpec/ValidTest.hs b/waspc/test/AppSpec/ValidTest.hs index 66542379d..a3a048b6c 100644 --- a/waspc/test/AppSpec/ValidTest.hs +++ b/waspc/test/AppSpec/ValidTest.hs @@ -310,7 +310,8 @@ spec_AppSpecValid = do AS.devEnvVarsServer = [], AS.userDockerfileContents = Nothing, AS.configFiles = [], - AS.devDatabaseUrl = Nothing + AS.devDatabaseUrl = Nothing, + AS.customViteConfigPath = Nothing } basicPage = diff --git a/waspc/test/Generator/WebAppGeneratorTest.hs b/waspc/test/Generator/WebAppGeneratorTest.hs index ce497203e..145e6e493 100644 --- a/waspc/test/Generator/WebAppGeneratorTest.hs +++ b/waspc/test/Generator/WebAppGeneratorTest.hs @@ -55,7 +55,8 @@ spec_WebAppGenerator = do AS.devEnvVarsClient = [], AS.userDockerfileContents = Nothing, AS.configFiles = [], - AS.devDatabaseUrl = Nothing + AS.devDatabaseUrl = Nothing, + AS.customViteConfigPath = Nothing } describe "genWebApp" $ do diff --git a/waspc/waspc.cabal b/waspc/waspc.cabal index ca003cb8c..1075ebd3d 100644 --- a/waspc/waspc.cabal +++ b/waspc/waspc.cabal @@ -320,6 +320,7 @@ library Wasp.Project.Deployment Wasp.Project.Env Wasp.Project.WebApp + Wasp.Project.Vite Wasp.NpmDependency Wasp.Psl.Ast.Model Wasp.Psl.Generator.Model diff --git a/web/docs/project/custom-vite-config.md b/web/docs/project/custom-vite-config.md new file mode 100644 index 000000000..0bb2af26e --- /dev/null +++ b/web/docs/project/custom-vite-config.md @@ -0,0 +1,117 @@ +--- +title: Custom Vite Config +--- + +import { ShowForTs, ShowForJs } from '@site/src/components/TsJsHelpers' + +Wasp uses [Vite](https://vitejs.dev/) for serving the client during development and bundling it for production. If you want to customize the Vite config, you can do that by creating a `vite.config.js` or `vite.config.ts` file in your `src/client` directory. + +Wasp will use your config and **merge** it with the default Wasp's Vite config. + +Vite config customization can be useful for things like: +- Adding custom Vite plugins. +- Customising the dev server. +- Customising the build process. + +Be careful with making changes to the Vite config, as it can break the Wasp's client build process. Check out the default Vite config [here](https://github.com/wasp-lang/wasp/blob/main/waspc/data/Generator/templates/react-app/vite.config.ts) to see what you can change. + +## Examples + +Below are some examples of how you can customize the Vite config. + +### Changing the Dev Server Behaviour + +If you want to stop Vite from opening the browser automatically when you run `wasp start`, you can do that by customizing the `open` option. + + + + +```js title="src/client/vite.config.js" +export default { + server: { + open: false, + }, +} +``` + + + +```ts title="src/client/vite.config.ts" +import { defineConfig } from 'vite' + +export default defineConfig({ + server: { + open: false, + }, +}) +``` + + + +### Custom Dev Server Port + +You have access to all of the [Vite dev server options](https://vitejs.dev/config/server-options.html) in your custom Vite config. You can change the dev server port by setting the `port` option. + + + + +```js title="src/client/vite.config.js" +export default { + server: { + port: 4000 + }, +} +``` + +```env title=".env.server" +WASP_WEB_CLIENT_URL=http://localhost:4000 +``` + + + + +```ts title="src/client/vite.config.ts" +import { defineConfig } from 'vite' + +export default defineConfig({ + server: { + port: 4000 + }, +}) +``` + +```env title=".env.server" +WASP_WEB_CLIENT_URL=http://localhost:4000 +``` + + + +:::warning Changing the dev server port +⚠️ Be careful when changing the dev server port, you'll need to update the `WASP_WEB_CLIENT_URL` env var in your `.env.server` file. +::: + +### Customising the Base Path + +If you, for example, want to serve the client from a different path than `/`, you can do that by customizing the `base` option. + + + + +```js title="src/client/vite.config.js" +export default { + base: '/my-app/', +} +``` + + + + +```ts title="src/client/vite.config.ts" +import { defineConfig } from 'vite' + +export default defineConfig({ + base: '/my-app/', +}) +``` + + diff --git a/web/sidebars.js b/web/sidebars.js index f2fe5c05b..f2ae06c26 100644 --- a/web/sidebars.js +++ b/web/sidebars.js @@ -84,6 +84,7 @@ module.exports = { 'project/testing', 'project/dependencies', 'project/css-frameworks', + 'project/custom-vite-config', ], }, {