> ## Documentation Index
> Fetch the complete documentation index at: https://docs.useflytrap.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Use Flytrap with Vite
> Use Flytrap to catch & replay both front-end & back-end bugs with Vite
## Installing
Install the `useflytrap` package to your project.
```bash npm theme={null}
npm install useflytrap
```
```bash yarn theme={null}
yarn add useflytrap
```
```bash pnpm theme={null}
pnpm install useflytrap
```
## Add Flytrap code transform
Add the Flytrap code transform to your Vite configuration, so that all your code gets properly processed for replaying. This is an example configuration of using Vite with a SvelteKit application.
```typescript vite.config.ts theme={null}
import { FlytrapTransformPlugin } from 'useflytrap/transform'
import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
// only add in production
...(process.env.NODE_ENV === 'production' ? [FlytrapTransformPlugin.vite()] : []),
sveltekit()
]
})
```
Keep in mind that the Flytrap Transform should come before plugins such as `sveltekit`
In Next.js, your Flytrap config might get cached, so you need to delete the `.next` folder after changing the Flytrap config for the changes to be applied.
## Catch your first bug
Now your app will be enabled with Flytrap. You can test out the setup by throwing an error in your development environment.
## Example
}
href="https://github.com/useflytrap/flytrap-js/tree/main/examples/with-sveltekit"
>
See how you can use Flytrap with Vite in an example SvelteKit application