Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

tabacitu's avatar

New way to load CSS & JS assets - Basset. What do you think?

Hey everyone! My colleague Antonio and I have spent the past few months building this package that we think is very cool - would love to see what you think about it. It's helped Backpack's package size go from 90MB down to 2MB (😱) and I think it could help other projects and packages with similar improvements.

Basically.. it's a super-easy way to use CSS and JS assets. You get to use them the same way, not matter if they're from CDNs, from non-public directories etc. You do @basset('https://example.com/path/to/file.css') and it will take that asset from wherever it is, cache it in a public directory in your Laravel app, and serve it, finally outputting <link href="/bassets/path/to/file">

It's especially useful for those who don't like bundling, NPM etc. Soo... people like me 😅

That way:

  • you no longer worry about GDPR with CDNs;
  • you don't have to manually publish assets from packages (you can load them indirectly from the vendor dir);
  • you don't have to move stuff from non-public directories to public directories;
  • you can even point to assets that are outside the current Laravel app (but... yeah... maybe you shouldn't 😅);

What do you think - good idea or bad, for your projects? Any projects you would use this on? What should we do to better explain what this does and its benefits?

More info here: https://github.com/laravel-backpack/bassets

Thanks for the feedback!

(long time Laracasts user, just created a new account to not use the company one)

0 likes
16 replies
Tray2's avatar

Not to burst your bubble on your acheivement, but isn't this already handled in Laravel with Vite?

tabacitu's avatar

@Tray2 it's exactly an alternative to using Vite, yes.

If you don't want to compile your assets, you don't need NPM, Vite or Mix/Webpack... so why have it it? Why even learn it in the first place? You can just do @basset('path/to/file/or/cdn') in your blade files... and you'll have your assets on page.

Obviously wouldn't work for Tailwind or other stuff that NEED compilation (eg. when building SPAs). But it works very well for my stack: Livewire + Bootstrap / Bulma. You can load each asset individually, like "the good old days" 😉

So I guess it's for:

  • beginner devs - instead of telling them about asset compilation, I just told them "use @basset() instead of <link> or <script>", that's it; not as steep, the learning curve;
  • old grumpy devs, like me, who would like dev life to be as simple as it were before (queue the dial-up modem sound);
  • devs using Livewire + Bootstrap/Bulma (no Tailwind, no React, no VueJS unless as script);

Hmm this was very useful, thank you. Does this explain better what this is?

1 like
Tray2's avatar

@tabacitu I feel you, what is wrong with a good old fashioned

> js
> styles
index.html
tabacitu's avatar

@Tray2 hey hey hey! Don't forget your index_old_do_not_delete.html!

2 likes
MohamedTammam's avatar

Recently I had a client asking to fix the website assets. The previous developer used jsdelivr CDN and it stopped working for some reason. And since the client didn't want to use CDNs again, I had to download the files locally and keep them into the assets folder of the project and changing all URLs.

I see a good use for this package. nice job 👍

2 likes
martinbean's avatar

@tabacitu This looks like it could be handy for SVGs.

I’m having an issue after switching to Vite that, referencing SVGs is fine if I use npm run build. But if I use npm run dev and run the Vite server, SVGs stop working because the Vite server’s port is different to the web page.

Is there a helper function (i.e. basset($path)) rather than a Blade directive? I’m not a fan of using directives inside HTML attributes.

1 like
martinbean's avatar

What do you expect the basset() helper to return

@tabacitu Just whatever the Blade directive returned. I’d rather write:

<img src="{{ basset('path/to/svg') }}">

Than:

<img src="@basset('path/to/svg')">
tabacitu's avatar

@martinbean I understand, thanks!

If we do this right, it should be either:

<img src="{{ basset('path/to/file.svg') }}">

or

@basset('path/to/file.svg')

both would output:

<img src="https://yourapp.com/bassets/path/to/file.svg'">

Rephrased: when you're using the blade directive, you shouldn't need to write the HTML element at all. Basset infers it from the file type.

--

Very good ideas, thank you! On it! We'll cover images and SVGs ASAP and reply here when done.

MohamedTammam's avatar

@tabacitu I can submit a PR for basset helper function on the weekend. Sounds like a promising package!

1 like
tabacitu's avatar

@martinbean I have great news! @mohamedtammam submitted a PR, our team member Antonio reviewed and launched it. Basset now has basset() which works exactly as you described.

Thanks for the suggestion! (and of course thanks Mohamed for the PR 🙏)

2 likes

Please or to participate in this conversation.