SST ION STATIC SITE + API BACKEND

sst.config+static-site-with-backend.ts

// file sst.config.ts
// used for static site configurations where frontend and backend share same domain, but backend is in path /api/*

/// <reference path="./.sst/platform/config.d.ts" />

import {output} from "@pulumi/pulumi";

export default $config({
  app(input) {
    return {
      name: "demo",
      removal: input?.stage === "production" ? "retain" : "remove",
      home: "aws",
    };
  },
  async run() {
    const api = new sst.aws.ApiGatewayV2("MyApi",{
      domain: {
        name: apiUrl(),
        hostedZone,
        path: 'api'
      },
      cors: {
        allowCredentials: true,
        allowOrigins: [pd(siteUrl())],
        exposeHeaders: ['*'],
        allowHeaders: ['Accept', 'Content-Type', 'Authorization'],
        allowMethods: ['GET', 'PATCH', 'POST', 'DELETE', 'PUT']
      },
    });

    api.route("GET /auth/payload", {
      handler: "packages/functions/auth/index.payload",
    });

    // Define the API origin
    const apiOrigin = {
      originId: "api",
      domainName: apiUrl(), 
      customOriginConfig: {
        originProtocolPolicy: "https-only",
        originReadTimeout: 20,
        httpPort: 80,
        httpsPort: 443,
        originSslProtocols: ["TLSv1.2"],
      },
    };

    new sst.aws.StaticSite("Frontend", {
      path: "packages/frontend",
      domain: {
        name: siteUrl(),
        hostedZone
      },
      build: {
        command: "yarn build",
        output: "build"
      },
      transform: {
        cdn: (args) => {
          args.origins = output(args).apply((frontend) => [apiOrigin, frontend.origins[0]])
          args.orderedCacheBehaviors = [{
            targetOriginId: apiOrigin.originId,
            pathPattern: "/api/*",
            trustedKeyGroups: [],
            allowedMethods: [
              "DELETE",
              "GET",
              "HEAD",
              "OPTIONS",
              "PATCH",
              "POST",
              "PUT",
            ],
            viewerProtocolPolicy: "redirect-to-https",
            cachedMethods: ["GET", "HEAD"],
            defaultTtl: 0,
            compress: true,
            cachePolicyId: '4135ea2d-6df8-44a3-9df3-4b5a84be39ad', //CACHING_DISABLED
            originRequestPolicyId: 'b689b0a8-53d0-40ab-baf2-68738e2966ac' //ALL_VIEWER_EXCEPT_HOST_HEADER
          }]
          return undefined
        }
      }
    })
  },
});

const apiUrl = () => `api.${$app.name}-${$app.stage}.${hostedZone}`
const siteUrl = () => `${$app.name}-${$app.stage}.${hostedZone}`

const hostedZone = 'wearebitcoin.org'

// parse domain
const pd = (dn) => `https://${dn}/`