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?
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.
If I run laravel on localhost, it shows me only file, how to fix this
The main index.php file is in Laravel's public/ directory. If you visit http://localhost/Employee/public, you'll likely see your Laravel site.
If you point your webserver's DocumentRoot at that directory, you'll be able to visit the app at http://localhost/. If you want to run multiple apps locally, you'll want to start playing with virtualhosts.
Alternatively, consider using Laravel's Valet, Sail, or Homestead options for local development; each will handle this sort of thing for you. Sail is Laravel's current recommendation.
You can use a web server such as Apache or Nginx to serve your laravel applications. If you have PHP 5.4+ and would like to use PHP's built in development server you may use the serve artisan command:
cd /project_directory
php artisan serve
By Default it will run application on port 8000
If you want to change to other port specify port number like
php artisan serve --port=8080
It will run your application on the PHP development server on localhost:8080
Docs: https://laravel.com/docs/4.2/quick#local-development-environment
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:
run vite:
vite
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?
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
Your php terminal is running on localhost:8000
So you can run on php artisan serve with host.
php artisan serve --host=192.XXXXXXXX
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;
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/
*** 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
enter image description hereMe and a classmate are working on an online shop. We must share our progress and started using Dropbox but it was too slow. We tried connecting our PCs through a local network, he shared the project in a "Public Access" folder so I can read and edit files but when I run the php artisan serve command I have this message saying UNC routes are not supported.
I have a similar problem with the npm run dev/watch because it searches for a file in "C:" but I'm not on C:
I tried changing the command to php artisan serve --host 0.0.0.0 --port 80 and also changing the host and port as well but it didn't worked. Also tried to run both commands on PowerShell, I read that it support UNC routes but it threw the same error. I'm desperate 'cause it's been like 4 hours and the Dropbox files aren't ready. About the npm problem I didn't find a useful answer. Sorry for the bad english
for windows
php artisan serve --host your-ip-add --port 8000
e.g
php artisan serve --host 192.168.1.001 --port 8000
For linux use
sudo before command
and try to be on same network
I have an application which i am using 'php artisan serve' command to run it on my mobile. I want to test it on my mobile but i have an API which requires HTTPS. So how can i configure this? I want to test this before I put this live.
Here is how my artisan command looks like:
php artisan serve --host=192.168.1.18 --port=80
The IP is my local machines IP Address which i am accessing from my mobile.
I have tried looking up google but i couldn't find the answer i was looking for.
Thanks
You can use self-signed SSL for own server.
1 - Download the certificate.
2 - Add or edit this line in php.ini config:
curl.cainfo = "[path_to_cerfificate]\cacert.pem"
3 - Then restart your server
Done.