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

How to connect mobile device to vite with php dev server? (exposing host) – Laravel

Solution:

Thanks to @parastoo it works now. I had to spin up the dev server like so (2 different terminal tabs):

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

then connect with your mobile device (which is connected to your wifi) to:

http://HOST_IP:PORT

HOST_IP can be seen in the terminal when you run vite --host

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

No additional entry in vite.config.js was required.

Original Question

I’m using inertia, a monolithic approach to develop apps with a frontend framework like vue and laravel as backend. I’m trying to connect a mobile device from my network to my development server, which uses vite with php server:

  1. run vite:
vite
  1. run php server:
php artisan serve

The site is served from http://localhost:8000. From How to expose ‘host’ for external device display? #3396 I read, that you can do something like this:

vite --host

which 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 can't be found. I’ve also tried to connect with port 8000 which shows this site can't be reached.

Any way to make it work?

Tags:

5

Answers


  1. 0

    I would recommend using Chrome and just "Toggle device toolbar" – F12 and Ctr+Shift+M

    Or both devices should be on the same network and check if firewall allows connection on 3000 port;

    Login or Signup to reply.
  2. 0

    Your php terminal is running on localhost:8000

    So you can run on php artisan serve with host.

    php artisan serve --host=192.XXXXXXXX
    Login or Signup to reply.
  3. 0

    You should connect to the same network, then check your Local Ip and serve the Laravel project by:

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

    ** you should disable the firewall **

    updated

    Add this config to your vite.congif.js file

       server: {
        host: true
      }

    For example this is my config 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 host that you served with Laravel:

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

    These commands should run together with same host:

    PHP artisan serve --host=xx.xx.xx.xx --port=xxxx
npm run dev -- --host=xx.xx.xx.xx
    Login or Signup to reply.
  4. 0

    Vite uses its own dev server, so you can’t just use php artisan serve. You need to use the vite dev server.
    https://github.com/vitejs/vite#how-does-it-work
    If you want to use php artisan serve, you can follow the instructions in the link above. You’ll need to use the php server in your browser though, so http://localhost:8000/

    Login or Signup to reply.
  5. 0

    *** Clarification

    Given all the answers, I couldn’t figure out why hot reload didn’t always work. With this answer, I’d like to clarify some steps.

    For a mobile device to see the page, it has to be served on a local network starting with 192.*.*.* (e.g. 192.168.1.130).

    In the first terminal

    php artisan serve --host=192.168.1.130 --port=5173

    Now you should be able to connect to the server from your mobile with http://192.168.1.130:5173. However, the hot reload doesn’t work yet. For that, let’s start the Vite dev server.

    In the second terminal

    npm run dev -- --host=192.168.1.130

    This will start the Vite development server on the same network, but it will use a different port (in my case it was 5174) which is fine because the hot reload works as expected.

    CAVEAT: if you run commands the other way round, php artisan serve either can’t connect to the same port, or if it connects, the hot reload doesn’t work.

    **

    *** Improving Workflow (optional)

    I was annoyed every time typing --host and --port commands so I made some changes to the .ENV and package.json files.

    .ENV

    SERVER_HOST=192.168.1.130
SERVER_PORT=5173

    package.json

    "scripts": {
    "dev": "vite --host=192.168.1.130",
},

    Now to start the workflow, just open two terminals and type php artisan serve and npm run dev

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search