{"id":51035656,"url":"https://github.com/bcarpio/react-tailwind-cf-acm-template","last_synced_at":"2026-06-22T05:32:24.738Z","repository":{"id":352135524,"uuid":"1176024718","full_name":"bcarpio/react-tailwind-cf-acm-template","owner":"bcarpio","description":"This is a template repo for a react tailwind webiste that uses cloud front, s3, and ACM deployed via terraform. ","archived":false,"fork":false,"pushed_at":"2026-04-18T02:23:05.000Z","size":63,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-18T04:27:10.972Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bcarpio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-08T14:13:03.000Z","updated_at":"2026-04-18T02:23:09.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/bcarpio/react-tailwind-cf-acm-template","commit_stats":null,"previous_names":["bcarpio/react-tailwind-cf-acm-template"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/bcarpio/react-tailwind-cf-acm-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcarpio%2Freact-tailwind-cf-acm-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcarpio%2Freact-tailwind-cf-acm-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcarpio%2Freact-tailwind-cf-acm-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcarpio%2Freact-tailwind-cf-acm-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bcarpio","download_url":"https://codeload.github.com/bcarpio/react-tailwind-cf-acm-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcarpio%2Freact-tailwind-cf-acm-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34636427,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-22T02:00:06.391Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-22T05:32:22.698Z","updated_at":"2026-06-22T05:32:24.731Z","avatar_url":"https://github.com/bcarpio.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-tailwind-cf-acm-template\n\nA production-ready template for deploying React + Tailwind CSS static sites on AWS with CloudFront, ACM, and Route53 - all managed with Terraform.\n\n## What's Included\n\n- **React 19** + TypeScript + Vite (SSR/SSG)\n- **Tailwind CSS v4** with custom theme\n- **AWS CloudFront** CDN with S3 origin and Origin Access Control\n- **ACM SSL certificates** with automatic DNS validation\n- **Route53** DNS management\n- **Auto-discovered blog system** - drop a TSX file, it's indexed automatically\n- **Sitemap generation** at build time\n- **Environment support** - dev (dev.example.com) and prd (example.com) via Terraform workspaces\n- **One-command deploy** - `npm run publish:prd`\n\n## Quick Start\n\nSee **[docs/setup-guide.md](docs/setup-guide.md)** for the full step-by-step walkthrough, including Terraform state bucket creation, workspace setup, DNS configuration, and deployment order.\n\n### The short version\n\n```bash\n# 1. Configure terraform\ncd terraform\ncp backend.tf.example backend.tf       # Set your S3 state bucket\ncp prd.tfvars.example prd.tfvars       # Set your domain\ncp dev.tfvars.example dev.tfvars       # Set your domain\n\n# 2. Init and create workspaces\nterraform init\nterraform workspace new prd\nterraform workspace new dev\n\n# 3. Create DNS zone first (prd workspace)\nterraform workspace select prd\nterraform apply -var-file=prd.tfvars -target=aws_route53_zone.main\n\n# 4. Update nameservers at your domain registrar, wait for propagation\n\n# 5. Full deploy\nterraform apply -var-file=prd.tfvars\n\n# 6. Deploy frontend\ncd ../ui\nnpm install\nexport SITE_DOMAIN=\"yourdomain.com\"\nnpm run publish:prd\n\n# 7. Deploy dev environment\ncd ../terraform\nterraform workspace select dev\nterraform apply -var-file=dev.tfvars\ncd ../ui\nnpm run publish:dev\n```\n\n**tfvars** - just plug in your domain:\n```hcl\nenvironment = \"prd\"\napp_name    = \"yourdomain.com\"\naws_region  = \"us-west-2\"\n```\n\n## Adding Blog Posts\n\nDrop a TSX file in `ui/src/pages/blogs/` with exported metadata:\n\n```tsx\nimport { BlogMetadata } from '../../types/blog'\nimport Navbar from '../../components/Navbar'\nimport Footer from '../../components/Footer'\n\nexport const metadata: BlogMetadata = {\n  title: 'My First Post',\n  description: 'A brief description for the blog index and SEO.',\n  date: '2025-03-15',\n  slug: 'my-first-post',\n  author: 'Your Name',\n  tags: ['Example']\n}\n\nexport default function MyFirstPost() {\n  return (\n    \u003cdiv className=\"min-h-screen flex flex-col\"\u003e\n      \u003cNavbar /\u003e\n      \u003cmain className=\"flex-grow\"\u003e\n        \u003carticle className=\"py-16 bg-white\"\u003e\n          \u003cdiv className=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\"\u003e\n            \u003ch1 className=\"text-4xl font-extrabold text-gray-900 mb-4\"\u003e{metadata.title}\u003c/h1\u003e\n            \u003cp\u003eYour blog content here...\u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/article\u003e\n      \u003c/main\u003e\n      \u003cFooter /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\nThe post automatically appears in the blog index, sitemap, and gets its own static HTML page at `/blogs/my-first-post`.\n\n## Adding New Pages\n\n1. Create component in `ui/src/pages/`\n2. Add route in `ui/src/main.tsx` and `ui/src/entry-server.tsx`\n3. Add to `staticRoutes` and `routeMeta` in `ui/scripts/generate-static.js`\n\n## Architecture\n\n```\n├── terraform/              # AWS infrastructure\n│   ├── main.tf             # Provider config (dual-region for CloudFront ACM)\n│   ├── variables.tf        # Input variables (app_name, environment)\n│   ├── locals.tf           # Domain logic (dev prefix, sanitized names)\n│   ├── s3.tf               # Frontend bucket (OAC) + root redirect bucket\n│   ├── cloudfront.tf       # CDN distributions + URL rewrite function\n│   ├── acm.tf              # SSL certificates (us-east-1) with DNS validation\n│   ├── route53.tf          # DNS zone + CloudFront records\n│   ├── *.tfvars.example    # Template configs - just add your domain\n│   └── backend.tf.example  # S3 state backend template\n│\n├── ui/                     # React frontend\n│   ├── src/\n│   │   ├── pages/blogs/    # Auto-discovered blog posts (just add .tsx files)\n│   │   ├── components/     # Navbar, Footer\n│   │   ├── utils/          # Blog discovery (import.meta.glob)\n│   │   └── types/          # TypeScript interfaces\n│   └── scripts/            # SSG + sitemap generation\n│\n├── docs/\n│   └── setup-guide.md      # Full step-by-step deployment walkthrough\n│\n├── CLAUDE.md               # AI assistant context (for Claude, GPT, etc.)\n└── Makefile                # fmt, validate, clean\n```\n\n## Commands\n\n| Command | Description |\n|---------|-------------|\n| `make fmt` | Format Terraform code |\n| `make validate` | Validate Terraform configuration |\n| `make clean` | Clean build artifacts |\n| `npm run dev` | Local dev server (in ui/) |\n| `npm run build:prd` | Production build with SSG |\n| `npm run publish:dev` | Build + deploy + invalidate (dev) |\n| `npm run publish:prd` | Build + deploy + invalidate (prd) |\n\n## Environment Strategy\n\n| Environment | Frontend | DNS Zone |\n|------------|----------|----------|\n| **prd** | www.example.com | Created here |\n| **dev** | www.dev.example.com | Shared from prd via SSM |\n\nDeploy prd first (creates the Route53 zone), then dev (reads zone ID from SSM).\n\n## Prerequisites\n\n- [Terraform](https://www.terraform.io/) \u003e= 1.5\n- [Node.js](https://nodejs.org/) \u003e= 18\n- [AWS CLI](https://aws.amazon.com/cli/) configured with appropriate credentials\n- A registered domain name\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbcarpio%2Freact-tailwind-cf-acm-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbcarpio%2Freact-tailwind-cf-acm-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbcarpio%2Freact-tailwind-cf-acm-template/lists"}