I am currently migrating a static Bootstrap site into a Laravel 10 application and I'm struggling with the directory structure. Should I be placing my external minified CSS and JS scripts in the resources folder or the public folder? Furthermore, what is the specific syntax required to ensure these assets load correctly using the Blade templating engine without causing 404 errors during deployment?
3 answers
To include external files in Laravel, you generally have two paths depending on your build tool. For static files that don't need processing, place them in the public/css or public/js directories and use the {{ asset('css/style.css') }} helper in your Blade header. This generates a full URL to the file. However, for modern workflows, you should place source files in resources/css and use the @vite(['resources/css/app.css', 'resources/js/app.js']) directive. This is the standard for Laravel 9 and 10, ensuring your assets are compiled, versioned, and optimized for production performance, which is vital for SEO and fast page load speeds.
Are you planning to use the built-in Vite bundler for these external files, or are you looking for a way to bypass the compilation step entirely for third-party libraries?
The most straightforward way is using the asset() helper within your Blade files. Just make sure the files are physically located in your public directory before calling them.
I agree with Megan. Using {{ asset(...) }} is the safest bet for beginners. It ensures the pathing remains consistent whether you are running the site on a local dev server or a live production URL.
Christopher, for third-party libraries like a specific jQuery plugin, I usually recommend just dropping them into the public folder. When you use the asset helper, it points directly to the public directory, so you don't have to worry about the Vite manifest file. It’s the quickest way to get external scripts running if you don't want to deal with NPM or complex build scripts during the initial development phase.