Deploy SvelteKit on AWS

Deploy your SvelteKit applications to AWS using Thunder patterns. This guide covers static deployments and server-side rendering options.

SvelteKit offers flexible rendering modes that can be deployed using two Thunder constructs:

  1. Static Deployment — Deploy Static site generation (SSG) or client-side rendered Single-page apps (SPAs) built with SvelteKit - using S3 and CloudFront with the Static construct
  2. Server-Side Rendering (SSR) — Deploy server-rendered SvelteKit applications using ECS Fargate with the Fargate construct

Static (SSG/SPA) Deployment

Deploy static or client-side rendered SvelteKit applications to S3 and CloudFront using the Static construct. Choose the configuration that best fits your needs:

Create Project

Terminal window
npx sv create

Configure SvelteKit for SSG/SPA

Use adapter-static to prerender your entire site at build time:

svelte.config.js
import adapter from '@sveltejs/adapter-static';


export default {
  kit: {
    adapter: adapter(),
  },
};

Enable prerendering for all pages:

src/routes/+layout.ts
export const prerender = true;

Optionally, configure prerendering options:

svelte.config.js
import adapter from '@sveltejs/adapter-static';


export default {
  kit: {
    adapter: adapter({
      pages: 'build',
      assets: 'build',
      fallback: null,
      compress: true,
      strict: true
    }),
  },
};

Install Dependencies and Setup Stack

Terminal window
npm i tsx @thunder-so/thunder --save-dev
stack/index.ts
import { Cdk, Static, type StaticProps } from "@thunder-so/thunder";


const myApp: StaticProps = {
  env: {
    account: 'your-account-id',
    region: 'us-east-1'
  },
  application: 'your-application-id',
  service: 'your-service-id',
  environment: 'production',


  rootDir: '', // e.g. 'frontend' for monorepos
  outputDir: 'build',
};


new Static(
  new Cdk.App(),
  `${myApp.application}-${myApp.service}-${myApp.environment}-stack`,
  myApp
);

Deploy

Build and deploy your static SvelteKit site:

Terminal window
npm run build
npx cdk deploy --all --app="npx tsx stack/index.ts"

After deployment, you’ll receive a CloudFront URL to access your static site.

Full Stack Deployment

Deploy server-side rendered SvelteKit applications using ECS Fargate and Application Load Balancer with the Fargate construct. This pattern is ideal for MPA and full-stack applications where you need server-side rendering, database integration, or API routes.

Configure SvelteKit for SSR

Use adapter-node for Node.js server deployment:

svelte.config.js
import adapter from '@sveltejs/adapter-node';


export default {
  kit: {
    adapter: adapter(),
  },
};

By default, SvelteKit uses server-side rendering (SSR) for the initial page load, which improves SEO and perceived performance. You can also optionally prerender specific pages while keeping others server-rendered:

src/routes/about/+page.ts
export const prerender = true; // Only for static pages

Install Dependencies and Setup Stack

Terminal window
npm i tsx @thunder-so/thunder --save-dev
stack/index.ts
import { Cdk, Fargate, type FargateProps } from "@thunder-so/thunder";


const svcProps: FargateProps = {
  env: {
    account: 'your-account-id',
    region: 'us-west-2'
  },
  application: 'your-application-id',
  service: 'your-service-id',
  environment: 'production',


  rootDir: '', // e.g. 'app' for monorepos
};


new Fargate(
  new Cdk.App(),
  `${svcProps.application}-${svcProps.service}-${svcProps.environment}-stack`,
  svcProps
);

Build Settings Using Nixpacks

Configure automatic containerization with Nixpacks:

stack/index.ts
const svcProps: FargateProps = {
  // ... other props


  buildProps: {
    buildSystem: 'Nixpacks',
    installcmd: 'bun install',
    buildcmd: 'bun run build',
    startcmd: 'bun start',
  },
};

Build Settings Using Docker Container

Alternatively, use a custom Dockerfile:

Dockerfile
FROM public.ecr.aws/docker/library/node:20-alpine AS base


FROM base AS builder
WORKDIR /app


COPY package*.json ./
RUN npm ci


COPY . .
RUN npm run build


FROM base AS runner
WORKDIR /app


ENV NODE_ENV=production


COPY --from=builder /app/build ./


EXPOSE 3000


CMD ["node", "index.js"]
stack/index.ts
const svcProps: FargateProps = {
  // ... other props


  serviceProps: {
    dockerFile: 'Dockerfile',
    port: 3000,
  },
};

Environment Variables and Secrets for SSR

Configure runtime environment variables and secrets:

stack/index.ts
const svcProps: FargateProps = {
  // ... other props


  serviceProps: {
    variables: [
      { NODE_ENV: 'production' },
      { PUBLIC_API_URL: 'https://api.example.com' }
    ],
    secrets: [
      {
        key: 'DATABASE_URL',
        resource: 'arn:aws:secretsmanager:us-west-2:123456789012:secret:/my-app/DATABASE_URL-abc123'
      },
    ],
  },
};

Deploy

Build and deploy your containerized application:

Terminal window
npm run build
npx cdk deploy --all --app="npx tsx stack/index.ts"

After deployment, you’ll receive an Application Load Balancer URL to access your application.