Wednesday, March 15, 2023
HomeJavascriptAn Alpine.js Template for Glitch

An Alpine.js Template for Glitch

I found Glitch just a few months in the past, and whereas I have never used it a lot since then, the extra I do, the extra I actually dig it. When engaged on my weblog submit yesterday, I shared the demo as a Glitch mission, you possibly can see it right here if you want. Whereas establishing the mission, I fumbled a bit with the proper order of script tags, which was completely my fault, however understanding my reminiscence I wished to notice what labored for me, and share it with others. Let’s begin with the code first.

This is an extremely primary HTML web page that hundreds up Alpine, a method sheet, and a JavaScript file:

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8" />
    <meta identify="viewport" content material="width=device-width, initial-scale=1" />
    <hyperlink rel="icon" href="" />

    <hyperlink rel="canonical" href="" />
    <hyperlink rel="stylesheet" href="/model.css" />

    <div x-data="app" x-cloak>

    <script src="/script.js" defer></script>
    <script defer src=""></script>

I fairly persistently use app for my Alpine purposes, however definitely, you possibly can identify it a bit higher. My model sheet solely incorporates the x-cloak definition:

[x-cloak] { show: none !necessary; }

And here is script.js:

doc.addEventListener('alpine:init', () => {
  Alpine.information('app', () => ({
    async init() {

Once I write Alpine, I do not like together with code within the HTML, so I do the whole lot inside an alpine:init block. I additionally nearly all the time use the init technique, so I’ve acquired an empty one there.

Lastly, and I forgot this half after I printed the weblog submit a couple of minutes in the past, I added an .eslintrc.json file in order that the Glitch editor would not complain in regards to the Alpine world:

  "globals": {
    "Apline": "readonly"
  "parserOptions": {
    "ecmaVersion": "newest"
  "env": {
    "es6": true

Cool. So how do you utilize this? You could possibly copy and paste, however Glitch makes this simpler. Click on New Mission within the higher right-hand UI:

Glitch new project menu

And choose Import from GitHub. Within the immediate, enter the repo I created for my template:

I did not embrace a README in there as a result of it might simply be one thing you would need to take away or edit in your mission. All in all, it is fairly minimal, which actually is what I want when beginning new initiatives. Anyway, get pleasure from!

Photograph by Daniel Leone on Unsplash



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments