Spin Pro Logo

Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.

Installation

By default Spin Pro comes with Vite pre-installed.

Default Configuration

PropertyValue
Development URLhttps://vite.dev.test
ProtocolHTTPS by default
Port443

If for some reason your vite.config.js file is heavily modified or changed by another process, here is the default configuration that Spin Pro comes with:

vite.config.js

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

export default defineConfig({
    server: {
        host: '0.0.0.0',
        hmr: {
            host: 'vite.dev.test',
            clientPort: 443,
        },
        https: {
            key: fs.readFileSync('/usr/src/app/.infrastructure/conf/traefik/dev/certificates/local-dev-key.pem'),
            cert: fs.readFileSync('/usr/src/app/.infrastructure/conf/traefik/dev/certificates/local-dev.pem'),
        },
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Usage

To use Vite, you can run the following command from your development environment:

Run Vite

spin run node yarn dev

Getting Vite Assets to Load Over HTTPS in Production

In Laravel 11, you will need to force the compiled Vite assets to load over HTTPS. To do that, open the app/Providers/AppServiceProvider.php file and update the register() method:

In order for the following code to take effect, the APP_ENV environment variable must be set to production or dev.

app/Providers/AppServiceProvider.php

/**
    * Register any application services.
    */
public function register(): void
{
    if ($this->app->environment('production') || $this->app->environment('dev')) {
        URL::forceScheme('https');
    }
}