When I created the new laravel project and installed the breeze auth. Now if I run the “npm install” and then “npm run dev” command, terminal window gets stuck and not able to see anything on screen since long.
Let see all the possible ways those can work to fix the issue.
Why Npm run dev stuck at APP_URL is seen?
This Npm run dev window stuck basically because Laravel version 9.19.0 replaced the Mixer with Vite. For more information regarding Laravel Mixed bundel to Vite replacement, check Bundling Assets (Vite).
Vite is a new frontend build tool that enables a lightning-fast development environment while also packaging your code for production. When developing Laravel apps, you’ll often utilize Vite to bundle your application’s CSS and JavaScript files into production-ready assets.
Laravel works with Vite smoothly by offering an official plugin and Blade directive for loading assets for development and production.
How Choose between Vite And Laravel Mix?
Before moving to Vite, new Laravel apps used Mix, which is powered by webpack, for asset bundling. Vite focuses on making creating powerful JavaScript apps quicker and more productive.
Vite is an excellent choice if you are creating a Single Page Application (SPA), especially those created using tools like as Inertia.
Vite also works nicely with typical server-side rendered JavaScript “sprinkles” apps, such as those built using Livewire.
It does not, however, offer several capabilities that Laravel Mix does, such as the ability to put arbitrary assets into the build that are not explicitly referenced in your JavaScript application.
A vite.config.js file at the root of your project is used to configure Vite. You are free to modify this file to suit your requirements, and you may also install any additional plugins required by your application, such as @vitejs/plugin-vue or @vitejs/plugin-react.
The Laravel Vite plugin needs you to provide the application’s access points. These might be JavaScript or CSS files, or they could be preprocessed languages like TypeScript, JSX, TSX, or Sass.
Vite may be used in two ways. The dev command may be used to launch the development server, which is helpful while working locally. Changes to your files will be detected automatically by the development server and immediately reflected in all open browser windows.
Alternatively, using the build command will version and package your application’s assets, preparing them for deployment to production:
How to Fix the Npm run dev stuck at APP_URL?
Fix 1: Use the Old Laravel Version
To fix the Npm run dev stuck at APP_URL, downgrade your Laravel version to the old version Laravel version /= 9.1.0.
composer create-project Laravel/Laravel app_name 9.1.0
Fix 2: Use npm run build command
you can try to use the “npm run build” command rather than to use the npm run dev to solve the issue.
# Run the Vite development server...
npm run dev
# Build and version the assets for production...
npm run buildConclusion
To fix the Npm run dev stuck at APP_URL, downgrade your Laravel version to the old version Laravel version /= 9.1.0. also you can try to use the “npm run build” command rather than to use the npm run dev to solve the issue.