Assets paths in blade

Hi, it seems I cannot find this info in laravel docs or laracasts. What I'd like to know is, say I have this:

@push('scripts')
    <script src="[PATH]seed-create.js"></script>
@endpush

@push('styles')
    <link href="[PATH to npm_modules/filepond/dist]/filepond.css" rel="stylesheet" />
@endpush

What should I write for PATH? I mean:

how can I reference a standalone script from a blade template?
and should I pass the resources path or the public/dist one?
and what if I want to directly reference a script coming directly from npm_modules? for example npm_modules/filepond/dist/filepond.js?

LaryAI

2 years ago

Level 58

When you're working with assets in Laravel Blade templates, you typically want to use the asset() helper function to generate a URL for your assets. Here's how you can modify your code to use the asset() helper:

@push('scripts')
    <script src="{{ asset('js/seed-create.js') }}"></script>
@endpush

@push('styles')
    <link href="{{ asset('vendor/filepond/filepond.css') }}" rel="stylesheet" />
@endpush

In the above examples, the asset() helper function assumes that you are referencing assets that are located in the public directory of your Laravel application. Here's what you need to know:

Referencing a standalone script from a blade template: You should place your standalone JavaScript file in the public/js directory and then reference it using the asset() helper as shown above.
Resources path vs. public/dist path: You should always reference the public directory path, as the resources directory is not publicly accessible. During your build process (if you're using tools like Laravel Mix), you should compile your assets and place them in the appropriate directory within the public folder.
Referencing a script directly from node_modules: You should not reference scripts directly from the node_modules directory because it is not publicly accessible from the web. Instead, you should use a build tool like Laravel Mix to compile these assets and place them in the public directory. Here's an example of how you might do this with Laravel Mix:

// webpack.mix.js
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .copy('node_modules/filepond/dist/filepond.js', 'public/js/filepond.js')
   .copy('node_modules/filepond/dist/filepond.css', 'public/css/filepond.css');

After running npm run dev or npm run production, you can then reference the filepond.js and filepond.css files from the public/js and public/css directories, respectively, using the asset() helper in your Blade templates.

Remember to run php artisan optimize or php artisan optimize:clear after adding new assets to ensure that the symbolic links are updated and the cache is cleared.

martinbean

2 years ago

Best Answer

Level 80

and what if I want to directly reference a script coming directly from npm_modules? for example npm_modules/filepond/dist/filepond.js?

@stratboy You can’t reference files in your node_modules directory because it (should be) above your “public” directory and not publicly accessible.

Instead, you should be building your assets using something like Vite, which will then put the compiled files in a public/build directory. You can then reference these assets using the @vite directive in your Blade templates.

stratboy

2 years ago

Level 5

@martinbean thank you, I have another question: I have a main layout component (views/layouts/app.blade.php) which calls the shared css and javascripts, and also sets stacks for page-specific assets:

    <head>
        [...stripped for clarity...]

        @stack('styles')

        @vite(['resources/css/app.css', 'resources/js/app.js'])

        @stack('scripts')
    </head>

then I have a page template (views/seeds/create.blade.php), which pushes its own js (and then I should add page-specific css too):

@push('scripts')
    @vite(['resources/js/seed-create.js'])
@endpush

If I now check the generated source I find the following:

<script type="module" src="http://127.0.0.1:5173/@vite/client">
</script><link rel="stylesheet" href="http://127.0.0.1:5173/resources/css/app.css" />
<script type="module" src="http://127.0.0.1:5173/resources/js/app.js"></script>
<script type="module" src="http://127.0.0.1:5173/@vite/client">
</script><script type="module" src="http://127.0.0.1:5173/resources/js/seed-create.js"></script>

As you can see, <script type="module" src="http://127.0.0.1:5173/@vite/client"> (which I also I have no idea what is for) is written 2 times. Why and how to avoid?

Please or to participate in this conversation.