diff --git a/Makefile b/Makefile index 67430ce..511e63c 100644 --- a/Makefile +++ b/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 diff --git a/README.md b/README.md index 14fc78b..752ca06 100644 --- a/README.md +++ b/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. diff --git a/packages/frontend/src/content/CreateNote.tsx b/packages/frontend/src/content/CreateNote.tsx index f004bdb..b7abf95 100644 --- a/packages/frontend/src/content/CreateNote.tsx +++ b/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); diff --git a/packages/frontend/src/content/DeleteNoteButton.tsx b/packages/frontend/src/content/DeleteNoteButton.tsx index 6ee725c..2172325 100644 --- a/packages/frontend/src/content/DeleteNoteButton.tsx +++ b/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); diff --git a/packages/frontend/src/content/ListNotes.tsx b/packages/frontend/src/content/ListNotes.tsx index 57ea451..869eae3 100644 --- a/packages/frontend/src/content/ListNotes.tsx +++ b/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); diff --git a/packages/frontend/src/content/SaveNoteButton.tsx b/packages/frontend/src/content/SaveNoteButton.tsx index 855beac..06fcab4 100644 --- a/packages/frontend/src/content/SaveNoteButton.tsx +++ b/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 { diff --git a/packages/frontend/src/index.tsx b/packages/frontend/src/index.tsx index 61f3884..b3a7bef 100644 --- a/packages/frontend/src/index.tsx +++ b/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(
diff --git a/packages/infra/cdk/aws-sdk-js-notes-app-frontend-stack.ts b/packages/infra/cdk/aws-sdk-js-notes-app-frontend-stack.ts new file mode 100644 index 0000000..6cfdfca --- /dev/null +++ b/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/`, + }); + } +} diff --git a/packages/infra/cdk/aws-sdk-js-notes-app-frontend.ts b/packages/infra/cdk/aws-sdk-js-notes-app-frontend.ts new file mode 100644 index 0000000..a10a77e --- /dev/null +++ b/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");