Vite network URL opens Vite development server in Laravel application

Question

When I run vite run dev --host in my Laravel project, I get below screen on my external network URL:

My external URL is: http://192.168.1.6:5173

 ➜  Local:   http://localhost:5173/
 ➜  Network: http://192.168.1.6:5173/

Project runs fine on my app URL defined in Laravel's .env file viz. http://trip.dev

I am expecting http://192.168.1.6:5173/ to work same as http://trip.dev

I tried php artisan serve (as suggessted in the above screen to run the local development server), but it keep showing me the same screen.

Can some one help me in this?

score 1 · Answer 1 · answered Dec 01 '22 at 04:10

You should run php artisan serve --port=8000 in a command prompt and run vite run dev --host or npm run dev in other command prompt.

now, you need to open http://YOUR_IP_IN_NETWORK:8000; for example if your ip is 192.168.1.6, you should open http://192.168.1.6:8000.

tip: Make sure you use @vite('...path...') in your code to use vite.

score 1 · Answer 2 · answered Mar 02 '23 at 21:13

Open two different terminals and run

1. npm run dev -- --host
2. php artisan serve --host 192.168.1.6 --port 8000

The port can be any available. Don't forget to add this port to firewall or selinux permissions if you are using.

For some reason, styles and scripts were not connected. The problem is in the wrong path to them. To fix the work of included files, follow step 3

3. Open file vite.config.js in root of you project and add host:192.168.1.6,

full example of what the file looks like below vite.config.js

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

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

do not forget, now scripts and styles are connected like this on your pages

@vite(['resources/css/app.css', 'resources/js/app.js'])

score 0 · Answer 3 · answered Jul 25 '23 at 10:00

I have spent hours trying to configure vite on a remote-development environment and it's been super complicated. I can't believe Laravel team (which had always been as user-friendly as they could before) has gone in direction of forcing users to develop locally by choosing this poor frontend bundling solution and making our lives of people who develop remotely so complicated and in case you don't have a VPS actually impossible since you need a root access.

So, here's how you do it on a remote VPS:

vite by itself can listen on a remote server by adding flag --host. so, you should have in theory just added this script to package.json:

{
    "scripts": {
        ...
        "devhost": "vite --host",
        ...

However, this will most likely not work and there are extra steps you need to take. First of all, since you're devloping on a remote server, it has probably firewall and it's not forwarding default port 5173. also, vite picks "first free port at or after 5173" and since node can hang and don't close its port when killed you need to specify to always listen to the port 5173 and throw error instead, because you need to forward specific ports.

Another thing is, you most likely have a let's encrypt on your dev server for some domain and you can't load http assets from a https website, so you need to listen on https.

With that combined, you need to add this script to package.json:

"devhost": "vite --https --host --port=5173 --strictPort"

Now, you need to forward this port in your firewall so:

sudo ufw allow 5173

and check that it's done by

sudo ufw show added

This of course means that you need a root access to your remote machine which means you need an expensive VPS and can't develop on a shared hosting with just shell access anymore (thanks, Laravel team!) Also, I have no idea what the security implications are

Now your vite is running on https://[remote ip]:5173

Another issue is the https. Vite provides a way to automatically serve an untrusted certificate. Install it via npm install @vitejs/plugin-basic-ssl and then add this to your vite.config.js

...
import basicSsl from '@vitejs/plugin-basic-ssl';

export default defineConfig({
    plugins: [
       ...
       basicSsl()        
    ]
    ...
});

Now, if you start the server via npm run devhost you should be able to access https://[remote ip]:5173 and see the server running but with an untrusted certificate. Add it as an exception in your browser (more info button/accept proceed anyways or something like that) so you can load the remote assets

Now all should work properly, except when you open your website you will see that vite will try to load your assets not from https://[remote ip]:5173, but from https://[::]:5173/ (which is probably localhost or something i don't know why it doesn't just take the url provided in your npm script).

No, it does not help to set ASSET_URL order to load the assets from a specific url as the internet says, the ASSET_URL is respected only when vite is not running. In order to display them you need to add this to your vite.config.js

...

export default defineConfig({
    ...
    server: { 
        hmr: {
            host: 'public ip of your remote server (ONLY IP, NOTHING ELSE) ' 
        }
    }
});

Now, this means that you need to add vite.config.js to .gitignore and symlink it to different vite configs per your different environments, which is also pretty bad (thanks, Laravel team!)

This should be all. You should have running vite and serving the images correctly on your remote server. As mentioned earlier, now there is a constantly open port 5173 running on your remote server, I am no security expert and don't know the implications, but there is no other way to do this. Also, only one person can develop one project on one whole VPS (thanks, Laravel team!)

A word of notice, it happens very often that the node process just hangs when exiting and will leave the process running on port 5173, blocking any other npm run devhost. In order to kill it and be able to run it again, find the process id like this:

 sudo lsof -i -P -n | grep 5173

it's id will be right next to process name node and then kill like

sudo -kill 9 [process id]

Then you will be able to run the server on the port again.

There you have it, now you can do all this complicated stuff with root access on an expensive VPS just so you can build css and javascript on your website during development. Wow.

Vite network URL opens Vite development server in Laravel application

3 Answers3

Linked