├── .github └── workflows │ └── main.yml ├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── Makefile ├── README.md ├── client-application-react ├── .gitignore ├── amplify │ ├── backend │ │ └── backend-config.json │ └── team-provider-info.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── serviceWorker.js │ └── setupTests.js └── yarn.lock ├── cloud-pod └── serverless-api-ecs-apigateway-state ├── cloudformation └── ecsapi-demo-cloudformation.yaml ├── containers-nodejs ├── ecsapi-demo-foodstore │ ├── .dockerignore │ ├── .gitignore │ ├── Dockerfile │ ├── Dockerfile.patch │ ├── package.json │ ├── server.js │ └── yarn.lock └── ecsapi-demo-petstore │ ├── .dockerignore │ ├── .gitignore │ ├── Dockerfile │ ├── Dockerfile.patch │ ├── package.json │ ├── server.js │ └── yarn.lock ├── images ├── interface.png ├── serverless-container-api.png ├── web-app-items.png └── web-app-tables.png ├── resources └── resources.txt └── terraform └── main.tf /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Deploy infrastructure on LocalStack 2 | 3 | on: 4 | push: 5 | paths-ignore: 6 | - 'README.md' 7 | branches: 8 | - main 9 | pull_request: 10 | branches: 11 | - main 12 | schedule: 13 | # “At 00:00 on Sunday.” 14 | - cron: "0 0 * * 0" 15 | workflow_dispatch: 16 | 17 | permissions: 18 | contents: write 19 | 20 | jobs: 21 | terraform: 22 | name: Deploy infrastructure using Terraform 23 | runs-on: ubuntu-latest 24 | steps: 25 | - name: Checkout 26 | uses: actions/checkout@v3 27 | 28 | - uses: gautamkrishnar/keepalive-workflow@v1 29 | 30 | - name: Setup Terraform 31 | uses: hashicorp/setup-terraform@v3 32 | with: 33 | terraform_version: "1.5.7" 34 | 35 | - name: Set up Python 3.10 36 | id: setup-python 37 | uses: actions/setup-python@v2 38 | with: 39 | python-version: "3.10" 40 | 41 | - name: Start LocalStack 42 | env: 43 | LOCALSTACK_API_KEY: ${{ secrets.LOCALSTACK_API_KEY }} 44 | run: | 45 | pip install localstack==3.2.0 awscli-local[ver1] 46 | pip install terraform-local 47 | docker pull localstack/localstack-pro:3.2.0 48 | 49 | # Start LocalStack in the background 50 | IMAGE_NAME=localstack/localstack-pro:3.2.0 localstack start -d 51 | 52 | # Wait 30 seconds for the LocalStack container to become ready before timing out 53 | echo "Waiting for LocalStack startup..." 54 | localstack wait -t 15 55 | 56 | echo "Startup complete" 57 | 58 | - name: Deploy on Terraform 59 | run: | 60 | cd terraform 61 | tflocal init 62 | tflocal apply --auto-approve 63 | 64 | - name: Deploy Web Application 65 | run: | 66 | make run 67 | 68 | - name: Check deployed resources 69 | run: | 70 | sleep 10 71 | awslocal apigatewayv2 get-apis 72 | awslocal cognito-idp list-user-pools --max-results 1 73 | 74 | - name: Send a Slack notification 75 | if: failure() || github.event_name != 'pull_request' 76 | uses: ravsamhq/notify-slack-action@v2 77 | with: 78 | status: ${{ job.status }} 79 | token: ${{ secrets.GITHUB_TOKEN }} 80 | notification_title: "{workflow} has {status_message}" 81 | message_format: "{emoji} *{workflow}* {status_message} in <{repo_url}|{repo}>" 82 | footer: "Linked Repo <{repo_url}|{repo}> | <{run_url}|View Workflow run>" 83 | notify_when: "failure" 84 | env: 85 | SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} 86 | 87 | - name: Generate a Diagnostic Report 88 | if: failure() 89 | run: | 90 | curl -s localhost:4566/_localstack/diagnose | gzip -cf > diagnose.json.gz 91 | 92 | - name: Upload the Diagnostic Report 93 | if: failure() 94 | uses: actions/upload-artifact@v4 95 | with: 96 | name: diagnose.json.gz 97 | path: ./diagnose.json.gz 98 | 99 | cloudformation: 100 | name: Deploy infrastructure using CloudFormation 101 | runs-on: ubuntu-latest 102 | steps: 103 | - name: Checkout 104 | uses: actions/checkout@v3 105 | 106 | - name: Set up Python 3.10 107 | id: setup-python 108 | uses: actions/setup-python@v2 109 | with: 110 | python-version: "3.10" 111 | 112 | - name: Start LocalStack 113 | env: 114 | LOCALSTACK_API_KEY: ${{ secrets.LOCALSTACK_API_KEY }} 115 | DNS_ADDRESS: 0 116 | run: | 117 | pip install localstack awscli-local[ver1] 118 | docker pull localstack/localstack-pro:latest 119 | 120 | # Start LocalStack in the background 121 | localstack start -d 122 | 123 | # Wait 30 seconds for the LocalStack container to become ready before timing out 124 | echo "Waiting for LocalStack startup..." 125 | localstack wait -t 15 126 | 127 | echo "Startup complete" 128 | 129 | - name: Deploy on CloudFormation 130 | run: | 131 | cd cloudformation 132 | STACK="stack1" 133 | CF_FILE="ecsapi-demo-cloudformation.yaml" 134 | awslocal cloudformation create-stack --stack-name $STACK --template-body file://$CF_FILE 135 | 136 | - name: Deploy Web Application 137 | run: | 138 | make run 139 | 140 | - name: Check deployed resources 141 | run: | 142 | sleep 10 143 | awslocal apigatewayv2 get-apis 144 | awslocal cognito-idp list-user-pools --max-results 1 145 | 146 | - name: Send a Slack notification 147 | if: failure() || github.event_name != 'pull_request' 148 | uses: ravsamhq/notify-slack-action@v2 149 | with: 150 | status: ${{ job.status }} 151 | token: ${{ secrets.GITHUB_TOKEN }} 152 | notification_title: "{workflow} has {status_message}" 153 | message_format: "{emoji} *{workflow}* {status_message} in <{repo_url}|{repo}>" 154 | footer: "Linked Repo <{repo_url}|{repo}> | <{run_url}|View Workflow run>" 155 | notify_when: "failure" 156 | env: 157 | SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} 158 | 159 | - name: Generate a Diagnostic Report 160 | if: failure() 161 | run: | 162 | curl -s localhost:4566/_localstack/diagnose | gzip -cf > diagnose.json.gz 163 | 164 | - name: Upload the Diagnostic Report 165 | if: failure() 166 | uses: actions/upload-artifact@v4 167 | with: 168 | name: diagnose.json.gz 169 | path: ./diagnose.json.gz 170 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Local .terraform directories 2 | **/.terraform/* 3 | 4 | # Lockfiles 5 | .terraform.lock.hcl 6 | 7 | # .tfstate files 8 | *.tfstate 9 | *.tfstate.* 10 | 11 | # Crash log files 12 | crash.log 13 | crash.*.log 14 | 15 | # Exclude all .tfvars files, which are likely to contain sensitive data, such as 16 | # password, private keys, and other secrets. These should not be part of version 17 | # control as they are data points which are potentially sensitive and subject 18 | # to change depending on the environment. 19 | *.tfvars 20 | *.tfvars.json 21 | 22 | # Ignore override files as they are usually used to override resources locally and so 23 | # are not checked in 24 | override.tf 25 | override.tf.json 26 | *_override.tf 27 | *_override.tf.json 28 | 29 | # Ignore CLI configuration files 30 | .terraformrc 31 | terraform.rc 32 | 33 | # Logs 34 | logs 35 | *.log 36 | npm-debug.log* 37 | yarn-debug.log* 38 | yarn-error.log* 39 | lerna-debug.log* 40 | .pnpm-debug.log* 41 | 42 | # Diagnostic reports (https://nodejs.org/api/report.html) 43 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 44 | 45 | # Runtime data 46 | pids 47 | *.pid 48 | *.seed 49 | *.pid.lock 50 | 51 | # Directory for instrumented libs generated by jscoverage/JSCover 52 | lib-cov 53 | 54 | # Coverage directory used by tools like istanbul 55 | coverage 56 | *.lcov 57 | 58 | # nyc test coverage 59 | .nyc_output 60 | 61 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 62 | .grunt 63 | 64 | # Bower dependency directory (https://bower.io/) 65 | bower_components 66 | 67 | # node-waf configuration 68 | .lock-wscript 69 | 70 | # Compiled binary addons (https://nodejs.org/api/addons.html) 71 | build/Release 72 | 73 | # Dependency directories 74 | node_modules/ 75 | jspm_packages/ 76 | 77 | # Snowpack dependency directory (https://snowpack.dev/) 78 | web_modules/ 79 | 80 | # TypeScript cache 81 | *.tsbuildinfo 82 | 83 | # Optional npm cache directory 84 | .npm 85 | 86 | # Optional eslint cache 87 | .eslintcache 88 | 89 | # Optional stylelint cache 90 | .stylelintcache 91 | 92 | # Microbundle cache 93 | .rpt2_cache/ 94 | .rts2_cache_cjs/ 95 | .rts2_cache_es/ 96 | .rts2_cache_umd/ 97 | 98 | # Optional REPL history 99 | .node_repl_history 100 | 101 | # Output of 'npm pack' 102 | *.tgz 103 | 104 | # Yarn Integrity file 105 | .yarn-integrity 106 | 107 | # dotenv environment variable files 108 | .env 109 | .env.development.local 110 | .env.test.local 111 | .env.production.local 112 | .env.local 113 | 114 | # parcel-bundler cache (https://parceljs.org/) 115 | .cache 116 | .parcel-cache 117 | 118 | # Next.js build output 119 | .next 120 | out 121 | 122 | # Nuxt.js build / generate output 123 | .nuxt 124 | dist 125 | 126 | # Gatsby files 127 | .cache/ 128 | # Comment in the public line in if your project uses Gatsby and not Next.js 129 | # https://nextjs.org/blog/next-9-1#public-directory-support 130 | # public 131 | 132 | # vuepress build output 133 | .vuepress/dist 134 | 135 | # vuepress v2.x temp and cache directory 136 | .temp 137 | .cache 138 | 139 | # Docusaurus cache and generated files 140 | .docusaurus 141 | 142 | # Serverless directories 143 | .serverless/ 144 | 145 | # FuseBox cache 146 | .fusebox/ 147 | 148 | # DynamoDB Local files 149 | .dynamodb/ 150 | 151 | # TernJS port file 152 | .tern-port 153 | 154 | # Stores VSCode versions used for testing VSCode extensions 155 | .vscode-test 156 | 157 | # yarn v2 158 | .yarn/cache 159 | .yarn/unplugged 160 | .yarn/build-state.yml 161 | .yarn/install-state.gz 162 | .pnp.* 163 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We, as members, contributors, and leaders, pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | info@localstack.cloud. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing Guidelines 2 | 3 | Thank you for your interest in contributing to our project. Whether it's a bug report, new feature, correction, or additional 4 | documentation, we greatly value feedback and contributions from our community. 5 | 6 | Please read through this document before submitting any issues or pull requests to ensure we have all the necessary 7 | information to effectively respond to your bug report or contribution. 8 | 9 | 10 | ## Reporting Bugs/Feature Requests 11 | 12 | We welcome you to use the GitHub issue tracker to report bugs or suggest features. 13 | 14 | When filing an issue, please check existing open or recently closed issues to make sure somebody else hasn't already 15 | reported the issue. Please try to include as much information as you can. Details like these are incredibly useful: 16 | 17 | * A reproducible test case or series of steps 18 | * The version of our code being used 19 | * Any modifications you've made relevant to the bug 20 | * Anything unusual about your environment or deployment 21 | 22 | 23 | ## Contributing via Pull Requests 24 | Contributions via pull requests are much appreciated. Before sending us a pull request, please ensure the following: 25 | 26 | 1. You are working against the latest source on the *main* branch. 27 | 2. You check existing open and recently merged pull requests to make sure someone else hasn't addressed the problem already. 28 | 3. You open an issue to discuss any significant work - we would hate to waste your time. 29 | 30 | To send us a pull request, please: 31 | 32 | 1. Fork the repository. 33 | 2. Modify the source; please focus on the specific change you are contributing. If you also reformat all the code, it will be hard for us to focus on your change. 34 | 3. Ensure local tests pass. 35 | 4. Commit to your fork using clear commit messages. 36 | 5. Send us a pull request, answering any default questions in the pull request interface. 37 | 6. Pay attention to any automated CI failures reported in the pull request, and stay involved in the conversation. 38 | 39 | GitHub provides additional documents on [forking a repository](https://help.github.com/articles/fork-a-repo/) and 40 | [creating a pull request](https://help.github.com/articles/creating-a-pull-request/). 41 | 42 | 43 | ## Finding contributions to work on 44 | Looking at the existing issues is a great way to find something to contribute on. As our projects, by default, use the default GitHub issue labels (enhancement/bug/duplicate/help wanted/invalid/question/wontfix), looking at any 'help wanted' issues is a great place to start. 45 | 46 | 47 | ## Code of Conduct 48 | Please review the adopted [code of conduct](CODE_OF_CONDUCT.md) and make sure you follow the guidelines. 49 | 50 | 51 | ## Licensing 52 | 53 | See the [LICENSE](LICENSE) file for our project's licensing. By contributing, you agree that your contributions will be licensed under the existing license. 54 | 55 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright 2023 LocalStack GmbH 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | export AWS_ACCESS_KEY_ID ?= test 2 | export AWS_SECRET_ACCESS_KEY ?= test 3 | export AWS_DEFAULT_REGION=us-east-1 4 | SHELL := /bin/bash 5 | 6 | usage: ## Show this help 7 | @fgrep -h "##" $(MAKEFILE_LIST) | fgrep -v fgrep | sed -e 's/\\$$//' | sed -e 's/##//' 8 | 9 | install: ## Install dependencies 10 | @which localstack || pip install localstack 11 | @which awslocal || pip install awscli-local 12 | @which tflocal || pip install terraform-local 13 | 14 | terraform-setup: ## Set up Terraform 15 | cd terraform; \ 16 | tflocal init; \ 17 | echo "Deploying Terraform configuration 🚀"; \ 18 | tflocal apply --auto-approve; 19 | 20 | cloudformation-setup: ## Set up CloudFormation 21 | cd cloudformation; \ 22 | STACK="stack1"; \ 23 | CF_FILE="ecsapi-demo-cloudformation.yaml"; \ 24 | echo "Deploying CloudFormation stack 🚀"; \ 25 | awslocal cloudformation create-stack --stack-name $$STACK --template-body file://$$CF_FILE; \ 26 | 27 | run: ## Run the sample app 28 | @echo "Building Web assets and uploading to local S3 bucket 🪣"; \ 29 | cd client-application-react; \ 30 | test -e node_modules || yarn; \ 31 | test -e build/index.html || NODE_OPTIONS=--openssl-legacy-provider yarn build; \ 32 | awslocal s3 mb s3://sample-app; \ 33 | awslocal s3 sync build s3://sample-app; \ 34 | API_ID=$$(awslocal apigatewayv2 get-apis | jq -r '.Items[] | select(.Name=="ecsapi-demo") | .ApiId'); \ 35 | POOL_ID=$$(awslocal cognito-idp list-user-pools --max-results 1 | jq -r '.UserPools[0].Id'); \ 36 | CLIENT_ID=$$(awslocal cognito-idp list-user-pool-clients --user-pool-id $$POOL_ID | jq -r '.UserPoolClients[0].ClientId'); \ 37 | URL="http://sample-app.s3.localhost.localstack.cloud:4566/index.html?stackregion=us-east-1&stackhttpapi=$$API_ID&stackuserpool=$$POOL_ID&stackuserpoolclient=$$CLIENT_ID"; \ 38 | echo "Check out the sample application 🤩"; \ 39 | echo $$URL 40 | 41 | start: ## Start LocalStack in detached mode 42 | EXTRA_CORS_ALLOWED_ORIGINS=http://sample-app.s3.localhost.localstack.cloud:4566 DISABLE_CUSTOM_CORS_APIGATEWAY=1 localstack start -d 43 | 44 | stop: ## Stop the running LocalStack container 45 | @echo 46 | localstack stop 47 | 48 | ready: ## Make sure the LocalStack container is up 49 | @echo Waiting on the LocalStack container... 50 | @localstack wait -t 30 && echo LocalStack is ready to use! || (echo Gave up waiting on LocalStack, exiting. && exit 1) 51 | 52 | logs: ## Save the logs in a logs.txt file 53 | @localstack logs > logs.txt 54 | 55 | .PHONY: usage install run start stop ready logs 56 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Serverless Container-based APIs with Amazon ECS and Amazon API Gateway 2 | 3 | | Key | Value | 4 | | ------------ | ------------------------------------------------------------------------------------- | 5 | | Environment | | 6 | | Services | S3, DynamoDB, Elastic Container Service, API Gateway, Cognito, IAM | 7 | | Integrations | Terraform, CloudFormation, AWS CLI | 8 | | Categories | Serverless; Containers; Security, Identity, and Compliance | 9 | | Level | Intermediate | 10 | | GitHub | [Repository link](https://github.com/localstack/serverless-api-ecs-apigateway-sample) | 11 | 12 | ## Introduction 13 | 14 | The Serverless Container-based APIs with Amazon ECS and Amazon API Gateway application sample demonstrate how you can launch and test a sample container-based API. This application sample implements an example API with two services — “Food store” to `PUT` & `GET` foods, and “Pet store” to `PUT` & `GET` pets. The application client is implemented using ReactJS, which allows unauthenticated users to use only `GET` requests, while authenticated users can utilize `GET` and `PUT` requests. Users can deploy this application sample on AWS & LocalStack using CloudFormation & Terraform with minimal 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. 15 | 16 | ## Architecture diagram 17 | 18 | The following diagram shows the architecture that this sample application builds and deploys: 19 | 20 | ![Architecture diagram for Serverless Container-based APIs with Amazon ECS and Amazon API Gateway sample application](./images/serverless-container-api.png) 21 | 22 | We are using the following AWS services and their features to build our infrastructure: 23 | 24 | - [Elastic Container Service](https://docs.localstack.cloud/user-guide/aws/elastic-container-service/) to create and deploy our containerized application. 25 | - [DynamoDB](https://docs.localstack.cloud/user-guide/aws/dynamodb/) as a key-value and document database to persist our data. 26 | - [API Gateway](https://docs.localstack.cloud/user-guide/aws/apigatewayv2/) to expose the containerized services to the user through HTTP APIs. 27 | - [Cognito User Pools](https://docs.localstack.cloud/user-guide/aws/cognito/) for user authentication and authorizing requests to container APIs. 28 | - [Amplify](https://docs.localstack.cloud/user-guide/aws/amplify/) to create the user client with ReactJS to send requests to container APIs. 29 | - [S3](https://docs.localstack.cloud/user-guide/aws/s3/) to deploy the Amplify application to make the web application available to users. 30 | - [IAM](https://docs.localstack.cloud/user-guide/aws/iam/) to create policies to specify roles and permissions for various AWS services. 31 | 32 | ## Prerequisites 33 | 34 | - LocalStack Pro with the [`localstack` CLI](https://docs.localstack.cloud/getting-started/installation/#localstack-cli). 35 | - [AWS CLI](https://docs.localstack.cloud/user-guide/integrations/aws-cli/) with the [`awslocal` wrapper](https://docs.localstack.cloud/user-guide/integrations/aws-cli/#localstack-aws-cli-awslocal). 36 | - [Terraform](https://docs.localstack.cloud/user-guide/integrations/terraform/) with the [`tflocal` wrapper](https://docs.localstack.cloud/user-guide/integrations/terraform/#using-the-tflocal-script). 37 | - [Node.js](https://nodejs.org/en/download/) with `npm` package manager. 38 | 39 | Start LocalStack Pro with the appropriate configuration to enable the S3 website to send requests to the container APIs: 40 | 41 | ```shell 42 | export LOCALSTACK_AUTH_TOKEN= 43 | EXTRA_CORS_ALLOWED_ORIGINS=http://sample-app.s3.localhost.localstack.cloud:4566 DISABLE_CUSTOM_CORS_APIGATEWAY=1 DEBUG=1 localstack start 44 | ``` 45 | 46 | The `DISABLE_CUSTOM_CORS_APIGATEWAY` configuration variable disables CORS override by API Gateway. The `EXTRA_CORS_ALLOWED_ORIGINS` configuration variable allows our website to send requests to the container APIs. 47 | We specified DEBUG=1 to get the printed LocalStack logs directly in the terminal (it helps later, when we need to get the Cognito confirmation code). 48 | If you prefer running LocalStack in detached mode, you can add the `-d` flag to the `localstack start` command, and use Docker Desktop to view the logs. 49 | 50 | ## Instructions 51 | 52 | You can build and deploy the sample application on LocalStack by running our `Makefile` commands. Run `make terraform-setup` or `make cloudformation-setup` to create the infrastructure on LocalStack. 53 | Run `make run` to deploy the S3 Website and get a URL to access the application. Run `make stop` to delete the infrastructure by stopping LocalStack. 54 | 55 | Alternatively, here are instructions to deploy it manually step-by-step. 56 | 57 | ## Creating the infrastructure 58 | 59 | To create the AWS infrastructure locally, you can either use Terraform or CloudFormation. 60 | 61 | ### Terraform 62 | 63 | To create the infrastructure using Terraform, run the following commands: 64 | 65 | ```shell 66 | cd terraform 67 | tflocal init 68 | tflocal apply --auto-approve 69 | ``` 70 | 71 | We are using the `tflocal` wrapper to configure the local service endpoints, and send the API requests to LocalStack, instead of AWS. You can use the same Terraform configuration to deploy the infrastructure on AWS as well. 72 | 73 | > Currently, the Terraform configuration is tested & validated against `localstack/localstack:3.2.0` image. You can use the `IMAGE_NAME` environment variable to specify the LocalStack image version to ensure that the Terraform configuration works as expected. 74 | 75 | #### CloudFormation 76 | 77 | To create the infrastructure using CloudFormation, run the following commands: 78 | 79 | ```shell 80 | cd cloudformation 81 | export STACK="stack1" 82 | awslocal cloudformation create-stack --stack-name $STACK --template-body file://ecsapi-demo-cloudformation.yaml 83 | ``` 84 | 85 | Wait for a few seconds for the infrastructure to be created. You can check the status of the stack using the following command: 86 | 87 | ```shell 88 | awslocal cloudformation describe-stacks --stack-name $STACK | grep StackStatus 89 | ``` 90 | 91 | If the `StackStatus` is `CREATE_COMPLETE`, you can proceed to the next step. 92 | 93 | ## Building the web application 94 | 95 | To build the web application, navigate to the root directory of the sample application and run the following commands: 96 | 97 | ```shell 98 | cd client-application-react 99 | yarn 100 | NODE_OPTIONS=--openssl-legacy-provider yarn build 101 | ``` 102 | 103 | Ensure a `build` directory is created in the `client-application-react` directory. 104 | 105 | ## Deploying the web application 106 | 107 | To deploy the web application, we will make an S3 bucket and sync the `build` directory to the S3 bucket. Run the following commands from the `client-application-react` directory: 108 | 109 | ```shell 110 | awslocal s3 mb s3://sample-app 111 | awslocal s3 sync build s3://sample-app 112 | ``` 113 | 114 | To access the web application, you can run the following commands: 115 | 116 | ```shell 117 | export API_ID=$(awslocal apigatewayv2 get-apis | jq -r '.Items[] | select(.Name=="ecsapi-demo") | .ApiId') 118 | export POOL_ID=$(awslocal cognito-idp list-user-pools --max-results 1 | jq -r '.UserPools[0].Id') 119 | export CLIENT_ID=$(awslocal cognito-idp list-user-pool-clients --user-pool-id $POOL_ID | jq -r '.UserPoolClients[0].ClientId') 120 | export URL="http://sample-app.s3.localhost.localstack.cloud:4566/index.html?stackregion=us-east-1&stackhttpapi=$API_ID&stackuserpool=$POOL_ID&stackuserpoolclient=$CLIENT_ID" 121 | echo $URL 122 | ``` 123 | 124 | ## Testing the web application 125 | 126 | To test the web application, follow these steps: 127 | 128 | - Open your application URL in your browser if it is displayed in the terminal. 129 | - Create a user by clicking the **Go to Sign In!** button and navigating to the **Create Account** page. 130 | - Follow the prompts to fill in your details, and click the **Create account** button. 131 | - You will be prompted to enter a confirmation code displayed in the terminal, in the LocalStack logs. Use this code to confirm your Account. 132 | 133 | Once you have confirmed your Account, skip the email recovery step, as that endpoint is not yet implemented. The application endpoints can now add and retrieve information on your pets and food. You will find a few entries in the resources folder to get you started and explore the application. 134 | 135 | ![Serverless Container-based APIs with Amazon ECS and Amazon API Gateway Web Interface](./images/interface.png) 136 | 137 | ### Visualizing your data 138 | 139 | Navigate to [**app.localstack.cloud**](https://app.localstack.cloud/) and go to **Resources** -> **DynamoDB**. You can now see the tables created, as well as the data stored in them: 140 | 141 | ![Displaying DynamoDB tables in the LocalStack Web Application](./images/web-app-tables.png) 142 | 143 | ![Displaying DynamoDB table items in the LocalStack Web Application](./images/web-app-items.png) 144 | 145 | Alternatively, you can use the AWS CLI to query the table data. For example, to query the `FoodStoreFoods` table, run the following command: 146 | 147 | ```bash 148 | awslocal dynamodb scan --table-name FoodStoreFoods 149 | ``` 150 | 151 | ## State Management 152 | 153 | The [Export/Import State feature](https://docs.localstack.cloud/user-guide/state-management/export-import-state/) enables you to export the state of your LocalStack instance into a file and import it into another LocalStack instance. This feature is useful when you want to save your LocalStack instance’s state for later use. 154 | 155 | To save your local AWS infrastructure state, you can use the `export` command with a desired name for your state file as the first argument: 156 | 157 | ```bash 158 | localstack state export serverless-api-ecs-apigateway-state 159 | ``` 160 | 161 | The above command will create a file named `serverless-api-ecs-apigateway-state` to the specified location on the disk. 162 | 163 | You can import the state file we created previously using the `import` command with the file name as the first argument: 164 | 165 | ```bash 166 | localstack state import serverless-api-ecs-apigateway-state 167 | ``` 168 | 169 | To ensure everything is set in place now, follow the previous steps of setting the configuration variables and query the application URL. The state will be restored, and you should be able to see the same data as before. 170 | 171 | ## GitHub Action 172 | 173 | This application sample hosts an example GitHub Action workflow that starts up LocalStack, deploys the infrastructure, and checks the created resources using `awslocal`. 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. 174 | 175 | 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/). 176 | 177 | ## Learn more 178 | 179 | The sample application is based on a public [AWS sample app](https://github.com/aws-samples/ecs-apigateway-sample) that deploys ECS containers with API Gateway to connect to. See this AWS blog post for more details: [Field Notes: Serverless Container-based APIs with Amazon ECS and Amazon API Gateway.](https://aws.amazon.com/blogs/architecture/field-notes-serverless-container-based-apis-with-amazon-ecs-and-amazon-api-gateway/) 180 | 181 | ## Contributing 182 | 183 | 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. 184 | Please refer to the [contributing file](CONTRIBUTING.md) for more details on how to get started. 185 | -------------------------------------------------------------------------------- /client-application-react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .eslintcache 8 | 9 | # testing 10 | /coverage 11 | 12 | # production 13 | /build 14 | 15 | # misc 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | 26 | #amplify 27 | amplify/\#current-cloud-backend 28 | amplify/.config/local-* 29 | amplify/mock-data 30 | amplify/backend/amplify-meta.json 31 | amplify/backend/awscloudformation 32 | build/ 33 | dist/ 34 | node_modules/ 35 | aws-exports.js 36 | awsconfiguration.json 37 | amplifyconfiguration.json 38 | amplify-build-config.json 39 | amplify-gradle-config.json 40 | amplifyxc.config 41 | -------------------------------------------------------------------------------- /client-application-react/amplify/backend/backend-config.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /client-application-react/amplify/team-provider-info.json: -------------------------------------------------------------------------------- 1 | { 2 | "dev": { 3 | "awscloudformation": { 4 | "AuthRoleName": "amplify-ecsapidemotestapi-dev-164209-authRole", 5 | "UnauthRoleArn": "arn:aws:iam::315359227436:role/amplify-ecsapidemotestapi-dev-164209-unauthRole", 6 | "AuthRoleArn": "arn:aws:iam::315359227436:role/amplify-ecsapidemotestapi-dev-164209-authRole", 7 | "Region": "us-east-1", 8 | "DeploymentBucketName": "amplify-ecsapidemotestapi-dev-164209-deployment", 9 | "UnauthRoleName": "amplify-ecsapidemotestapi-dev-164209-unauthRole", 10 | "StackName": "amplify-ecsapidemotestapi-dev-164209", 11 | "StackId": "arn:aws:cloudformation:us-east-1:315359227436:stack/amplify-ecsapidemotestapi-dev-164209/6aa03c30-a0f1-11ea-b1b7-0e29088293c9", 12 | "AmplifyAppId": "d13a5c9356pwbf" 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /client-application-react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-amplified", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@aws-amplify/ui-react": "^1.2.20", 7 | "@testing-library/jest-dom": "^5.14.1", 8 | "@testing-library/react": "^12.1.2", 9 | "@testing-library/user-event": "^7.2.1", 10 | "aws-amplify": "^4.3.2", 11 | "react": "^16.14.0", 12 | "react-dom": "^16.14.0" 13 | }, 14 | "devDependencies": { 15 | "react-scripts": "^4.0.2" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": "react-app" 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /client-application-react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/localstack-samples/sample-terraform-ecs-apigateway/76d706031d23a21f373c0b6fe9b4d61eac14e0c0/client-application-react/public/favicon.ico -------------------------------------------------------------------------------- /client-application-react/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /client-application-react/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/localstack-samples/sample-terraform-ecs-apigateway/76d706031d23a21f373c0b6fe9b4d61eac14e0c0/client-application-react/public/logo192.png -------------------------------------------------------------------------------- /client-application-react/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/localstack-samples/sample-terraform-ecs-apigateway/76d706031d23a21f373c0b6fe9b4d61eac14e0c0/client-application-react/public/logo512.png -------------------------------------------------------------------------------- /client-application-react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /client-application-react/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: / -------------------------------------------------------------------------------- /client-application-react/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /client-application-react/src/App.js: -------------------------------------------------------------------------------- 1 | // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. 2 | // SPDX-License-Identifier: MIT 3 | 4 | import React from 'react' 5 | import { Amplify, Auth } from 'aws-amplify' 6 | import { AmplifyAuthenticator, AmplifySignOut, AmplifySignUp } from '@aws-amplify/ui-react' 7 | import { onAuthUIStateChange } from '@aws-amplify/ui-components' 8 | import axios from 'axios' 9 | 10 | const searchParams = new URLSearchParams( window.location.search ) 11 | const searchParamsList = { 12 | regionID: searchParams.get('stackregion'), 13 | HttpApiID: searchParams.get('stackhttpapi'), 14 | UserPoolID: searchParams.get('stackuserpool'), 15 | UserPoolClientID: searchParams.get('stackuserpoolclient'), 16 | } 17 | if( !searchParamsList.regionID.match(/^[a-zA-Z0-9\-]+$/) ){ throw new Error('Invalid Region ID!!'); } 18 | if( !searchParamsList.HttpApiID.match(/^[a-zA-Z0-9\-]+$/) ){ throw new Error('Invalid API ID!!'); } 19 | const awsconfig = {}; 20 | 21 | const protocol = window.location.protocol; 22 | const localhostDomain = 'localhost.localstack.cloud'; 23 | awsconfig.Auth = { 24 | region: searchParamsList.regionID, 25 | userPoolId: searchParamsList.UserPoolID, 26 | userPoolWebClientId: searchParamsList.UserPoolClientID, 27 | endpoint: `${protocol}//localhost:4566` 28 | } 29 | Amplify.configure(awsconfig) 30 | Auth.configure(awsconfig) 31 | 32 | var MyPropsMethods = {} 33 | 34 | const App = () => { 35 | return ( 36 | 37 | ) 38 | } 39 | 40 | const MyAuth = () => { 41 | 42 | const [authState, setAuthState] = React.useState() 43 | const [showLogin, setShowLogin] = React.useState(false) 44 | const goToSignIn = () => setShowLogin(true) 45 | const exitFromSignIn = () => setShowLogin(false) 46 | const showAuthenticator = (showLogin || authState == 'signedin') 47 | const showApp = (!showLogin || authState == 'signedin') 48 | const showgoToSignIn = !(showLogin || authState == 'signedin') && authState != null 49 | 50 | React.useEffect(() => { 51 | return onAuthUIStateChange(newAuthState => { 52 | setAuthState(newAuthState) 53 | if(newAuthState=='signedin'){ 54 | setShowLogin(false) 55 | } 56 | }) 57 | }, []) 58 | 59 | return ( 60 |
61 | 62 |
66 |
67 | 68 |
69 | 70 | 78 | 79 | 80 |
81 | 82 | { showApp && 83 |
84 | { showgoToSignIn && } 85 | 88 |
89 | } 90 | 91 |
92 | ) 93 | 94 | } 95 | 96 | MyPropsMethods.APIProperties = { 97 | 'foodstore/foods/':['foodId'], 98 | 'petstore/pets/':['petId'], 99 | } 100 | 101 | const ApiForm = (props) => { 102 | 103 | const [selectedMethod, setSelectedMethod] = React.useState() 104 | const [selectedAPI, setSelectedAPI] = React.useState() 105 | const [selectedVariable, setSelectedVariable] = React.useState() 106 | const [selectedPayload, setSelectedPayload] = React.useState() 107 | 108 | const handleMethodChange = (e) => setSelectedMethod(e.target.value) 109 | const handleAPIChange = (e) => setSelectedAPI(e.target.value) 110 | const handleVariableChange = (e) => setSelectedVariable(e.target.value) 111 | const handlePayloadChange = (e) => setSelectedPayload( selectedMethod == 'GET' ? undefined : e.target.value ) 112 | 113 | const pathVariable = selectedAPI ? MyPropsMethods.APIProperties[selectedAPI][0] : '' 114 | 115 | const enableFormSubmission = !!( selectedMethod && selectedAPI && selectedVariable && ( selectedMethod == 'GET' || selectedPayload ) ) 116 | 117 | return ( 118 |
119 |
MyPropsMethods.invokeAPI(e,enableFormSubmission, selectedMethod, selectedAPI, selectedVariable, selectedPayload, props.authState) }> 120 |

121 | { props.authState == 'signedin' 122 | ? Looks like you're signed in! 123 | : Looks like you're NOT signed in 124 | } 125 |

126 |

127 | { props.authState == 'signedin' 128 | ? You should be able to invoke GET and also PUT. Try it out! 129 | : You should be able to invoke GET but not PUT. Try it out! 130 | } 131 |

132 |
133 |
134 | Method: 135 |
136 | 137 |
138 | 139 |
140 |
141 |
142 |
143 |
144 | API: 145 |
146 | 147 |
148 | 149 |
150 |
151 |
152 |
153 |
154 | {'{'+pathVariable+'}'}:
155 | 156 |
157 |
158 |
159 | Body (JSON):
160 |