npm run dev in Vite doesn't find my Laravel app?

I updated my legacy Laravel app to Laravel 9 and added Vite + Inertia.js + Vue + Tailwind.

When I run npm run build, the files are compiled just fine. The app.css and app.js are compiled correctly and when I visit my Laravel application on localhost (on my docker container via sail) everything looks good.

Now I want to use hot loading. However, when I run npm run dev, I just see the default page, saying I need to start my laravel app sepeatly:

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.

Artisan Serve
Laravel's local development server powered by PHP's built-in web server.

Laravel Sail
A light-weight command-line interface for interacting with Laravel's default Docker development environment.

Your Laravel application's configured APP_URL is:
undefined

Where should I look? What could be misconfigured?

This is my package.json:

{
  "name": "vite",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "vite build",
    "dev": "vite --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.4.0",
    "autoprefixer": "^10.4.16",
    "laravel-vite-plugin": "^0.8.1",
    "postcss": "^8.4.31",
    "tailwindcss": "^3.3.5",
    "vite": "^4.5.0"
  },
  "dependencies": {
    "@headlessui/vue": "^1.7.16",
    "@heroicons/vue": "^2.0.18",
    "@inertiajs/vue3": "^1.0.14",
    "vue": "^3.2.36"
  }
}

This is my vite.config.js config:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
// import react from '@vitejs/plugin-react';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    base: '/',
    build: {
        outDir: '../../public/build', // Adjust the output directory as needed
    },
    plugins: [
        laravel( {
            input: [
                // 'resources/css/app.css',
                './app.js',
            ],
            hotFile: './hot'
        }),
        // react(),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    hmr: {
        host: 'localhost',
    },
    watch: {
        usePolling: true
    }
});

LaryAI

2 years ago

Level 58

Based on the provided information, it seems that the issue lies in the configuration of the Vite development server. The error message suggests that the Laravel application's APP_URL is undefined.

To resolve this issue, you can try the following steps:

Open your Laravel application's .env file and ensure that the APP_URL variable is properly set. For example, it should be something like APP_URL=http://localhost.
In your vite.config.js file, update the base property to match your Laravel application's base URL. For example, if your Laravel application is running on http://localhost:8000, the base property should be set to /.

export default defineConfig({
    base: '/',
    // ...
});

Save the changes and run npm run dev again. The Vite development server should now be able to find your Laravel application.

If the issue persists, you can also try the following additional steps:

Make sure that your Laravel application is running separately using either php artisan serve or Laravel Sail.
Check if there are any conflicting ports being used by other services. Ensure that the ports used by your Laravel application and the Vite development server are not conflicting.

If you have followed these steps and the issue still persists, it may be helpful to provide more information about your Laravel application's directory structure and any additional configuration files you have.

Please or to participate in this conversation.