Laravel Vite

Laravel Vite is a build tool that provides an extremely fast development environment and bundles your code for production
Out of the box, Laravel Vite provides a number of features to help you get started with your application

Vite configuration

Since we have already installed Jetstream within our project for our authentication, Vite is already fully configured and we can start working with it right away
Open vite.config.js and without any changes, the default configuration is as follows:

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

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

The input array within the Laravel plugin is used to specify the files that should be included in the build
- Additional global styles can be added to the app.css file
- Additional global scripts can be added to the app.js file
The refresh: true, option is used to specify that all files should be hot reloaded when they change including the Blade files of the views, app.css, app.js and the Livewire files

REMARK

All you have to do to make your pages hot reloadable is to add
@vite(['resources/css/app.css', 'resources/js/app.js']) somewhere in the head of your (layout) files

html

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

Npm scripts

The following npm scripts are available in package.json:
- The dev script runs Vite in development mode
- The build script generates an optimised production build of the application and assets and places the optimised CSS and JS files in the public/build directory

json

"scripts": {
    "dev": "vite",
    "build": "vite build"
},

IMPORTANT

From now on, every time you work on the project, you MUST first run npm run dev to make your changes hot reloadable and recompile the assets (scripts and styles), otherwise your changes will not be visible!

Auto run Vite (optional)

With PhpStorm you can run NPM scripts automatically on start-up
Add a new watch script in package.json, so it will start the dev server and open the browser automatically when you run this script

json

"scripts": {
    "dev": "vite",
    "watch": "vite --open",
    "build": "vite build"
},

In PhpStorm, go to Settings -> Tools -> Startup Tasks

Click on the + sign -> Add New Configuration and choose npm from the dropdown list

Step 1

Vite compilation errors?

Sometimes Vite will not recompile correctly when you copy/paste code from this course and the output will not be rendered as expected.
All you have to do is:

stop the watch script (Ctrl + F2)
and then restart the watch script (Ctrl + F5)

Compile for production

IMPORTANT

The scripts compiled with npm run dev are NOT production ready! They are not minimized and still contain a lot of overhead code. Every time you put a new version of your CSS or JavaScript file online, first optimize your code with the npm run build command.

More information can be found in the Combell hosting page

REMARK

The production version runs with versioning (or cache busting): each time your code changes, a new hashed string will be generated and added to the filename
Look at the source code to see the extra hash (9d96761f) inside of the filename

html

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

Laravel Vite ​

Vite configuration ​

Npm scripts ​

Auto run Vite (optional) ​

Compile for production ​

Laravel Vite

Vite configuration

Npm scripts

Auto run Vite (optional)

Compile for production