[Feature Request]: vite run dev

[mrteeceehun]

Feature Description

It would be great to have a running npm run dev server. I’m using VueJs for almost all of my projects and currently I cannot use Herd out of the box. It would be nice if a documentation exists about how to use Herd with an npm server.
The best would be an option to be able to have a settings at the sites, which one is to run in dev or in built version. Now im inserting a npm section to the sail’s docker-compose.yml file and run the server from terminal, but since vite wants to serve from the same host with different port I only can use npm run build, no hot refresh…

Is this feature valuable for other users as well and why?

Sure, I think a lot of developers are using a frontend that needs to run a build and this would be a great help for them also.

[bretterer]

Having the ability to run npm run dev from Herd would be great. I would love to have the ability to have this run by default for a few sites while I am working on it, especially if I can have it run int he background

[cpiggott]

This would be so nice!

[JeroenHauser]

+1 !

Currently I'm experiencing the issue where npm run dev (Vite) runs at http://localhost:5173 and Herd at https://ozebi.test. This results in a CORS issue. Workaround is when I run Herd at http://ozebi.test (without SSL), but that results in continuing browser warnings.

Also, running rpm run dev via Herd results in a clear terminal setup. In addition to that, running php artisan horizon via Herd would also be very convenient. But that's another feature request.

[mrteeceehun]

To avoid CORS issue I'm doing:

• HERD running on something.test
• VITE is running on npm.something.test:5173 (any same domain, different subdomain)

npm.something.test can be added to your /etc/hosts file.
If using SSL you need to open the URL linked when rining run dev and then click on enable visiting besides the cert is not valid sometimes... Or play with VITE and some cert, but I found that harder than enabling the non-safe site occasionally.

[JeroenHauser]

Thanks, I'll give it a go! This would already be a good improvement 👍
However, I still think that running npm run dev and php artisan horizon from Herd would improve the dev experience.

[plakhin]

Yep, new Herd 1.5 introduced Services (for PRO), it would be nice to have an option to configure custom daemons there, so Horizon and Vite could be run and controlled though Herd instead of having a dedicated terminal window/pane open.

[rubendn]

Here is another way that I got npm run dev to work on Windows with a secured Herd site.

Here is a copy of my vite.config.js

Lines added:
import fs from 'fs'; (also need to npm install fs)
const host = website.test;
the server block

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin'
import fs from 'fs';

const host = website.test';   

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/filament/admin/theme.css',
                'resources/css/filament/admin/theme.js',
            ],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
            ],
        }),
    ],
    server: { 
        host, 
        hmr: { host }, 
        https: { 
            key: fs.readFileSync('C:\\Users\\rubendn\\.config\\herd\\config\\valet\\Certificates\\website.test.key'), 
            cert: fs.readFileSync('C:\\Users\\rubendn\\.config\\herd\\config\\valet\\Certificates\\website.test.crt'), 
        }, 
    }, 
});

[rubendn]

Had to make an adjustment so it doesn't look for the Certs on the production server...

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin'
import fs from 'fs'; 

const host = website.test'; 

export default defineConfig(({ command }) => {
    if (command === 'serve') {
      return {
        plugins: [
            laravel({
                input: [
                    'resources/css/app.css',
                    'resources/js/app.js',
                    'resources/css/filament/admin/theme.css',
                    'resources/css/filament/admin/theme.js',
                ],
                refresh: [
                    ...refreshPaths,
                    'app/Livewire/**',
                ],
            }),
        ],
        server: { 
            host, 
            hmr: { host }, 
            https: { 
                key: fs.readFileSync('C:\\Users\\rubendn\\.config\\herd\\config\\valet\\Certificates\\website.test.key'), 
                cert: fs.readFileSync('C:\\Users\\rubendn\\.config\\herd\\config\\valet\\Certificates\\website.test.crt'), 
            }, 
        },
      }
    } else {
      // command === 'build' - for production
      return {
        plugins: [
            laravel({
                input: [
                    'resources/css/app.css',
                    'resources/js/app.js',
                    'resources/css/filament/admin/theme.css',
                    'resources/css/filament/admin/theme.js',
                ],
                refresh: [
                    ...refreshPaths,
                    'app/Livewire/**',
                ],
            }),
        ],
      }
    }
  })

[Lelectrolux]

There is a simpler way without modifying the vite.config.js.
Just add 2 .env variables used by the laravel-vite-plugin. I found those with a bit of digging in the source code

VITE_DEV_SERVER_CERT="C:\\Users\\[CHANGEME]\\.config\\herd\\config\\valet\\Certificates\\${APP_DOMAIN}.crt"
VITE_DEV_SERVER_KEY="C:\\Users\\[CHANGEME]\\.config\\herd\\config\\valet\\Certificates\\${APP_DOMAIN}.key"

No need to change anything on the server, as it is fully contained to the .env.

Don't forget to change the [CHANGEME] section of the paths, and you might need to add the APP_DOMAIN=yourwebsite.test too (or inline it yourself), I don't remember if it is in Laravel by default

[rubendn]

Definitely a much better way to do it.

I just had to change the way I put the paths to the following:

VITE_DEV_SERVER_CERT="C:/Users/[CHANGEME]/.config/herd/config/valet/Certificates/${APP_DOMAIN}.crt"
VITE_DEV_SERVER_KEY="C:/Users/[CHANGEME]/.config/herd/config/valet/Certificates/${APP_DOMAIN}.key"

[Lelectrolux]

Yes, even simpler