A way to run vite dev on remote server (like Laravel Mix)

Question

I've switched from Laravel Mix to Vite, and am trying to accomplish same thing "npm run watch" does for Laravel Mix. Caveat: our staging servers are not local (i.e. staging.app-domain-name.com). If I run npm run dev with Vite it revs up the "dev" server that's supposed to be at http://ip:3000, but that obviously does not work. Aside from not having an active watcher, I can't get the dev to be used with Vue Devtools plugin (since vite only can spit out prod on server).

My vite.config.js:

const { resolve } = require('path');
import vue from '@vitejs/plugin-vue';

export default ({ command }) => ({
    base: command === 'serve' ? '' : '/dist/',
    publicDir: 'fake_dir_so_nothing_gets_copied',
    build: {
        manifest: true,
        outDir: resolve(__dirname, 'public/dist'),
        rollupOptions: {
            input: 'resources/js/app.js',
        },
    },

    server: {
        host: true,
        port: '8080',
        hot: true
    },

    plugins: [vue()],

    resolve: {
        alias: {
            '@': resolve('./resources/js'),
        },
    },
});

My app.js

import "./bootstrap";
import '../css/app.css';
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

let asyncViews = () => {
    return import.meta.glob('./Pages/**/*.vue');
}

const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: async name => {
                if (import.meta.env.DEV) {
                    return (await import(`./Pages/${name}.vue`)).default;
                } else {
                    let pages = asyncViews();
                    const importPage = pages[`./Pages/${name}.vue`];
                    return importPage().then(module => module.default);
                }
            }
        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin)
    .mount(el);

And package.json scripts:

"scripts": {
    "predev": "printf \"dev\" > public/hot",
    "dev": "vite",
    "preprod": "printf \"prod\" > public/hot",
    "prod": "vite build"
}

Desired outcome to generate dev bundle on a remote server by running

npm run dev

Currently it tries to create localhost dev. I assume something in vite.config.js needs to be set to get that done. I've gone over the docs but could not find anything clear enough.

Answer 1

To tell Vite to listen also on network interface simply add --host parameter to dev script:

"scripts": {
    "dev": "vite --host",
    "prod": "vite build"
},

It gives me an result like this:

vite v2.5.10 dev server running at:
> Local:    http://localhost:3000/
> Network:  http://x.y.x.z:3000/     <-- server public IP
> Network:  http://10.10.10.1:3000/  <-- server local IP via VPN

ready in 330ms.

But this was not solution. I had a problem with CORS. I resolved it in another way. It depends on web server. I use nGinx and I set reverse proxy to listen on port 3000.

server {
    listen x.y.x.z:3000 ssl;       ### Server public IP address
    server_name dev.example.com;
    location / {
        proxy_pass https://127.0.0.1:3000/;    ### https: is Important
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection upgrade;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $remote_addr;
    }
    # SSL config
    ssl_certificate      /srv/certs/example.com/fullchain.cer;
    ssl_certificate_key  /srv/certs/example.com/example.com.key;
    include ssl_config;
}

Ii is also important to listen only on public IP address due to not conflict with vite on same port. Vite default listen only on localhost. Reload nGinx

sudo nginx -t
sudo systemctl reload nginx

In package.json I put --https atribute

{
    "private": true,
    "scripts": {
        "dev": "vite --https",
        "prod": "vite build"
    },
    "devDependencies": {
        "postcss": "^8.1.14",
        "vite": "^2.5.10"
    }
}

And that's it. Now I am able run

npm run dev

Finnally I put scripts to my layout blade end Vite start works.

<script type="module" src="https://dev.example.com:3000/@vite/client"></script>
<script type="module" src="https://dev.example.com:3000/resources/js/app.js"></script>

Setup nginx to proxy websocket https://www.nginx.com/blog/websocket-nginx/

Sebastyan's guide to setup Vite with Laravel https://sebastiandedeyne.com/vite-with-laravel