diff --git a/web/docs/project/custom-vite-config.md b/web/docs/project/custom-vite-config.md index 0bb2af26e2..eba60b86c3 100644 --- a/web/docs/project/custom-vite-config.md +++ b/web/docs/project/custom-vite-config.md @@ -4,11 +4,12 @@ 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 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 editing the `vite.config.ts` file in your `src/client` directory. -Wasp will use your config and **merge** it with the default Wasp's Vite config. +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. @@ -33,6 +34,7 @@ export default { }, } ``` + @@ -45,6 +47,7 @@ export default defineConfig({ }, }) ``` + @@ -58,7 +61,7 @@ You have access to all of the [Vite dev server options](https://vitejs.dev/confi ```js title="src/client/vite.config.js" export default { server: { - port: 4000 + port: 4000, }, } ``` @@ -66,16 +69,16 @@ export default { ```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 + port: 4000, }, }) ``` @@ -83,6 +86,7 @@ export default defineConfig({ ```env title=".env.server" WASP_WEB_CLIENT_URL=http://localhost:4000 ``` + @@ -92,7 +96,7 @@ WASP_WEB_CLIENT_URL=http://localhost:4000 ### 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. +If you, for example, want to serve the client from a different path than `/`, you can do that by customizing the `base` option. @@ -102,10 +106,10 @@ export default { base: '/my-app/', } ``` + - ```ts title="src/client/vite.config.ts" import { defineConfig } from 'vite' @@ -113,5 +117,6 @@ export default defineConfig({ base: '/my-app/', }) ``` + diff --git a/web/docs/tutorial/02-project-structure.md b/web/docs/tutorial/02-project-structure.md index 547b943684..0160d5cebd 100644 --- a/web/docs/tutorial/02-project-structure.md +++ b/web/docs/tutorial/02-project-structure.md @@ -34,6 +34,8 @@ By _your code_, we mean the _"the code you write"_, as opposed to the code gener - `src/shared`: Contains code that may be executed on both the client and server. Many of the other files (`tsconfig.json`, `vite-env.d.ts`, etc.) are used by your IDE to improve your development experience with tools like autocompletion, intellisense, and error reporting. +The file `vite.config.ts` is used to configure [Vite](https://vitejs.dev/guide/), Wasp's build tool of choice. +We won't be configuring Vite in this tutorial, so you can safely ignore the file. Still, if you ever end up wanting more control over Vite, you'll find everything you need to know in [custom Vite config docs](/docs/project/custom-vite-config.md). :::note TypeScript Support Wasp supports TypeScript out of the box, but you are free to choose between or mix JavaScript and TypeScript as you see fit.