What to use for front-end builds?
Development and Programming
I’m wondering what people are using for front-end builds these days with EE. We’ve been using Laravel Mix for a few years but it looks like that’s being abandoned for Vite. I tried Vite but it doesn’t seem appropriate for EE projects. Anyone have recommendations for building CSS and JS with EE sites using Tailwindcss?
We use Tailwind with Vite on the frontend, works great. We have an EE add-on that does the asset management in the template (no hot reloading yet).
Allows for js and css, similar set up to Laravel (/resources/js and /resources/css)
I liked the look of Vite but couldn’t see how to get it working with EE. Also, monitoring changes to templates to trigger tailwind to recompile wasn’t obvious. I probably didn’t give it enough thought. Interested in how you’re doing it though.
I feel old school by saying: none of the above
¯\_(ツ)_/¯
I’ll pull it together for you, give me a day or so
we don’t use tailwind, or even bootstrap… we just roll our own HTML (with some starting points common to our builds)
Thanks @dougblackjr
@creativearc used to do that here. It’s temping to go back to the old school way!
So we use @Stephen Galbraith’s add-on: https://github.com/nerdgency/ee-vitesse
And then, our vite.config and tailwind.config go in the document root. These assume that you are using a public folder, and do NOT have your system folder in the same folder according to the best practices.
Then templates look like….
<link rel="preload" href="{exp:vitesse:asset resource='resources/css/app.css'}" as="style" />
<link rel="stylesheet" href="{exp:vitesse:asset resource='resources/css/app.css'}" />
<link rel="preload" href="{exp:vitesse:asset resource='resources/css/fa.css'}" as="style" />
<link rel="stylesheet" href="{exp:vitesse:asset resource='resources/css/fa.css'}" />And this plugin does hot reloading
Frontend… simple sites i still use Foundation, since it can be pretty light weight, and i’m used to the syntax. When it gets more complicated… i roll my own. straight up html/css/vanilla js or jquery. I’ve seen and used all that frontend crap over the years. No more SASS, LESS, SCSS, tailwind or any other halleluja frontend miracle framework (abandonware) for me. It should all be doable with a text editor, headbanging and the F5 key