Replace Laravel Mix with Vite #714

kresnasatya · 2024-08-23T11:30:22Z

kresnasatya
Aug 23, 2024

I was curious how to replace Laravel Mix with Vite in Jigsaw because Vite become the modern tool to integrate frontend assets and backend (e.g. TailwindCSS). I check in this issue: #640 but no luck find the way. Luckily I find a reference to use Vite in Jigsaw: https://github.com/jasara/jigsaw-vite-vue-tailwind-template. In this discussion, I would like to give a brief steps how to replace Laravel Mix with Vite in Jigsaw.

Install Vite.

npm i -D vite

Create vite.config.js file and code below. In short, this code create a plugin function name jigsaw(). This function acts as executor and watcher for files inside Jigsaw's project. If any file inside Jigsaw's project change then the watcher will trigger full-reload.

import { defineConfig } from 'vite';
import { exec } from 'child_process';
import { existsSync } from 'fs';
import { normalize, resolve } from 'path';

export default ({ command }) => defineConfig({
    publicDir: 'fake_dir_so_nothing_gets_copied',
    base: command === 'serve' ? '' : '/source/assets/build/',
    build: {
        manifest: true,
        outDir: resolve(__dirname + '/source/assets/build'),
        assetsDir: '.',
        rollupOptions: {
            input: resolve(__dirname + '/source/_assets/js/main.js')
        },
    },
    plugins: [
        jigsaw()
    ]
});

function jigsaw() {
    const bin = existsSync('./vendor/bin/jigsaw') ? normalize('./vendor/bin/jigsaw') : hasbin('jigsaw', (result) => {
        if (result) return 'jigsaw';
        console.error('Could not find Jigsaw; please install it with composer.');
        process.exit(1);
    });

    const jigsaw = (env) => {
        console.log('Starting Jigsaw build');

        exec(`${bin} build -q ${env}`, (error, stdout, stderr) => {
            console.log('Completed Jigsaw build');
            error ? console.warn(`Error building Jigsaw site:\n${stderr}`) : console.log(stdout);
        });
    }

    return {
        name: 'jigsaw',
        closeBundle() {
            console.log('Build complete. Running binary command...');
            jigsaw('production')
        },
        handleHotUpdate({ file , server }) {
            if (file.includes('build_')) {
                return;
            }
            if (file.includes('_tmp')) {
                return;
            }

            jigsaw('local');
            server.ws.send({ type: 'full-reload', path: '*' });
        }
    }
}

function hasbin(binaryName, callback) {
    const isWindows = process.platform === 'win32';
    const command = isWindows ? `where ${binaryName}` : `which ${binaryName}`;

    exec(command, (err, stdout) => {
        if (err) {
            callback(false);
            return;
        }

        const binaryPath = stdout.trim();
        if (binaryPath) {
            // Check if the binary exists at the given path
            fs.access(binaryPath, fs.constants.X_OK, (err) => {
                callback(!err); // true if binary exists and is executable
            });
        } else {
            callback(false); // No output from the command
        }
    })
}

In config.php add viteUrl and viteClientUrl keys.

<?php

return [
// ...
+    'viteUrl' => env('VITE_URL', 'http://localhost:5173'),
+    'viteClientUrl' => env('VITE_URL', 'http://localhost:5173').'/@vite/client',
];

Update TailwindCSS and PostCSS. Also, install autoprefixer.

npm i -D tailwindcss postcss autoprefixer

Create postcss.config.js file. In my opinion and intuition, this is necessary because Vite integrates with postcss. You just need to install postcss + postcss.config.js in order to make integration works. Link: https://vitejs.dev/config/shared-options#css-postcss

export default {
     plugins: {
         tailwindcss: {},
         autoprefixer: {}
     }
 }

Add Vite client to root view inside <head> tag in order to make full reload works. I use source/_layouts/main.blade.php as a root view.

@if($page->production)
    @php
        $manifest = json_decode(file_get_contents(public_path('/assets/build/.vite/manifest.json')), true);
    @endphp
    <script type="module" src="/assets/build/{{$manifest['source/_assets/js/main.js']['file']}}"></script>
    <link rel="stylesheet" href="/assets/build/{{$manifest['source/_assets/js/main.js']['css'][0]}}">
@else
    <script type="module" crossorigin src="{{ $page->viteClientUrl }}"></script>
    <script type="module" crossorigin src="{{ $page->viteUrl }}/source/_assets/js/main.js"></script>
@endif

Replace scripts inside package.json file. We set type module because we use ES6 import module in vite.config.js file.

{
    "private": true,
+  "type": "module",
    "scripts": {
-       "dev": "mix"
+      "dev": "vite",
-       "production": "mix --production"
+      "production": "vite build"
    }
}

That's it! Try to run npm run dev and vendor/bin/jigsaw serve in each terminal. Then, open your browser, edit a thing inside a file. Have fun! Thanks.

Here's the full commit to see how to replace Laravel Mix with Vite in Jigsaw: phpbali-org/phpbali-org.github.io@1f20e7f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replace Laravel Mix with Vite #714

{{title}}

Replies: 0 comments

Select a reply

Replace Laravel Mix with Vite #714

kresnasatya Aug 23, 2024

Replies: 0 comments

kresnasatya
Aug 23, 2024