594e8446b4
====================== Updated docs/advanced/apis to 0.12. (#1729) Updated docs/advanced/middleware-config to 0.12. (#1730) Updated docs/advanced/links to 0.12. (#1732) Updated docs/advanced/web-sockets to 0.12. (#1733) Updated docs/advanced/email to 0.12. (#1734) Auth docs rework (#1723) Updated docs/advanced/jobs to 0.12. (#1740) Updates starter templates (#1744) Updates general docs (#1745) Update customising app docs (#1748) Updates client setup (#1749) Change server config docs (#1750) Updates CSS frameworks docs (#1753) Updates static assets docs (#1751) Updates custom vite config docs (#1754) Update testing docs (#1752) Updated docs/introduction/* to 0.12. (#1756) Restructuring data model docs (#1739) Updates depedencies docs (#1768) Co-authored-by: Mihovil Ilakovac <mihovil@ilakovac.com>
2.8 KiB
| title |
|---|
| Custom Vite Config |
import { ShowForTs, ShowForJs } from '@site/src/components/TsJsHelpers'
Wasp uses Vite to serve the client during development and bundling it for production. If you want to customize the Vite config, you can do that by editing the vite.config.{js,ts} file in your project root 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 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.
export default {
server: {
open: false,
},
}
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 in your custom Vite config. You can change the dev server port by setting the port option.
export default {
server: {
port: 4000,
},
}
WASP_WEB_CLIENT_URL=http://localhost:4000
import { defineConfig } from 'vite'
export default defineConfig({
server: {
port: 4000,
},
})
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.
export default {
base: '/my-app/',
}
import { defineConfig } from 'vite'
export default defineConfig({
base: '/my-app/',
})