Restructure app to multiple stacks

lib/ApiStack.ts

@@ -2,23 +2,27 @@ import { Effect, PolicyStatement } from '@aws-cdk/aws-iam'
 import * as sst from '@serverless-stack/resources'
 import { MultiStackProps } from '.'
 
-export default class ApiStack extends sst.Stack {
+export class ApiStack extends sst.Stack {
   constructor(scope: sst.App, id: string, props: MultiStackProps) {
     super(scope, id, props)
 
     const api = new sst.Api(this, 'API', {
       defaultAuthorizationType: sst.ApiAuthorizationType.AWS_IAM,
       routes: {
-        'GET /': 'src/api.handler',
-        'GET /{org}/test': 'src/api.handler',
+        'GET /{org}/test': 'src/backend/api.handler',
       },
       cors: true,
     })
 
     /**
      * Policy that enables a tenant to access their entire organizations data.
      *
-     * Entires in dynamoDB needs to begin with
+     * Once a user has an org ID, they can access those urls that have their org
+     * associated, but no other urls.
+     *
+     * This assumes we are building an API like:
+     *
+     * /a485d3c7-99aa-45b5-971e-a510ea158c1e/projects/1
      *
      */
     const tenantPolicy = new PolicyStatement({

lib/AuthStack.ts

@@ -33,7 +33,7 @@ export class AuthStack extends sst.Stack {
       this,
       'PostConfirmationFunction',
       {
-        handler: 'src/lambda.postConfirmation',
+        handler: 'src/backend/lambda.postConfirmation',
       }
     )
 

lib/DataStack.ts

@@ -3,7 +3,7 @@ import * as cdk from '@aws-cdk/core'
 import { Effect, PolicyStatement } from '@aws-cdk/aws-iam'
 import { MultiStackProps } from '.'
 
-export default class DataStack extends sst.Stack {
+export class DataStack extends sst.Stack {
   public readonly table: sst.Table
 
   constructor(scope: sst.App, id: string, props: MultiStackProps) {

lib/WebStack.ts

@@ -2,7 +2,7 @@ import * as sst from '@serverless-stack/resources'
 import { StaticSite } from '@serverless-stack/resources'
 import { MultiStackProps } from '.'
 
-export default class WebStack extends sst.Stack {
+export class WebStack extends sst.Stack {
   constructor(scope: sst.App, id: string, props: MultiStackProps) {
     super(scope, id, props)
 
@@ -17,7 +17,7 @@ export default class WebStack extends sst.Stack {
     }
 
     const nextJsSite = new StaticSite(this, 'NextJSSite', {
-      path: 'frontend',
+      path: 'src/frontend',
       buildCommand: 'yarn build',
       buildOutput: 'out',
       environment,

lib/index.ts

@@ -1,21 +1,21 @@
-import { AuthStack } from './AuthStack'
 import * as sst from '@serverless-stack/resources'
-import DataStack from './DataStack'
-import WebStack from './WebStack'
-import ApiStack from './ApiStack'
+import { AuthStack } from './AuthStack'
+import { DataStack } from './DataStack'
+import { WebStack } from './WebStack'
+import { ApiStack } from './ApiStack'
 
 export interface MultiStackProps extends sst.StackProps {
   auth?: sst.Auth
   table?: sst.Table
 }
 
 export default function main(app: sst.App): void {
-  // Set default runtime for all functions
   app.setDefaultFunctionProps({
-    runtime: 'nodejs12.x',
+    runtime: 'nodejs14.x',
   })
 
   const authStack = new AuthStack(app, 'AuthStack')
+
   const dataStack = new DataStack(app, 'DataStack', {
     auth: authStack.auth,
   })

frontend/package.json → src/frontend/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "sst-env -- next dev",
     "build": "next build && next export",
     "start": "next start",
     "lint": "next lint"
@@ -25,6 +25,7 @@
     "@aws-sdk/client-dynamodb": "^3.25.0",
     "@aws-sdk/credential-provider-cognito-identity": "^3.25.0",
     "@aws-sdk/lib-dynamodb": "^3.25.0",
+    "@serverless-stack/static-site-env": "^0.45.2",
     "@types/aws4": "^1.5.2",
     "@types/react": "17.0.15",
     "@typescript-eslint/eslint-plugin": "^4.28.5",