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
| Property | Value |
|---|---|
| Development URL | https://vite.dev.test |
| Protocol | HTTPS by default |
| Port | 443 |
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 boot() 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');
}
}