Skip to content

Commit 11afb09

Browse files
lukqwlukqw
committed
update readme
1 parent b87f34f commit 11afb09

File tree

1 file changed

+34
-14
lines changed

1 file changed

+34
-14
lines changed

‎README.md‎

Lines changed: 34 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
# Note-Taking application using AWS SDK for JavaScript, Amazon DynamoDB, Lambda, Cognito, API Gateway, and S3
1+
# Note-Taking application using AWS SDK for JavaScript, Amazon DynamoDB, Lambda, Cognito, API Gateway, S3, Cloudfront
22

33
| Key | Value |
44
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
55
| Environment | <img src="https://img.shields.io/badge/LocalStack-deploys-4D29B4.svg?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAKgAAACoABZrFArwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAALbSURBVHic7ZpNaxNRFIafczNTGIq0G2M7pXWRlRv3Lusf8AMFEQT3guDWhX9BcC/uFAr1B4igLgSF4EYDtsuQ3M5GYrTaj3Tmui2SpMnM3PlK3m1uzjnPw8xw50MoaNrttl+r1e4CNRv1jTG/+v3+c8dG8TSilHoAPLZVX0RYWlraUbYaJI2IuLZ7KKUWCisgq8wF5D1A3rF+EQyCYPHo6Ghh3BrP8wb1en3f9izDYlVAp9O5EkXRB8dxxl7QBoNBpLW+7fv+a5vzDIvVU0BELhpjJrmaK2NMw+YsIxunUaTZbLrdbveZ1vpmGvWyTOJToNlsuqurq1vAdWPMeSDzwzhJEh0Bp+FTmifzxBZQBXiIKaAq8BBDQJXgYUoBVYOHKQRUER4mFFBVeJhAQJXh4QwBVYeHMQJmAR5GCJgVeBgiYJbg4T8BswYPp+4GW63WwvLy8hZwLcd5TudvBj3+OFBIeA4PD596nvc1iiIrD21qtdr+ysrKR8cY42itCwUP0Gg0+sC27T5qb2/vMunB/0ipTmZxfN//orW+BCwmrGV6vd63BP9P2j9WxGbxbrd7B3g14fLfwFsROUlzBmNM33XdR6Meuxfp5eg54IYxJvXCx8fHL4F3w36blTdDI4/0WREwMnMBeQ+Qd+YC8h4g78wF5D1A3rEqwBiT6q4ubpRSI+ewuhP0PO/NwcHBExHJZZ8PICI/e73ep7z6zzNPwWP1djhuOp3OfRG5kLROFEXv19fXP49bU6TbYQDa7XZDRF6kUUtEtoFb49YUbh/gOM7YbwqnyG4URQ/PWlQ4ASllNwzDzY2NDX3WwioKmBgeqidgKnioloCp4aE6AmLBQzUExIaH8gtIBA/lFrCTFB7KK2AnDMOrSeGhnAJSg4fyCUgVHsolIHV4KI8AK/BQDgHW4KH4AqzCQwEfiIRheKKUAvjuuu7m2tpakPdMmcYYI1rre0EQ1LPo9w82qyNziMdZ3AAAAABJRU5ErkJggg=="> <img src="https://img.shields.io/badge/AWS-deploys-F29100.svg?logo=amazon"> |
6-
| Services | DynamoDB, Lambda, Cognito, API Gateway, S3, IAM |
6+
| Services | DynamoDB, Lambda, Cognito, API Gateway, S3, IAM, Cloudfront |
77
| Integrations | CDK, AWS SDK for JavaScript |
88
| Categories | Serverless; |
99
| Level | Beginner |
1010
| GitHub | [Repository link](https://github.com/localstack/aws-sdk-js-notes-app) |
1111

1212
## Introduction
1313

14-
The Note-Taking application built using AWS SDK for JavaScript (v3) demonstrates how to build a serverless web application using DynamoDB, Lambda, Cognito, API Gateway, and S3. This sample application deploys five Lambda functions to create, list, update, delete, and get all the notes. A React-based frontend allows the user to interact with the Lambda functions exposed via an API Gateway URL. Users can deploy this application sample on LocalStack & AWS using AWS Cloud Development Kit with no changes. To test this application sample, we will demonstrate how you use LocalStack to deploy the infrastructure on your developer machine and your CI environment. Furthermore, we will showcase how you can interact with the web user interface to verify the application's functionality.
14+
The Note-Taking application built using AWS SDK for JavaScript (v3) demonstrates how to build a serverless web application using DynamoDB, Lambda, Cognito, API Gateway, S3 and Cloudfront. This sample application deploys five Lambda functions to create, list, update, delete, and get all the notes. A React-based frontend served via a Cloudfront distribution and an S3 bucket allows the user to interact with the Lambda functions exposed via an API Gateway URL. Users can deploy this application sample on LocalStack & AWS using AWS Cloud Development Kit with no changes. To test this application sample, we will demonstrate how you use LocalStack to deploy the infrastructure on your developer machine and your CI environment. Furthermore, we will showcase how you can interact with the web user interface to verify the application's functionality.
1515

1616
## Architecture diagram
1717

@@ -27,6 +27,8 @@ We are using the following AWS services and their features to build our infrastr
2727
- [IAM](https://docs.localstack.cloud/user-guide/aws/iam/) to create policies to specify roles and permissions for various AWS services.
2828
- [API Gateway](https://docs.localstack.cloud/user-guide/aws/apigatewayv2/) to expose the Lambda functions to the user through HTTP APIs.
2929
- [Cognito User Pools](https://docs.localstack.cloud/user-guide/aws/cognito/) for creating an identity pool to generate signed url for S3.
30+
- [Cloudfront](https://docs.localstack.cloud/user-guide/aws/cloudfront/) to serve frontend content.
31+
- [S3] (https://docs.localstack.cloud/user-guide/aws/s3/) to store files for the frontend build.
3032

3133
## Prerequisites
3234

@@ -35,10 +37,10 @@ We are using the following AWS services and their features to build our infrastr
3537
- [CDK](https://docs.localstack.cloud/user-guide/integrations/aws-cdk/) with the [`cdklocal`](https://www.npmjs.com/package/aws-cdk-local) wrapper.
3638
- [Node.js](https://nodejs.org/en/download/) with `yarn` package manager.
3739

38-
Start LocalStack Pro with the `LOCALSTACK_API_KEY` pre-configured:
40+
Start LocalStack Pro with the `LOCALSTACK_AUTH_TOKEN` or `LOCALSTACK_API_KEY` pre-configured:
3941

4042
```shell
41-
export LOCALSTACK_API_KEY=<your-api-key>
43+
export LOCALSTACK_AUTH_TOKEN=<your-auth-token>
4244
EXTRA_CORS_ALLOWED_ORIGINS=* localstack start
4345
```
4446

@@ -61,7 +63,7 @@ yarn install
6163
To build the Lambda functions, run the following command:
6264

6365
```shell
64-
yarn build:backend
66+
make build
6567
```
6668

6769
You are expected to see the following output:
@@ -81,15 +83,15 @@ You are expected to see the following output:
8183
To bootstrap the CDK, run the following command:
8284

8385
```shell
84-
yarn cdklocal bootstrap
86+
make bootstrap
8587
```
8688

8789
### Deploying the infrastructure
8890

8991
To deploy the infrastructure, run the following command:
9092

9193
```shell
92-
yarn cdklocal deploy
94+
make deploy
9395
```
9496

9597
> If you see a `CREATE_FAILED (Deployment failed)` error, wait a few seconds and re-run the command.
@@ -121,7 +123,7 @@ To configure the frontend to use the deployed infrastructure, run the following
121123
make prepare-frontend-local
122124
```
123125

124-
It will update the `packages/frontend/src/config.json` file with the deployed infrastructure's output values.
126+
It will update the `packages/frontend/.env` file with the deployed infrastructure's output values.
125127

126128
### Deploying the frontend
127129

@@ -131,19 +133,23 @@ make bootstrap-frontend
131133
make deploy-frontend
132134
```
133135

134-
Alternatively you can start the frontend locally with below steps:
136+
### View the frontend
135137

136-
### Starting the frontend
138+
Access the cloudfront distribution by fetching its id with the following command:
137139

138-
To start the frontend, run the following command:
140+
```shell
141+
awslocal cloudfront list-distributions
142+
```
139143

144+
with the Id of the distribution, simply open the following URL:
145+
140146
```shell
141-
yarn start:frontend
147+
http://localhost:4566/cloudfront/<distribution-id>
142148
```
143149

144150
### Testing the web application
145151

146-
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:
152+
To test the web application, open the URL above. You will see the following page:
147153

148154
![The default page of the Note taking application](images/note-taking-application-default-page.png)
149155

@@ -157,12 +163,26 @@ You can click on **Create** and see the note added to the list of notes:
157163

158164
You can further edit, delete, and view the notes.
159165

166+
### Starting the frontend locally
167+
168+
To start the frontend locally, run the following command:
169+
170+
```shell
171+
yarn start:frontend
172+
```
173+
174+
You'll see the URL to access the frontend in the output of the `yarn start:frontend` command
175+
160176
### GitHub Action
161177

162178
This application sample hosts an example GitHub Action workflow that starts up LocalStack, builds the Lambda functions, and deploys the infrastructure on the runner. You can find the workflow in the `.github/workflows/main.yml` file. To run the workflow, you can fork this repository and push a commit to the `main` branch.
163179

164180
Users can adapt this example workflow to run in their own CI environment. LocalStack supports various CI environments, including GitHub Actions, CircleCI, Jenkins, Travis CI, and more. You can find more information about the CI integration in the [LocalStack documentation](https://docs.localstack.cloud/user-guide/ci/).
165181

182+
### Preview environment
183+
184+
This sample further shows off our preview environments feature. Preview environments allow you to deploy your application to a separate environment whenever you want with the right configuration. You can find the workflow in the `.github/workflows/preview.yml` file. You can find more information about preview environments in the [LocalStack documentation](https://docs.localstack.cloud/user-guide/cloud-sandbox/application-previews/).
185+
166186
## Learn more
167187

168188
The sample application is based on a public [AWS sample app](https://github.com/aws-samples/ecs-apigateway-sample) and a [SST tutorial](https://github.com/serverless-stack/demo-notes-app).

0 commit comments

Comments
 (0)