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.
Related
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
So I use the command PHP artisan serve to run a server and I can view my Laravel site at http://127.0.0.1:8000/ but I want to run my website at the
APP_URL= 'http://projectName.test' how can I do this? I see a lot of videos online where it just spins up that way automatically.
MySQL
Win11
XAMP
You can set up a virtual host to run the project on the custom URL in localhost.
this link is an example of defining a virtual host.
Use this:
php artisan serve --host=projectName.test --port=80
Also this is serve manual:
Description:
Serve the application on the PHP development server
Usage:
serve [options]
Options:
--host[=HOST] The host address to serve the application on [default: "127.0.0.1"]
--port[=PORT] The port to serve the application on
--tries[=TRIES] The max number of ports to attempt to serve from [default: 10]
--no-reload Do not reload the development server on .env file changes
-h, --help Display help for the given command. When no command is given display help for the list command
-q, --quiet Do not output any message
-V, --version Display this application version
--ansi|--no-ansi Force (or disable --no-ansi) ANSI output
-n, --no-interaction Do not ask any interactive question
--env[=ENV] The environment the command should run under
-v|vv|vvv, --verbose Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug
change host file parameter like:
# localhost name resolution is handled within DNS itself.
# 127.0.0.1 localhost
# ::1 localhost
127.0.0.1 projectName.test
change directory to root project and run:
php artisan serve --host=projectName.test --port=80
Take a peek at Laragon. I think Laragon is a better choice than XAMPP. And in your case, using Laragon don't require you to run php artisan serve to run the app. Just turn on the Laragon, and your app will be able to be accessed from http://your-app.test (suffix can be changed). No additional configuration or changes needed.
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
To run one laravel project we only need to type "php artisan serve". and it will be available on port 8000.
But sometimes we need to run multiple projects at the same time. How can we do this?
tl;dr one cannot have more than one listener per TCP port at the same time. If you need more web server instances: try another port:
php artisan serve --port=8001
then go to http://localhost:8001
References:
Can two applications listen to the same port?
https://laravel.com/docs/8.x
You can also run web server on multiple port in PHP application by the following command.
php -S localhost:8000
php -S localhost:8080
First run your first laravel project blog as follows:
Open your command prompt and go to your drive where your laravel project exist.
And type php artisan serve
C:\xampp\htdocs\blog>php artisan serve
Now type http://localhost:8000 in browser and your blog project will run.
Again open another command prompt and again go to your another laravel project bloganother
C:\xampp\htdocs\bloganother>php artisan serve --port=8080
Now go to your browser and type http://localhost:8080 in your browser your another project will also run.
1- First thing you need to mention port number in .env file.
APP_URL=http://127.0.0.1:8001
2- Run php artisan serve --port=8001
Run first laravel project (with url: http://localhost:8000)
php artisan serve
Run another laravel project (with port specific url: http://localhost:8001)
php artisan serve --port=8001
Run one more laravel project (with port specific url: http://localhost:8002)
php artisan serve --port=8002