Laravel preset with vite

[danielsuguimoto]

Describe the bug

Laravel latest versions are coming with vitejs that starts a server to handle frontend files. So kool run yarn/npm run dev starts that server instead of only bundling the frontend files, making the laravel setup script to start a daemon.

We could change laravel preset to add a node server on docker-compose.yml for this. The problem would be older laravel versions.

To Reproduce

Creates a laravel project from scratch and run kool run setup. It starts a vite daemon.

[ajirandhi]

I had same problem and i got workaround to solve it, first in kool.yml in the npm and npx command add flag -p [hostPort]:[containerPort] , for example

npm: kool docker -p 5173:5173 kooldev/node:16 npm
npx: kool docker -p 5173:5173 kooldev/node:16 npx

and then in vite.config.js add this following code

server: {
    host: true
},

this is example in my file

• kool.yml

# Here you can define shortcuts and aliases to common tasks (commands)
# you will run in your local environment or CI or deploy.
#  Use the scripts defined below with:
#    $ kool run <script>
# Learn more at: https://kool.dev/docs/getting-started/how-it-works#koolyml
scripts:
  # Common commands
  composer: kool exec app composer
  artisan: kool exec app php artisan
  phpunit: kool exec app php ./vendor/bin/phpunit
  # Use this to setup your projects the first in a new environment.
  setup:
    - cp .env.example .env
    - kool start
    - kool run composer install
    - kool run artisan key:generate
    - kool run node-setup
  # Use this to reset the state of your database and run common hoursekeeping
  # when changing branches.
  reset:
    - kool run composer install
    - kool run artisan migrate:fresh --seed
    - kool run node-setup
  # CLI access to MariaDB
  maria: kool exec -e MYSQL_PWD=$DB_PASSWORD database mariadb -u $DB_USERNAME $DB_DATABASE
  # npm - helpers for JS handling
  npm: kool docker -p 5173:5173 kooldev/node:16 npm
  npx: kool docker -p 5173:5173 kooldev/node:16 npx
  node-setup:
    - kool run npm install
    - kool run npm run dev

• vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    server: {
        host: true
    },
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

after that you just run the command

kool run npm run dev

hope this help

[danielsuguimoto]

@ajirandhi Hey! Thanks! I use a similar workaround! We're working on a PR to fix that

[fabriciojs]

This has been released, assuming it was fixed @danielsuguimoto - please reopen if I am mistaken.