Frontend

Vite Integration

Lightning fast frontend tooling. Enjoy Hot Module Replacement (HMR), optimized builds, and seamless integration with React, Vue, or vanilla JS.

Instant Server Start

On-demand file serving over native ESM.

Hot Module Replacement

Updates code in the browser without reloading.

Configuration

Use the CanxJS Vite plugin to manage entry points and reload behavior.

vite.config.ts

1// vite.config.ts
2import { defineConfig } from 'vite';
3import canx from 'canxjs/vite';
4import react from '@vitejs/plugin-react';
5
6export default defineConfig({
7  plugins: [
8    canx({
9      input: ['resources/css/app.css', 'resources/js/app.tsx'],
10      refresh: true,
11    }),
12    react(),
13  ],
14});

Injecting Assets

Use the <Vite /> component in your views to inject the correct script and style tags for both development (HMR) and production (hashed assets).

src/views/app.tsx

1<!-- src/views/app.tsx (JSX View) -->
2import { Vite } from "canxjs";
3
4export const AppLayout = ({ children }) => (
5  <html>
6    <head>
7      <title>My App</title>
8      {/* Auto-injects scripts and styles */}
9      <Vite entry={['resources/css/app.css', 'resources/js/app.tsx']} />
10    </head>
11    <body>
12      {children}
13    </body>
14  </html>
15);

Running

Terminal

1// Run in development
2bun run dev
3
4// Build for production
5bun run build

Next Steps

Learn how to use Inertia.js with Vite.