mirror of
https://github.com/wasp-lang/wasp.git
synced 2024-12-28 11:34:41 +03:00
Allow customising the Vite config (#1465)
This commit is contained in:
Mihovil Ilakovac
GitHub
parent
f7d431a5ab
commit
88d9534fd3
@ -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
|
||||
|
||||
7
waspc/data/Cli/templates/basic/src/client/vite.config.ts
Normal file
7
waspc/data/Cli/templates/basic/src/client/vite.config.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
export default defineConfig({
|
||||
server: {
|
||||
open: true,
|
||||
},
|
||||
})
|
||||
@ -6,5 +6,5 @@
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
"include": ["vite.config.ts", "./src/ext-src/vite.config.ts"]
|
||||
}
|
||||
|
||||
@ -1,21 +1,35 @@
|
||||
{{={= =}=}}
|
||||
/// <reference types="vitest" />
|
||||
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
|
||||
);
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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"
|
||||
]
|
||||
]
|
||||
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
export default defineConfig({
|
||||
server: {
|
||||
open: true,
|
||||
},
|
||||
})
|
||||
@ -6,5 +6,5 @@
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
"include": ["vite.config.ts", "./src/ext-src/vite.config.ts"]
|
||||
}
|
||||
|
||||
@ -1,21 +1,29 @@
|
||||
/// <reference types="vitest" />
|
||||
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
|
||||
);
|
||||
|
||||
7
waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/src/client/vite.config.ts
generated
Normal file
7
waspc/e2e-test/test-outputs/waspBuild-golden/waspBuild/src/client/vite.config.ts
generated
Normal file
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
export default defineConfig({
|
||||
server: {
|
||||
open: true,
|
||||
},
|
||||
})
|
||||
@ -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
|
||||
|
||||
@ -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"
|
||||
]
|
||||
]
|
||||
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
export default defineConfig({
|
||||
server: {
|
||||
open: true,
|
||||
},
|
||||
})
|
||||
@ -6,5 +6,5 @@
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
"include": ["vite.config.ts", "./src/ext-src/vite.config.ts"]
|
||||
}
|
||||
|
||||
@ -1,21 +1,29 @@
|
||||
/// <reference types="vitest" />
|
||||
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
|
||||
);
|
||||
|
||||
7
waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/src/client/vite.config.ts
generated
Normal file
7
waspc/e2e-test/test-outputs/waspCompile-golden/waspCompile/src/client/vite.config.ts
generated
Normal file
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
export default defineConfig({
|
||||
server: {
|
||||
open: true,
|
||||
},
|
||||
})
|
||||
@ -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
|
||||
|
||||
@ -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"
|
||||
]
|
||||
]
|
||||
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
export default defineConfig({
|
||||
server: {
|
||||
open: true,
|
||||
},
|
||||
})
|
||||
@ -6,5 +6,5 @@
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
"include": ["vite.config.ts", "./src/ext-src/vite.config.ts"]
|
||||
}
|
||||
|
||||
@ -1,21 +1,29 @@
|
||||
/// <reference types="vitest" />
|
||||
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
|
||||
);
|
||||
|
||||
7
waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/src/client/vite.config.ts
generated
Normal file
7
waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/src/client/vite.config.ts
generated
Normal file
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
export default defineConfig({
|
||||
server: {
|
||||
open: true,
|
||||
},
|
||||
})
|
||||
@ -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
|
||||
|
||||
@ -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"
|
||||
]
|
||||
]
|
||||
7
waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/ext-src/vite.config.ts
generated
Normal file
7
waspc/e2e-test/test-outputs/waspJob-golden/waspJob/.wasp/out/web-app/src/ext-src/vite.config.ts
generated
Normal file
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
export default defineConfig({
|
||||
server: {
|
||||
open: true,
|
||||
},
|
||||
})
|
||||
@ -6,5 +6,5 @@
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
"include": ["vite.config.ts", "./src/ext-src/vite.config.ts"]
|
||||
}
|
||||
|
||||
@ -1,21 +1,29 @@
|
||||
/// <reference types="vitest" />
|
||||
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
|
||||
);
|
||||
|
||||
7
waspc/e2e-test/test-outputs/waspJob-golden/waspJob/src/client/vite.config.ts
generated
Normal file
7
waspc/e2e-test/test-outputs/waspJob-golden/waspJob/src/client/vite.config.ts
generated
Normal file
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
export default defineConfig({
|
||||
server: {
|
||||
open: true,
|
||||
},
|
||||
})
|
||||
@ -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
|
||||
|
||||
@ -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"
|
||||
]
|
||||
]
|
||||
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
export default defineConfig({
|
||||
server: {
|
||||
open: true,
|
||||
},
|
||||
})
|
||||
@ -6,5 +6,5 @@
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
"include": ["vite.config.ts", "./src/ext-src/vite.config.ts"]
|
||||
}
|
||||
|
||||
@ -1,21 +1,29 @@
|
||||
/// <reference types="vitest" />
|
||||
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
|
||||
);
|
||||
|
||||
7
waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/src/client/vite.config.ts
generated
Normal file
7
waspc/e2e-test/test-outputs/waspMigrate-golden/waspMigrate/src/client/vite.config.ts
generated
Normal file
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
export default defineConfig({
|
||||
server: {
|
||||
open: true,
|
||||
},
|
||||
})
|
||||
@ -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
|
||||
|
||||
7
waspc/e2e-test/test-outputs/waspNew-golden/waspNew/src/client/vite.config.ts
generated
Normal file
7
waspc/e2e-test/test-outputs/waspNew-golden/waspNew/src/client/vite.config.ts
generated
Normal file
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
export default defineConfig({
|
||||
server: {
|
||||
open: true,
|
||||
},
|
||||
})
|
||||
@ -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?
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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
|
||||
|
||||
23
waspc/src/Wasp/Project/Vite.hs
Normal file
23
waspc/src/Wasp/Project/Vite.hs
Normal file
@ -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|]
|
||||
@ -310,7 +310,8 @@ spec_AppSpecValid = do
|
||||
AS.devEnvVarsServer = [],
|
||||
AS.userDockerfileContents = Nothing,
|
||||
AS.configFiles = [],
|
||||
AS.devDatabaseUrl = Nothing
|
||||
AS.devDatabaseUrl = Nothing,
|
||||
AS.customViteConfigPath = Nothing
|
||||
}
|
||||
|
||||
basicPage =
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
117
web/docs/project/custom-vite-config.md
Normal file
117
web/docs/project/custom-vite-config.md
Normal file
@ -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.
|
||||
|
||||
<Tabs groupId="js-ts">
|
||||
<TabItem value="js" label="JavaScript">
|
||||
|
||||
```js title="src/client/vite.config.js"
|
||||
export default {
|
||||
server: {
|
||||
open: false,
|
||||
},
|
||||
}
|
||||
```
|
||||
</TabItem>
|
||||
<TabItem value="ts" label="TypeScript">
|
||||
|
||||
```ts title="src/client/vite.config.ts"
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
export default defineConfig({
|
||||
server: {
|
||||
open: false,
|
||||
},
|
||||
})
|
||||
```
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
### 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.
|
||||
|
||||
<Tabs groupId="js-ts">
|
||||
<TabItem value="js" label="JavaScript">
|
||||
|
||||
```js title="src/client/vite.config.js"
|
||||
export default {
|
||||
server: {
|
||||
port: 4000
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
```env title=".env.server"
|
||||
WASP_WEB_CLIENT_URL=http://localhost:4000
|
||||
```
|
||||
</TabItem>
|
||||
<TabItem value="ts" label="TypeScript">
|
||||
|
||||
|
||||
```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
|
||||
```
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
:::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.
|
||||
|
||||
<Tabs groupId="js-ts">
|
||||
<TabItem value="js" label="JavaScript">
|
||||
|
||||
```js title="src/client/vite.config.js"
|
||||
export default {
|
||||
base: '/my-app/',
|
||||
}
|
||||
```
|
||||
</TabItem>
|
||||
<TabItem value="ts" label="TypeScript">
|
||||
|
||||
|
||||
```ts title="src/client/vite.config.ts"
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
export default defineConfig({
|
||||
base: '/my-app/',
|
||||
})
|
||||
```
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
@ -84,6 +84,7 @@ module.exports = {
|
||||
'project/testing',
|
||||
'project/dependencies',
|
||||
'project/css-frameworks',
|
||||
'project/custom-vite-config',
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user