Run Alpine.js on the server? Going beyond the JS sprinkles

I’ve been working on a package that allows you to take in Alpine.js components and returns some HTML.

You can try it at github.com/HugoDF/alpine-server-render or using by running npm i alpine-server-render (more info about alpine-server-render).

This email is supported by my GitHub Sponsors.

The newsletter is also almost at 1k subscribers so thanks to everyone, I’ll soon have to start paying for the newsletter service.

50 more to 1k @Alpine_JS Weekly Subscribers 🎉

— Hugo (@hugo__df) Sep 25, 2020

Tips

This week’s tips aren’t so much tips as an Alpine.js appreciation club.

AlpineJS is REALLY cool.

— Alex Standiford (@AlexStandiford) Sep 25, 2020

The hardest things in programming:

@laravelphp - Where should I place this class? 🧐

@LaravelLivewire - Should I go with Livewire or Inertia? 👀

@tailwindcss: - Is it text-bold or font-bold? 🤔

@tailwindui: - Extract alpine.js powered code from the demo iframe 🤨

— vova.yatsyuk (@vova_yatsyuk) Sep 23, 2020

@Alpine_JS and @htmx_org bring back the joy of good old jQuery times. With both of them it’s very easy to add some thoughtful behavior to a project without all the hassle of a JS tool chain. 🏆🏆🏆

— Mike Wink (@mikewink) Sep 23, 2020

Trying out #Tailwind and #AlpineJS on a project at work and I’m finding it to be such a great combo so far. Long class lists are doing my head in a bit but the outcome looks good so 🤷🏻‍♂️

— Andy Holmes (@andyjh07) Sep 23, 2020

Going to be experimenting with AlpineJS https://t.co/lEevr9uArx for some small(er) WordPress plugin admin UIs because my gutbrain says it’s going to be ::chefs kiss::

— Jon Christopher (@jchristopher) Sep 23, 2020

As someone who doesn’t love all the tooling and cruft that goes along with JS development, the combination of @LaravelLivewire and @Alpine_JS is such a breath of fresh air.

— William Earnhardt (@earnjam) Sep 22, 2020

[@Alpine_JS](https://twitter.com/Alpine_JS) says: ‘Think of it like [@tailwindcss](https://twitter.com/tailwindcss) for JavaScript.’

I’m remaking my website to be super simple, super fast, and above all accessible.

So far I’m working with [@tailwindcss](https://twitter.com/tailwindcss) , @eleven_ty , and [@Alpine_JS](https://twitter.com/Alpine_JS) and loving the whole process.

— AliLynne 🏳️‍🌈 (@alilynnet) Sep 22, 2020

My new dream team for small projects @Alpine_JS and @tailwindcss 💪️

— Peter Thaleikis (@spekulatius1984) Sep 22, 2020

The combination of Alpine JS and Blade components is so good 🤯

— Marcel Pociot 🧙‍♂️ (@marcelpociot) Sep 22, 2020

Made with Alpine.js

If you’ve got something to share with the Alpine.js community, you can submit your link or reach out to me on twitter @hugo__df.

Here are this week’s Alpine.js adopters:

• random-walk by @chapmanjacobd is built with Alpine.js
• nebulapackage.com by @LarsKlopstra - a minimalistic and easy to use administration package for Laravel is built with Laravel and Alpine.js
• sr-100daysofcode.netlify.app/day-042-launch-of-11ta-template-system/, the home of the 11TA Template System by @shanerobinson is built with Eleventy, Alpine and Tailwind
• @ayqyoo is prototyping something using Alpine.js

yo @adamwathan @calebporzio we’re going live with our major update to our report card site this week…lots of #tailwind, #tailwindui and @Alpine_JS. We still have a long way to go, but you guys have made this revamp tolerable and dare I say…enjoyable.

— David Kay (@dbenkay) Sep 22, 2020

Demos:

• Endless, rotating, clickable SVG circle with Alpine and Tailwind by @kevinbatdorf
• Simple inline confirm delete made easy with Alpine by @LarsKlopstra
• An attempt at a toggle button by @a7medsayed

Articles & Tutorials

Not much in terms of articles & tutorials this week.

[Podcast] Jetstream, Fortify & the TALL Preset by @undefvar

Code & Tools

headlessui.dev by @adamwathan, @malfaitrobin & co (at Tailwind Labs) currently only has Vue and React but stay tuned for an Alpine.js version.

Published as a package alpine-server-render

npm install alpine-server-render

const {render} = require(‘alpine-server-render’);

render(<div x-data="{ msg: 'Hello' }" x-text="msg"></div>, {strip: true})

github.com/HugoDF/alpine-server-render

— Hugo (@hugo__df) Sep 24, 2020

axiomtheme.com by @axiomtheme v0.7.2 has been released with updates to Alpine JS and Tailwind CSS to the latest versions, and updates the Tailwind CSS config file in preparation for v2.0.

v2.0.1 of the TALL preset for Laravel by @ryangjchandler & contributors has been released Check it out: github.com/laravel-fronte….

If you haven’t checked it out, TA Gallery by @markusantonwolf - A light-weight (6.2kB), responsive and mobile first image and text gallery based on Tailwind CSS and Alpine JS.