What's the difference between Laravel's built-in server and Vite dev server?

I’m new to Laravel development and getting confused about running different servers.

When I execute php artisan serve, my application becomes available at localhost:8000 and everything works as expected. I can see my actual Laravel app.

However, when I try npm run dev, it opens localhost:5173 but instead of showing my Laravel application, I only see the default Vite welcome screen.

# This works fine
php artisan serve
# Shows my Laravel app at localhost:8000

# This shows only Vite page
npm run dev  
# Opens localhost:5173 with Vite welcome

I think using php artisan serve is the correct approach for viewing my Laravel project.

Did I mess up something during project setup? What exactly is the difference between these two development servers and when should I use each one?

yep, i get it! when i started, i was lost too. so basically, artisan serve is handling your app’s back end stuff, while Vite is just keeping watch on your front end files. just don’t go to localhost:5173 directly, stick to localhost:8000 to see your app. run both in different terminals and Vite will auto-refresh when you change stuff.

Yeah, that’s completely normal. Laravel artisan serve runs your PHP backend, Vite handles frontend assets. Different jobs, different servers.

Manually juggling both is annoying though - I used to hate switching between terminal windows and forgetting which ports were what.

I ended up automating the whole thing with Latenode. It starts both servers in order, watches for changes, and restarts stuff if it crashes. You can build workflows that handle all the setup - start Laravel, fire up Vite, run migrations, clear caches. One click and you’re done.

It’ll even ping you when builds fail or everything’s ready to go. Way better than doing it all by hand.

Check it out: https://latenode.com

Here’s the deal: Laravel’s artisan serve runs your actual web app - it processes PHP and handles database stuff. Vite dev server? That’s just for bundling your CSS and JavaScript files. People get confused because both create local servers, but they do completely different things. When you run npm run dev, Vite doesn’t replace Laravel - it works with it. That Vite server on localhost:5173 is only there for hot reloading and fast asset compilation. Your Laravel app still needs localhost:8000 to actually work. For dev work, you’ll want both running at the same time so your assets get compiled and automatically injected into your Laravel views.

You haven’t messed anything up; what you’re experiencing is expected behavior. The php artisan serve command starts Laravel’s backend server, which handles the routing and logic of your application. On the other hand, npm run dev initializes Vite’s development server, which focuses on the frontend aspects like asset compilation and hot reloading. When you access localhost:5173 directly, you’re connecting to Vite’s server, hence the welcome screen. To see your Laravel application, keep both servers running, using php artisan serve for Laravel and npm run dev for Vite. This setup allows you to develop efficiently with live updates via localhost:8000.