Question 16864 in Laravel Question posted in
The official Laravel Documentation can be found here.

Vite network URL opens Vite development server in Laravel application

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

enter image description here

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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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'])
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search