Best Way to Set Up Vite with Filament Dashboard and InertiaJS Frontend?

Level 58

To set up a project using Vite with Filament for the dashboard and InertiaJS for the public frontend, you can follow these steps to ensure a smooth configuration and organization of assets:

1. Configuring Vite

First, ensure you have Vite installed in your Laravel project. You can do this by running:

npm install vite laravel-vite-plugin

Then, update your vite.config.js to handle both Filament and InertiaJS. Here's a basic configuration:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.js', // Main entry for InertiaJS
                'resources/css/app.css', // Main CSS
                'resources/js/filament.js', // Filament specific JS
                'resources/css/filament.css', // Filament specific CSS
            ],
            refresh: true,
        }),
    ],
});

2. Organizing Shared Assets

To organize shared assets, you can create a structure in your resources directory like this:

resources/
    js/
        app.js
        filament.js
    css/
        app.css
        filament.css

app.js: This file will be your main entry point for InertiaJS.
filament.js: This file will handle any JavaScript specific to Filament.
app.css: Shared styles for the public frontend.
filament.css: Styles specific to the Filament dashboard.

3. Optimizing Performance

To optimize performance, consider the following:

Code Splitting: Vite automatically handles code splitting for dynamic imports. Ensure you use dynamic imports where possible to load only the necessary code.
Caching: Use Vite's built-in cache-busting by leveraging hashed filenames.
Minification: Vite automatically minifies your assets in production mode.

4. Example Usage

In your Blade templates, you can include the compiled assets like this:

For InertiaJS (public frontend):

<!DOCTYPE html>
<html lang="en">
<head>
    @vite(['resources/js/app.js', 'resources/css/app.css'])
</head>
<body>
    @inertia
</body>
</html>

For Filament (dashboard):

<!DOCTYPE html>
<html lang="en">
<head>
    @vite(['resources/js/filament.js', 'resources/css/filament.css'])
</head>
<body>
    <!-- Filament content -->
</body>
</html>

Additional Tips

Environment Configuration: Ensure your .env file is set up correctly for local and production environments, especially the APP_URL and ASSET_URL if you're using a CDN.
Testing: Regularly test your setup in both development and production modes to catch any issues early.

By following these steps, you should have a well-organized and performant setup for using Vite with Filament and InertiaJS.