Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Vite config issues in docs #1509

Merged
merged 1 commit into from
Oct 16, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 12 additions & 7 deletions web/docs/project/custom-vite-config.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -33,6 +34,7 @@ export default {
},
}
```

</TabItem>
<TabItem value="ts" label="TypeScript">

Expand All @@ -45,6 +47,7 @@ export default defineConfig({
},
})
```

</TabItem>
</Tabs>

Expand All @@ -58,31 +61,32 @@ 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,
},
}
```

```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
port: 4000,
},
})
```

```env title=".env.server"
WASP_WEB_CLIENT_URL=http://localhost:4000
```

</TabItem>
</Tabs>

Expand All @@ -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.

<Tabs groupId="js-ts">
<TabItem value="js" label="JavaScript">
Expand All @@ -102,16 +106,17 @@ 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>
2 changes: 2 additions & 0 deletions web/docs/tutorial/02-project-structure.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down