Setup static site

Author: thdxr

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 .sst
 .build
+yarn-error.log

frontend/package.json

@@ -2,7 +2,7 @@
   "name": "@acme/frontend",
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "sst-env -- vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
@@ -12,6 +12,7 @@
     "urql": "^2.0.6"
   },
   "devDependencies": {
+    "@serverless-stack/static-site-env": "^0.56.2",
     "@types/react": "^17.0.33",
     "@types/react-dom": "^17.0.10",
     "@vitejs/plugin-react": "^1.0.7",

frontend/src/config.ts

@@ -0,0 +1,4 @@
+export const Config = {
+  APOLLO_URL: import.meta.env.VITE_APOLLO_URL as string,
+};
+console.log("Config", Config);

frontend/src/main.tsx

@@ -3,9 +3,10 @@ import ReactDOM from "react-dom";
 
 import { Todos } from "./pages/Todos";
 import * as urql from "urql";
+import { Config } from "./config";
 
 const client = urql.createClient({
-  url: "https://d7nn8pnx3g.execute-api.us-east-2.amazonaws.com",
+  url: Config.APOLLO_URL,
 });
 
 ReactDOM.render(

stacks/Api.ts

@@ -1,15 +1,19 @@
 import * as sst from "@serverless-stack/resources";
 
 export class Api extends sst.Stack {
+  public readonly outputs: {
+    apollo: string;
+  };
+
   constructor(scope: sst.App) {
-    super(scope, "gql");
+    super(scope, "api");
 
     const apollo = new sst.ApolloApi(this, "apollo", {
       server: "services/apollo/apollo.handler",
     });
 
-    this.addOutputs({
-      Apollo: apollo.url,
-    });
+    this.outputs = {
+      apollo: apollo.url,
+    };
   }
 }

stacks/Frontend.ts

@@ -0,0 +1,23 @@
+import * as sst from "@serverless-stack/resources";
+import { Api } from "./Api";
+
+type Props = {
+  api: Api["outputs"];
+};
+
+export class Frontend extends sst.Stack {
+  constructor(scope: sst.App, props: Props) {
+    super(scope, "frontend");
+
+    const site = new sst.StaticSite(this, "frontend", {
+      path: "frontend",
+      environment: {
+        VITE_APOLLO_URL: props.api.apollo,
+      },
+    });
+
+    this.addOutputs({
+      Site: site.url,
+    });
+  }
+}

stacks/index.ts

@@ -1,5 +1,6 @@
 import * as sst from "@serverless-stack/resources";
 import { Api } from "./Api";
+import { Frontend } from "./Frontend";
 
 export default function main(app: sst.App): void {
   app.setDefaultFunctionProps({
@@ -8,5 +9,8 @@ export default function main(app: sst.App): void {
     environment: {},
   });
 
-  new Api(app);
+  const api = new Api(app);
+  new Frontend(app, {
+    api: api.outputs,
+  });
 }

yarn.lock

@@ -5176,6 +5176,38 @@
     xstate "^4.26.1"
     zod "^3.11.6"
 
+"@serverless-stack/core@^0.56.2":
+  version "0.56.2"
+  resolved "https://registry.yarnpkg.com/@serverless-stack/core/-/core-0.56.2.tgz#a552aa12345055eec84ddaff1da595aa8b601108"
+  integrity sha512-67n9vGOn9KIHCXDED3E5eUKfFgOyejisaA3Iy0+7ybI9sdDFN49rrj/F/SQWm0YlnfDD7wak0l4CaMa1iBD/fw==
+  dependencies:
+    "@aws-sdk/client-s3" "^3.45.0"
+    "@trpc/client" "^9.16.0"
+    "@trpc/react" "^9.16.0"
+    "@trpc/server" "^9.16.0"
+    "@types/picomatch" "^2.3.0"
+    aws-cdk "1.132.0"
+    aws-sdk "^2.761.0"
+    chalk "^4.1.0"
+    chokidar "^3.5.2"
+    cross-spawn "^7.0.3"
+    dataloader "^2.0.0"
+    dendriform-immer-patch-optimiser "^2.1.0"
+    dotenv "^10.0.0"
+    dotenv-expand "^5.1.0"
+    express "^4.17.1"
+    fs-extra "^9.0.1"
+    immer "^9.0.7"
+    js-yaml "^4.1.0"
+    log4js "^6.3.0"
+    picomatch "^2.3.0"
+    remeda "^0.0.32"
+    stun "^2.1.0"
+    typescript "^4.4.3"
+    uuid "^8.3.2"
+    xstate "^4.26.1"
+    zod "^3.11.6"
+
 "@serverless-stack/nextjs-core@^0.1.9":
   version "0.1.9"
   resolved "https://registry.yarnpkg.com/@serverless-stack/nextjs-core/-/nextjs-core-0.1.9.tgz#ca480e8081df5d262ed5f61ef44584e130198e17"
@@ -5268,6 +5300,15 @@
     typescript "^4.4.3"
     zip-local "^0.3.4"
 
+"@serverless-stack/static-site-env@^0.56.2":
+  version "0.56.2"
+  resolved "https://registry.yarnpkg.com/@serverless-stack/static-site-env/-/static-site-env-0.56.2.tgz#4c972dc717722671c2a2b1d8ba32f4c950b37876"
+  integrity sha512-SJ1AXu90oEgn4aaSJJGBeBeaeokLuMLIGKiGD8/tmW/QI72YYNzJNHu/mMHFokvNwl4Uxq3gmBclP39UyUaKYA==
+  dependencies:
+    "@serverless-stack/core" "^0.56.2"
+    chalk "^4.1.0"
+    yargs "^15.4.1"
+
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"