Basset is an alternative way to load CSS & JS assets

Last updated on by

Basset is an alternative way to load CSS & JS assets image

It's 2024 and I'm calling it - Server-Side Rendering has officially made a comeback:

  • in Laravel, where Livewire now has 46.000 installs per day
  • in Ruby on Rails with Hotwire
  • in Phoenix with Liveview
  • in web dev in general with HTMX

Now that "the old has become the new"... maybe it's time to re-visit another practice we've adopted from the Javascript ecosystem. Maybe it's time to... drop the build step? Crazy, I know! But there's been a lot of talk about no-build Laravel setups in my bubble. And there's one place where people invariably get stuck - "If we drop NPM, what do we do about JS dependencies?". Here's my answer to that - or at least an important first step.

What if instead of installing our JS dependencies with a package manager like NPM and bundling them... we just load them directly from the URL? You know... similarly to what the founder of NodeJS himself is doing in Deno. He has publicly said NPM has become a mess and created an alternative for the JS ecosystem... why don't we do the same for the Laravel ecosystem?

If you dream about the simple days when you could just load assets using asset(), try Basset - a better asset helper for Laravel. You just replace asset() with basset() to gain some super-powers:

  • assets from CDNs are downloaded to /storage and served from there;
  • vendor assets become possible to load;
  • non-public assets become possible to load;
  • it becomes impossible to double-load an asset during a request;

In short, basset() removes the limitations of asset(), allowing you to load any asset you want, safely. That means in addition to this:

<link href="{{ asset('path/to/public/file.css') }}">

You can safely do this:

<script src="{{ basset(storage_path('file.js')) }}">
<script src="{{ basset(base_path('vendor/org/package/assets/file.js')) }}">
<script src="{{ basset('https://cdn.com/path/to/file.js') }}">

This is a very simple solution for those who want to load assets "the old easy way" in their Laravel projects, because it solves a few problems with that "old way":

  • Don't want GDPR issues?
    • ✅ Solved - Basset will cache the asset to /storage and serve it from there.
  • Don't want to depend on a CDN being up?
    • ✅ Solved - the assets can be cached upon deployment (or on commit).
  • Don't want to load an asset twice, if used by multiple components on that page?
    • ✅ Solved - automatically.
  • Concerned about the performance of loading multiple JS files vs one big bundle?

Granted, Basset may not be a perfect asset loading solution. At least not for every project. It's only been around for 12 months, so it's missing things like importmaps and the like, to make it a 1-to-1 alternative to NPM and Deno's way. But it has been around for 12 months and has proven its usefulness.

Perhaps... it's time for us to take another look at how we load assets in our Laravel projects. Maybe we'll discover the simple way... is a good way. For some projects, at least. I suggest you give Basset a try. After all:

  • it's been in production for 1 year already;
  • it's maintained by the Backpack team;
  • it's got 110.000 downloads already;
  • it's under MIT License;

If you have feedback on it, open an issue on Github and tell the team about it. A v2 is due soon enough, and we want to incorporate as much feedback as possible.

Cristian Tabacitu photo

Creator of Backpack for Laravel

Cube

Laravel Newsletter

Join 40k+ other developers and never miss out on new tips, tutorials, and more.

image
Tinkerwell

Version 4 of Tinkerwell is available now. Get the most popular PHP scratchpad with all its new features and simplify your development workflow today.

Visit Tinkerwell
Laravel Forge logo

Laravel Forge

Easily create and manage your servers and deploy your Laravel applications in seconds.

Laravel Forge
Tinkerwell logo

Tinkerwell

The must-have code runner for Laravel developers. Tinker with AI, autocompletion and instant feedback on local and production environments.

Tinkerwell
No Compromises logo

No Compromises

Joel and Aaron, the two seasoned devs from the No Compromises podcast, are now available to hire for your Laravel project. ⬧ Flat rate of $7500/mo. ⬧ No lengthy sales process. ⬧ No contracts. ⬧ 100% money back guarantee.

No Compromises
Kirschbaum logo

Kirschbaum

Providing innovation and stability to ensure your web application succeeds.

Kirschbaum
Shift logo

Shift

Running an old Laravel version? Instant, automated Laravel upgrades and code modernization to keep your applications fresh.

Shift
Bacancy logo

Bacancy

Supercharge your project with a seasoned Laravel developer with 4-6 years of experience for just $2500/month. Get 160 hours of dedicated expertise & a risk-free 15-day trial. Schedule a call now!

Bacancy
Lucky Media logo

Lucky Media

Bespoke software solutions built for your business. We ♥ Laravel

Lucky Media
Lunar: Laravel E-Commerce logo

Lunar: Laravel E-Commerce

E-Commerce for Laravel. An open-source package that brings the power of modern headless e-commerce functionality to Laravel.

Lunar: Laravel E-Commerce
LaraJobs logo

LaraJobs

The official Laravel job board

LaraJobs
Larafast: Laravel SaaS Starter Kit logo

Larafast: Laravel SaaS Starter Kit

Larafast is a Laravel SaaS Starter Kit with ready-to-go features for Payments, Auth, Admin, Blog, SEO, and beautiful themes. Available with Vue and Livewire stacks.

Larafast: Laravel SaaS Starter Kit
SaaSykit: Laravel SaaS Starter Kit logo

SaaSykit: Laravel SaaS Starter Kit

SaaSykit is a Laravel SaaS Starter Kit that comes with all features required to run a modern SaaS. Payments, Beautiful Checkout, Admin Panel, User dashboard, Auth, Ready Components, Stats, Blog, Docs and more.

SaaSykit: Laravel SaaS Starter Kit
Rector logo

Rector

Your partner for seamless Laravel upgrades, cutting costs, and accelerating innovation for successful companies

Rector

The latest

View all →
The Ability to Prevent Destructive Commands From Running is Coming to Laravel 11 image

The Ability to Prevent Destructive Commands From Running is Coming to Laravel 11

Read article
Configuring Laravel With Additional Environment Files image

Configuring Laravel With Additional Environment Files

Read article
Real Time Command Line Monitoring With Laravel Top image

Real Time Command Line Monitoring With Laravel Top

Read article
A New Validation Rule and the Ability to Manually Fail a Command in Laravel 11.8 image

A New Validation Rule and the Ability to Manually Fail a Command in Laravel 11.8

Read article
New Array Find Functions in PHP 8.4 image

New Array Find Functions in PHP 8.4

Read article
Laracon AU 2024 tickets are now on sale image

Laracon AU 2024 tickets are now on sale

Read article