Tony Messias

February 2, 2022

Frontend Without Node, NPM, or Webpack in Laravel

I've been following the Rails/Phoenix recent moves to simplify their development workflows and requirements. One interesting thing is that they seem to want to move away from depending so much on Node.js and Webpack for their frontend development.

That's interesting! Laravel seems to have a different relationship with frontend tooling. For one, we don't seem to have that many problems with Webpack thanks to Laravel Mix, I think. Although, Rails had the Webpacker gem for a while now, and they still are moving away from it.

I think Laravel apps these days embrace the frontend tooling because, you know, we want to write modern applications that consume our back-end in some way or another. And "modern" needs JavaScript tooling, right? We have been through different phases with frontend approaches in Laravel. Just recently we had a "sprinkles of Vue.js components" phase, then "building SPAs separately from the JSON Laravel API", and then "modern monoliths with Inertia.js". Each with its merits. I'm not trying to say these are the "old ways". Don't get me wrong. I still have a place in my heart (and in some apps I help maintain) for Inertia.js and Vue.

All these approaches have something in common: they are based around Node.js tooling, such as NPM to manage frontend dependencies, as well as Webpack or any other bundler to make everything work (yes, I know Webpack is more than a bundler).

Developers working in Laravel apps, besides having PHP installed, they also need to have Node.js and NPM installed locally and, at least, available where they build their applications for production.

What if we could build modern frontend applications in Laravel without this need to have Node.js, NPM, or Webpack like in the Rails and Phoenix Worlds? Now we can!

I've been working on porting some of the Rails gems that made this all possible there to the Laravel World. I think this is becoming a viable way of building applications in Laravel. With Importmap Laravel and now Tailwind CSS Laravel we have the whole story for a Laravel application that uses Tailwind CSS and stays lean on JavaScript, using something like Alpine.js, Livewire, Turbo.js, and Stimulus.js to make applications with just enough JavaScript to make it interesting. It even works with Jetstream. Cheers to that!

I should point out that this approach is not for every application out there, of course. These are for apps and teams committed to staying lean on JavaScript, imo. Although it is technically possible to use React or Vue with import-maps, I also think it's not that common as you loose one of their most powerful things: transpilation. Both of these tools use some sort of templating engine that is not browser-friendly. I'm talking about JSX and SFC. If you do want to keep using them, I'd recommend you keep using Laravel Mix and Inertia.js.

But don't take this blindly. Try it out. And, if you do so, please reach out and let me know what you liked about it and what could be improved in those libs.

About Tony Messias