Connect mobile device to vite using php development server: exposing host

Question

solution:

Thanks@parastoo, it works now. I have to start the development server like this (2 different terminal tabs):

vite --host=HOST_IP
php artisan serve --host=HOST_IP

Then connect your mobile device (connected to your WiFi) to:

http://HOST_IP:PORT

HOST_IP can be seen in the terminal when running vite --host

PORT can be configured by adding --port=8000 to the artisan command.

No need to add any entries in vite.config.js.

Original question

I'm using inertia, a holistic approach to developing applications with frontend frameworks like vue and laravel as backend. I'm trying to connect a mobile device from my network to my development server using vite and php server:

1. Run vite:

vite

2. run php server:

php artisan serve

This site is served by http://localhost:8000. From How to expose "host" for display by external devices? #3396 I read that you can do something like this:

vite --host

This should expose your network:

vite v2.9.13 dev server running at:

  > Local:    http://localhost:3000/
  > Network:  http://192.xxxxxxxxx:3000/

  ready in 419ms.

But when I try to connect to the network url on my phone, this page cannot be found. I also tried connecting to port 8000, which says This site is unreachable.

Is there any way to make it work?

Answer 1

Your php terminal is running on localhost:8000

So you can run php artisanserve on the host.

php artisan serve --host=192.XXXXXXXX

Answer 2

You should connect to the same network and then check your local IP and serve your Laravel project via:

PHP artisan serve --host=xx.xx.xx.xx --port=xxxx

**You should disable the firewall**

updated

Add this configuration to your vite.config.js file

server: {
        host: true
      }

For example, this is my configuration file:

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

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

Then run this command and add the hosts you are serving with Laravel:

npm run dev -- --host=xx.xx.xx.xx

These commands should be run with the same host:

PHP artisan serve --host=xx.xx.xx.xx --port=xxxx
npm run dev -- --host=xx.xx.xx.xx