BrickLayouts is the easiest way for LEGO® builders to design stunning displays together, from anywhere, on any device.
This is the marketing website for BrickLayouts. It is a React single-page application with static prerendering for SEO, deployed to AWS S3 + CloudFront.
npm ci # Install dependencies
npm run dev # Start development server (http://localhost:3000)This project uses ESLint with the AirBnB JavaScript/TypeScript style guide.
npm run lint # Check for lint errors
npm run lint -- --fix # Auto-fix what can be fixedThe auto-generated Shadcn UI components (src/components/ui/) are excluded
from linting.
npm run build # Build the SPA to ./build
npm run prerender # Prerender all routes to static HTML (requires build/)
npm run build:static # Build + prerender + sitemap in one commandNote:
npm run prerenderrequires thebuild/directory to exist. Runnpm run buildfirst, or usenpm run build:staticwhich does everything.
The prerender script uses Playwright to visit each
route with headless Chromium and snapshot the fully-rendered HTML (including
<head> tags from react-helmet-async). This gives search engines, AI
crawlers, and social sharing previews complete HTML with proper meta tags,
canonical URLs, and JSON-LD structured data.
The site is deployed as static files to S3 and served via CloudFront. The
GitHub Actions workflow (.github/workflows/deploy.yml) runs on push to
main:
- Installs dependencies and Playwright
- Builds the app and prerenders all routes
- Generates
sitemap.xml - Syncs
build/to S3 with appropriate cache headers - Invalidates CloudFront cache
| Secret | Description |
|---|---|
AWS_ROLE_TO_ASSUME |
ARN of the IAM role for OIDC auth |
S3_BUCKET |
S3 bucket name (e.g., bricklayouts-website) |
CLOUDFRONT_DISTRIBUTION_ID |
(Optional) CloudFront distribution ID |
| Variable | Default | Description |
|---|---|---|
AWS_REGION |
us-east-1 |
AWS region for deployment |
src/
├── components/
│ ├── Home.tsx, Pricing.tsx, About.tsx, Contact.tsx, ... # Page components
│ ├── Navigation.tsx, Footer.tsx # Layout
│ ├── Seo.tsx # SEO + JSON-LD
│ └── ui/ # Shadcn UI components
├── App.tsx # Routes (React Router)
├── main.tsx # Entry point
└── index.css # Tailwind CSS (generated once, not rebuilt)
scripts/
├── prerender.mjs # Playwright prerender script
└── generate-sitemap.mjs # Sitemap generator