PANTstack
*November 2024 - In Progress*
Introduction
I built Crimson Critter with PrimeVue, Amplify, Nuxt, and Tailwind.
I made up the term PANTstack. I am not affiliated with the technology authors.
This is a quick and dirty “How-To” guide for how to build a similar site.
After a short introduction, the focus will be on doing, not explaining.
Philosophy
This will create a live website that allows you to write text content in Markdown. It will be fully customizable with opinionated drop-in code (PrimeVue, Tailwind). It will have lots of potential for powerful logic with a server component and cloud services (Amplify).
This is a personal project, and I want it to be easy and modern and fun. The setup itself is more complex than required for a simple blog site, but I want the potential power so I can build anything I like in the future.
I believe this is a great “hobbyist” tech stack. If you are a beginner, perhaps start with static websites with one framework, such as React or Vue. If you are a professional, perhaps choose less opinionated pieces so you are not reliant on magical code from PrimeFaces or AWS.
The rest of us, let’s do it!
I chose these technologies because I was either slightly familiar with them from my job (Vue, PrimeVue), or because I was interested in learning (Nuxt, Tailwind, Amplify).
Tech Choices
Why PrimeVue?
This implies using Vue, which I love. PrimeVue is a prebuilt component library from PrimeFaces. It’s great to drop in pre-themed components such as buttons, form inputs and data tables.
It’s free.
Why Amplify?
Years ago, I was an AWS expert. I have always managed my own AWS infrastructure with Terraform. I am currently learning web development, and searched for a “deploy my website fast” option so I could focus on websites. I’m trying AWS Amplify.
The first time I tried to deploy with Amplify it took less than 10 minutes. Setting up is fully ClickOps (set up via clicking in the AWS website instead of a CLI tool). I am wary of this sort of dark magic, but the process is simple and streamlined.
For personal projects with no heavy public traffic, it’s practically free.
Why Nuxt?
Nuxt is a meta-framework that has a few practical benefits (SEO, server) and many developer experience benefits (auto-importing, auto-routing, plugin support).
A meta-framework is likely overkill for some projects, and a normal static website would do just fine. However, I have not used a meta-framework so I am using this as a learning experience.
Why Tailwind?
Tailwind is a CSS framework that allows you to style quickly, inline, and without having to think of class names or manage complex processors.
Some people love it, some people do not. I love it. It does require a bit of setup to work with the other pieces, but once it’s set up, writing CSS becomes more intuitive.
PANTstack Setup
Prerequisites
- AWS account
- TODO...