11ty Aws screenshot

11ty Aws

Author Avatar Theme by Coryasilva
Updated: 9 Apr 2025
18 Stars

11ty, AWS, Tailwind, AlpineJS for the "Enterprise" folk.

Categories

Overview

This article discusses the use of 11ty-aws11ty, Alpine, and Tailwind on AWS to create a full-stack JavaScript application. The stack aims to minimize context switching and provide a unified ingress for both the static site and API Gateway using CloudFront. The article also includes instructions for getting started with the stack, suggestions for VSCode plugins, and a flow diagram.

Features

  • Full-stack JavaScript development
  • Minimal context switching
  • CloudFront as a unified ingress for static site and API Gateway
  • Support for API integration
  • Use of AWS CDK (Cloud Development Kit) for infrastructure deployment
  • Integration with 11ty, Alpine, and Tailwind

Installation

To install this stack, follow these steps:

  1. Configure your awscli.
  2. Update the file cdk/bin/static-site.ts with your domain name(s).
  3. Update the domain name(s) in cloudfront/static-rewrite.js.
  4. Run the command cd cdk && npm run cdk deploy StaticSiteInfra to deploy the infrastructure.
  5. Run the command npm run build to build the project.
  6. Run the command cd cdk && npm run cdk deploy StaticSiteDeploy to deploy the static site.
  7. Follow the provided 11ty and aws-cdk commands for further development and deployment.

Summary

This article introduces the use of 11ty-aws11ty, Alpine, and Tailwind on AWS for full-stack JavaScript development. The stack aims to reduce context switching and provides a unified ingress for both the static site and API Gateway using CloudFront. The article includes instructions for installation and deployment, as well as suggestions for VSCode plugins.