skills.rest
schuettc
schuettcCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

setup-frontend

Automate Vite + React frontend setup and deployment to S3 with CloudFront via CDK.

1|Updated Feb 28, 2026
Search Tags:#react#vite#spa#s3#hosting#cdk#cloudfront
One-click install
npx skills add https://github.com/schuettc/website-deployment-plugin --skill setup-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: setup-frontend
Source: https://github.com/schuettc/website-deployment-plugin/tree/main/plugin/skills/setup-frontend
Command: npx skills add https://github.com/schuettc/website-deployment-plugin --skill setup-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Set up and deploy a modern Vite + React frontend to a scalable, CDN-backed hosting stack using S3 + CloudFront, replacing manual static hosting with an automated pipeline.

Core Features & Use Cases

  • Create and migrate a Vite + React project structure, including proxying API calls to a backend or API Gateway.
  • Configure Vite for production builds and generate an optimized, hashed asset bundle ready for S3 deployment.
  • Define a CDK-based frontend stack that provisions an S3 bucket, Origin Access Control, CloudFront distribution, and deployment steps with proper cache policies.
  • Enable SPA routing with CloudFront custom error responses and automated invalidation after deploy, ensuring smooth navigation and fresh content.

Quick Start

Set up a Vite + React app and deploy it to S3 behind CloudFront.

Frequently Asked Questions about setup-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I deploy a React SPA to S3 and CloudFront using CDK?▼

Deploy a React SPA to S3 and CloudFront by defining a CDK stack that provisions an S3 bucket with Origin Access Control, a CloudFront distribution, and a build step that compiles the Vite frontend and uploads the optimized assets to S3.

What's the best way to configure CloudFront cache policies for a Vite React app?▼

Configure CloudFront cache policies for a Vite React app by setting long TTLs for hashed asset bundles and short, aggressive cache policies for index.html to ensure smooth SPA routing and immediate content updates after deployment invalidation.

How does SPA routing work with S3 and CloudFront hosting?▼

SPA routing with S3 and CloudFront hosting works by configuring CloudFront custom error responses to return index.html for 404 errors, allowing client-side navigation to handle all paths seamlessly without server-side routing configuration.

Do I need Origin Access Control to host a frontend on S3?▼

Origin Access Control is needed to securely host a frontend on S3 by restricting direct bucket access, ensuring that CloudFront serves all content securely and the S3 bucket remains private.

Can I proxy API calls from a Vite frontend to API Gateway during development?▼

You can proxy API calls from a Vite frontend to API Gateway or a backend service during development by configuring the Vite project structure to route requests, enabling seamless serverless API integration before production deployment.

Why should I use CDK for frontend hosting instead of manual S3 setup?▼

Using CDK for frontend hosting instead of manual S3 setup automates the end-to-end provisioning of a CDN-backed pipeline, replacing manual static hosting with a reusable, infrastructure-as-code deployment workflow.

Related Skills

Explore More Software Engineering Skills→
7a336e6e7a336e6e
1

scaffolding-frontend

Initialize a Vite React TypeScript project with standardized structure and tooling.

Community
Intermediate
gaiastudio-aigaiastudio-ai
2

gaia-test-a11y

Run automated accessibility tests on deployed web applications with axe-core, pa11y, and Lighthouse.

Official
Advanced
leonj1leonj1

aws-static-hosting

Deploy static websites to AWS using S3 and CloudFront.

Community
Intermediate
freedomw1987freedomw1987
2

cdk-ecs-fargate-deploy

Deploy full-stack AWS containerized apps with a single CDK stack.

Community
Advanced