Preview adjustments (#5)

* address some tsc errors

* add cdk stack for frontend deployment

* add commands revolving around frontend to makefile

* update README

---------

Co-authored-by: lukqw <[email protected]>

Author: lukqw

Makefile

@@ -27,6 +27,19 @@ deploy:
 start:
 		localstack start -d
 
+## export configs for web app
+prepare-frontend-local:
+		yarn prepare:frontend-local
+
+build-frontend:
+		yarn build:frontend
+
+bootstrap-frontend:
+		yarn cdklocal bootstrap --app="node dist/aws-sdk-js-notes-app-frontend.js";
+
+deploy-frontend:
+		yarn cdklocal deploy --app="node dist/aws-sdk-js-notes-app-frontend.js";
+
 ## Stop the Running LocalStack container
 stop:
 		@echo

README.md

@@ -118,11 +118,21 @@ arn:aws:cloudformation:us-east-1:000000000000:stack/aws-sdk-js-notes-app/ebb3238
 To configure the frontend to use the deployed infrastructure, run the following command:
 
 ```shell
-yarn prepare:frontend-local
+make prepare-frontend-local
 ```
 
 It will update the `packages/frontend/src/config.json` file with the deployed infrastructure's output values.
 
+### Deploying the frontend
+
+```shell
+make build-frontend
+make bootstrap-frontend
+make deploy-frontend
+```
+
+Alternatively you can start the frontend locally with below steps:
+
 ### Starting the frontend
 
 To start the frontend, run the following command:
@@ -131,8 +141,6 @@ To start the frontend, run the following command:
 yarn start:frontend
 ```
 
-Alternatively, you can build the frontend and deploy it to S3 to access it from a browser.
-
 ### Testing the web application
 
 To test the web application, open the URL you see in the output of the `yarn start:frontend` command in your browser. You will see the following page:
@@ -162,5 +170,4 @@ The sample application is based on a public [AWS sample app](https://github.com/
 ## Contributing
 
 We appreciate your interest in contributing to our project and are always looking for new ways to improve the developer experience. We welcome feedback, bug reports, and even feature ideas from the community.
-Please refer to the [contributing file](CONTRIBUTING.md) for more details on how to get started. 
-
+Please refer to the [contributing file](CONTRIBUTING.md) for more details on how to get started.

packages/frontend/src/content/CreateNote.tsx

@@ -32,7 +32,7 @@ const CreateNote = (props: RouteComponentProps) => {
         body: JSON.stringify({ attachment, content: noteContent }),
       });
       navigate("/");
-    } catch (error) {
+    } catch (error: any) {
       setErrorMsg(`${error.toString()} - ${createNoteURL} - ${noteContent}`);
     } finally {
       setIsLoading(false);

packages/frontend/src/content/DeleteNoteButton.tsx

@@ -24,7 +24,7 @@ const DeleteNoteButton = (props: { noteId: string; attachment?: string }) => {
         method: "DELETE",
       });
       navigate("/");
-    } catch (error) {
+    } catch (error: any) {
       setErrorMsg(`${error.toString()} - ${deleteNoteURL} - ${noteId}`);
     } finally {
       setIsDeleting(false);

packages/frontend/src/content/ListNotes.tsx

@@ -24,7 +24,7 @@ const ListNotes = (props: RouteComponentProps) => {
         const response = await fetch(fetchURL);
         const data = await response.json();
         setNotes(data);
-      } catch (error) {
+      } catch (error: any) {
         setErrorMsg(`${error.toString()} - ${fetchURL}`);
       } finally {
         setIsLoading(false);

packages/frontend/src/content/SaveNoteButton.tsx

@@ -21,7 +21,7 @@ const SaveNoteButton = (props: { noteId: string; noteContent: string }) => {
         body: JSON.stringify({ content: noteContent }),
       });
       navigate("/");
-    } catch (error) {
+    } catch (error: any) {
       console.log(error);
       setErrorMsg(`${error.toString()} - ${updateNoteURL} - ${noteContent}`);
     } finally {

packages/frontend/src/index.tsx

@@ -16,6 +16,7 @@ if (typeof (window as any).process === "undefined") {
 }
 
 const container = document.getElementById("root");
+// @ts-ignore
 const root = createRoot(container);
 root.render(
   <div className="container" style={{ height: "100vh" }}>

packages/infra/cdk/aws-sdk-js-notes-app-frontend-stack.ts

@@ -0,0 +1,29 @@
+import {
+  Stack,
+  StackProps,
+  CfnOutput,
+  aws_s3 as s3,
+  aws_s3_deployment,
+} from "aws-cdk-lib";
+import { Construct } from "constructs";
+
+export class AwsSdkJsNotesAppFrontendStack extends Stack {
+  constructor(scope: Construct, id: string, props?: StackProps) {
+    super(scope, id, props);
+
+    const websiteBucket = new s3.Bucket(this, "WebsiteBucket", {
+      bucketName: "notes-app-frontend",
+      websiteIndexDocument: "index.html",
+      websiteErrorDocument: "index.html",
+    });
+
+    new aws_s3_deployment.BucketDeployment(this, "DeployWebsite", {
+      sources: [aws_s3_deployment.Source.asset("../frontend/dist")],
+      destinationBucket: websiteBucket,
+    });
+
+    new CfnOutput(this, "FrontendBucketWebsite", {
+      value: `http://${websiteBucket.bucketName}.s3-website.localhost.localstack.cloud:4566/`,
+    });
+  }
+}

packages/infra/cdk/aws-sdk-js-notes-app-frontend.ts

@@ -0,0 +1,5 @@
+import { App } from "aws-cdk-lib";
+import { AwsSdkJsNotesAppFrontendStack } from "./aws-sdk-js-notes-app-frontend-stack";
+
+const app = new App();
+new AwsSdkJsNotesAppFrontendStack(app, "aws-sdk-js-notes-app-frontend");