npm run dev just shows the vite page and not the site.

Hello,

I just install laravel on a new linux install and I have never had this issue before. I am running php artisan serve and i can access the site. Im trying to run vite so when i run npm run dev all i get is the vite page. the one that says

This is the Vite development server that provides Hot Module Replacement for your Laravel application.

To access your Laravel application, you will need to run a local development server.

but i am running my local development server.

LaryAI

1 year ago

Level 58

The issue you're experiencing is a common one when setting up Vite with Laravel. The message you're seeing is the default Vite development server page, which indicates that Vite is running correctly, but you need to ensure that your Laravel application is properly configured to use Vite for asset management.

Here's a step-by-step solution to resolve this issue:

Ensure Vite is Installed and Configured: Make sure you have Vite installed and configured in your Laravel project. You should have a vite.config.js file in the root of your project.

Check Your vite.config.js: Ensure that your vite.config.js is properly set up. It should look something like this:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Adjust the input paths to match your project's structure.

Verify Your Blade Template: Make sure your Blade template is set up to include the Vite assets. In your main Blade file (e.g., resources/views/welcome.blade.php), include the Vite directives:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel Vite</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <h1>Welcome to Laravel with Vite</h1>
</body>
</html>

Run Both Servers: You need to run both the Laravel development server and the Vite development server. Open two terminal windows or tabs and run the following commands:
- In the first terminal, start the Laravel server:
```
php artisan serve
```
- In the second terminal, start the Vite development server:
```
npm run dev
```
Access Your Application: Open your browser and navigate to the URL provided by php artisan serve, typically http://127.0.0.1:8000. You should see your Laravel application with Vite assets properly loaded.

By following these steps, you should be able to see your Laravel application instead of the Vite development server page. If you continue to experience issues, double-check your configuration files and ensure all paths and commands are correct.

1 like

[vite] VITE v6.2.0 ready in 266 ms [vite] [vite] ➜ Local: http://localhost:5173/ [vite] ➜ Network: use --host to expose [server] [server] INFO Server running on [http://127.0.0.1:8000]. [server] [server] Press Ctrl+C to stop the server [server] [vite] [vite] LARAVEL v11.44.1 plugin v1.2.0 [vite] [vite] ➜ APP_URL: http://127.0.0.1:8000