[fixed] Larvel Vite localhost To 127.0.0.1:8000
APP_URL: http://localhost not working
Answering for:
Vite npm run dev comming http://localhost not running http://127.0.0.1:8000/ in Laravel
Vite not running in http://127.0.0.1:8000/ it’s running http://localhost
How to run vite in http://127.0.0.1:8000/ not http://localhost
auto reload laravel with vite without refresh
In laravel 10 bydefault has vite installed, it’s really good but if you run npm run dev then it’s come APP_URL: http://localhost and if you click on it then it not open, here I’m showing you Larvel Vite localhost To 127.0.0.1:8000 auto load for your forntend.
It’s the simple process to run easily.
It’s showing you the APP_URL: http://localhost so you can change it form env file.
Go to your env file and change it http://localhost to http://127.0.0.1:8000/
APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:cp1VM4VC1EvJs3ra7vMByc57jqokyn4VRudx2/qd6yw4re=
APP_DEBUG=true
APP_URL=http://127.0.0.1:8000/
LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug
then save it.
It’s works for you.
Note. you need to include the vite css file and js file in the head of you html.
@vite(['resources/css/app.css', 'resources/js/app.js'])
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ str_replace('_', ' ', config('app.name', 'Laravel')) }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100">
@include('layouts.navigation')
<!-- Page Heading -->
@if (isset($header))
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
@endif
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
</body>
</html>
Thanks.