CODEWITHSUNDEEP
laravelvue.jslocalhostviteinertiajs
Artur Müller Romanov
Artur Müller Romanov

Reputation: 5771

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

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?

Upvotes: 3

Views: 8561

Answers (5)

parastoo
parastoo

Reputation: 2469

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.config.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

Upvotes: 7

Armand
Armand

Reputation: 2827

*** 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

Upvotes: 2

Sh_gosha
Sh_gosha

Reputation: 111

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/

Upvotes: 0

swap
swap

Reputation: 282

Your php terminal is running on localhost:8000

So you can run on php artisan serve with host.

php artisan serve --host=192.XXXXXXXX

Upvotes: 2

raimondsL
raimondsL

Reputation: 341

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;

Upvotes: 0

Related Questions