Laravel Vite

Laravel Vite is a build tool that provides a swift development environment and efficiently bundles your code for production deployment. It provides a range of features right out of the box, streamlining the initial stages of application development.

Vite Configuration

Given the prior installation of the Laravel starter kit within our project, Vite is pre-configured and immediately operational. Let's examine the default configuration found in the vite.config.js file:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: [`resources/views/**/*`],
    }),
    tailwindcss(),
  ],
  server: {
    cors: true,
  },
});

The input array within the Laravel plugin specifies the files to be included in the build process:
- Additional global styles can be incorporated into the resources/css/app.css file.
- Additional global scripts can be added to the resources/js/app.js file.
Hot reloading is automatically configured for views located in the resources/views directory when:
- the @vite(['resources/css/app.css', 'resources/js/app.js']) directive is included within the <head> section of your layout file. This feature ensures that changes to your views are reflected in real-time without requiring a full page refresh, significantly accelerating the development process.
- The @fluxAppearance and @fluxScripts directives are employed to incorporate Flux UI's styling (CSS) and scripts into your layout file. These directives ensure that the necessary assets for Flux UI are included in your application.

php

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

Composer Scripts

The composer.json file includes a dev script that automates the execution of several key development tasks:

It starts the Laravel development server (php artisan serve).
It initiates the queue listener (php artisan queue:listen --tries=1).
It launches the Vite development server (npm run dev, which is a script defined in the package.json file).

json

"scripts": {
...,
"dev": [
"Composer\\Config::disableProcessTimeout",
"npx concurrently -c \"#93c5fd,#c4b5fd,#fdba74\" \"php artisan serve\" \"php artisan queue:listen --tries=1\" \"npm run dev\" --names='server,queue,vite'"
]
},

To initiate these tasks, execute the command composer run dev. This command streamlines the process of starting the development environment each time you commence work on your project.

TIP

For users of PhpStorm, automating the execution of this script upon project startup can be achieved by adding it to the Startup Tasks. Further details can be found in the Auto-start the laravel development server section.

Vite compilation errors?

In certain instances, Vite may fail to recompile correctly when code is copied and pasted from this course, leading to unexpected rendering outcomes. If you encounter such issues, follow these steps:

Stop the running watch script (Ctrl + F2).
Restart the watch script (Ctrl + F5).

Compile for Production

IMPORTANT

The scripts compiled using composer run dev are NOT suitable for production deployment! These scripts are not minimized and contain significant overhead code, which can negatively impact performance. To ensure optimal performance in a production environment, it's imperative to optimize your code using the npm run build command each time you deploy a new version of your CSS or JavaScript files.

Further information regarding production deployment can be found on the Combell hosting page.

REMARK

The production version employs versioning (also known as cache busting), where a unique hashed string is generated and appended to the filename each time the code changes. This mechanism ensures that users always receive the latest version of your assets.
Inspecting the source code will reveal the inclusion of this hash in the filename (e.g., app.9d96761f.css).

html


<link rel="preloas" rel="stylesheet" href="https://vinyl_shop.test/build/assets/app-9d96761f.css"/>

Laravel Vite ​

Vite Configuration ​

Composer Scripts ​

Compile for Production ​

Laravel Vite

Vite Configuration

Composer Scripts

Compile for Production