How to use a root domain using Azure Static Web Apps and Domain.com

2022-03-09T00:00:00+00:00

I am currently using Azure Static Web Apps to host my site at www.plankido.com, with a domain registered on Domain.com. And I also have Google Workspace email on that domain.

I set up the CNAME record for the www subdomain following the Azure docs, and then I went to set up the apex domain. The Azure Static Web Apps documentation mentions an ALIAS record, which isn’t an option in Domain.com, with an alternative of a CNAME record if the host supports domain name flattening (which I’m still not clear of Domain.com does). My first attempt at fixing this was to set up CNAME for the root domain, and this worked - but then I realized emails weren’t getting through. So I turned that off and just lived with the non-www version not working for a bit. This meant that most use cases would work, as browsers tend to add the www, but, if you forced it to use the root domain with a link to https://plankido.com it was returning 403 Forbidden.

I took another crack at it today and after noticing a bit about “Forward to www subdomain” in the Microsoft docs I found Domain Pointers in Domain.com, and I now have a URL Stealth pointer to my Azure Static Web apps URL (https:// and all) and everything is lovely. The “Pointers & Subdomains” section is right above the “DNS & Nameservers” section I’d been dealing with in the domain.com sidebar.

Domain name configuration is one of those things where every service does it a little differently and it’s hard to find documents covering your exact configuration! I hope this helps!

Alpine.js drag and drop with Bootstrap 5

2022-03-07T00:00:00+00:00

I recently learned of Alpine.js and I find it really useful for adding bits of interactivity when you don’t want a full blown front end framework with a build process.

One thing I struggled with was implementing drag and drop. The available samples were all using Tailwind, and, it turns out the details of the CSS positioning are important and the translation from Tailwind to Bootstrap took a bit of trial and error.

<main class="container">
  <h1>Rank Ice Cream Flavors</h1>
  <div x-data="{ items: ['Chocolate', 'Vanilla', 'Strawberry', 'Cookies and Creme'], newItem:'', dragging: null, dropping: null}" @drop.prevent="items=dragDropList(items, dragging, dropping)" @dragover.prevent="$event.dataTransfer.dropEffect = &quot;move&quot;">
    <div class="list-group mb-3">
      <template x-for="(item, index) in items" :key="index">
        <div class="position-relative list-group-item" draggable="true" :class="{'border border-primary': dragging === index}" @dragstart="dragging = index" @dragend="dragging = null">
          <div><i class="bi bi-grip-vertical"></i><span x-text="item"></span></a><button type="button" class="btn btn-outline-danger btn-sm float-end" aria-label="Delete" @click="items.splice(index, 1);"><i class="bi-trash"></i></button></div>
          <div class="position-absolute" style="top: 0; bottom: 0; right: 0; left: 0;" x-show.transition="dragging !== null" :class="{'bg-secondary': dropping === index}" @dragenter.prevent="if(index !== dragging) {dropping = index}" @dragleave="if(dropping === index) dropping = null"></div>
        </div>
      </template>
    
       <div class="input-group mt-2"><input type="text" class="form-control form-inline" x-model="newItem"></input><button class="btn btn-primary form-inline" x-bind:disabled="newItem == ''"  @click="items.push(newItem);newItem=''">Add Flavor</button></div>
    </div>
  </div>
  <hr>
  <p class="text-muted">The drag and drop logic comes from <a href="https://codepen.io/ranjan-purbey/pen/xoEMOM">alpine-sortable</a> by Ranjan Purbey but it turns out the CSS positioning is important for this to work and it wasn't obvious how to convert from Tailwind to Bootstrap.</p>
</main>

var dragDropList = function (items, dragging, dropping) {
  if (dragging !== null && dropping !== null) {
    if (dragging < dropping) {
      items = [
        ...items.slice(0, dragging),
        ...items.slice(dragging + 1, dropping + 1),
        items[dragging],
        ...items.slice(dropping + 1)
      ];
    } else {
      items = [
        ...items.slice(0, dropping),
        items[dragging],
        ...items.slice(dropping, dragging),
        ...items.slice(dragging + 1)
      ];
    }
    dropping = null;
  }
  return items;
};

See on Codepen

Lisa Gaudette

How to use a root domain using Azure Static Web Apps and Domain.com

Alpine.js drag and drop with Bootstrap 5