{"id":21657803,"url":"https://github.com/codeandpepper/bestpicture","last_synced_at":"2025-03-20T05:23:48.421Z","repository":{"id":103208903,"uuid":"286426984","full_name":"codeandpepper/bestpicture","owner":"codeandpepper","description":null,"archived":false,"fork":false,"pushed_at":"2020-08-13T14:59:27.000Z","size":1923,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-25T07:07:40.622Z","etag":null,"topics":["apollo-client","appsync","aws","aws-cli","certificate-manager","cloudformation","cloudfront","dynamodb","graphql","material-ui","react","route53","s3","typescript"],"latest_commit_sha":null,"homepage":"https://bestpicture.link/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codeandpepper.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-10T09:05:40.000Z","updated_at":"2023-10-31T10:45:59.000Z","dependencies_parsed_at":"2023-06-28T23:15:35.464Z","dependency_job_id":null,"html_url":"https://github.com/codeandpepper/bestpicture","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeandpepper%2Fbestpicture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeandpepper%2Fbestpicture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeandpepper%2Fbestpicture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeandpepper%2Fbestpicture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codeandpepper","download_url":"https://codeload.github.com/codeandpepper/bestpicture/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244555519,"owners_count":20471442,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apollo-client","appsync","aws","aws-cli","certificate-manager","cloudformation","cloudfront","dynamodb","graphql","material-ui","react","route53","s3","typescript"],"created_at":"2024-11-25T09:28:08.620Z","updated_at":"2025-03-20T05:23:48.397Z","avatar_url":"https://github.com/codeandpepper.png","language":"TypeScript","readme":"![bestpicture link_](https://user-images.githubusercontent.com/8171434/90150720-3d2df680-dd86-11ea-80cb-a3c3870587ba.png)\n\n# Architecture\n\n![architecture-3d](https://user-images.githubusercontent.com/8171434/90000588-aa5f6000-dc90-11ea-9028-9f967e56ca59.png)\n\n![architecture-2d](https://user-images.githubusercontent.com/8171434/90000593-ab908d00-dc90-11ea-9616-9880242664b9.png)\n\n# Iac (Infrastructure as Code)\n\n## Dev environment\n\n1. Prepare `devops` S3 bucket, where we copy nested stack (it has to be in S3, not in the local file system) and backend files e.g. AWS AppSync graphQL schema etc.\n\n```\ncd .\\infrastructure\\\n.\\prepare-devops-bucket.bat 4560bce\n```\n\n2. Create CloudFormation stack\n\n```\naws cloudformation create-stack --stack-name dev-4560bce --template-body file://stack.yaml --parameters ParameterKey=Environment,ParameterValue=dev ParameterKey=Subdomain,ParameterValue=4560bce --capabilities CAPABILITY_NAMED_IAM\n```\n\n3. Wait until infrastructure created. You can go to AWS console or use this command:\n\n```\naws cloudformation wait stack-create-complete --stack-name dev-4560bce\n```\n\n4. Get needed stack outputs and set environment variables e.g. S3 Bucket name for static web hosting. You can go to AWS console or use this command:\n\n```\naws cloudformation describe-stacks --stack-name dev-4560bce --query \"Stacks[0].Outputs[?OutputKey=='WebAppBucketName'].OutputValue\" --output text\n```\n\n5. Initialize DynamoDB database\n\n```\ncd ..\\backend\\DynamoDB\n```\n\nGet DynamoDB Movies table name\n\n```\naws cloudformation describe-stacks --stack-name dev-4560bce --query \"Stacks[0].Outputs[?OutputKey=='DynamoDBMoviesTableName'].OutputValue\" --output text\n```\n\nModify table name inside Movies.json\n\nBatch write items\n\n```\naws dynamodb batch-write-item --request-items file://Movies.json\n```\n\n6. Build and deploy frontend\n\nGet AppSync API URI and key and set environment variables\n\n```\naws cloudformation describe-stacks --stack-name dev-4560bce --query \"Stacks[0].Outputs[?OutputKey=='AppSyncGraphQLApiUrl'].OutputValue\" --output text\n```\n\n```powershell\n$Env:REACT_APP_AWS_APPSYNC_GRAPHQL_API_URL = 'TODO'\n$Env:REACT_APP_AWS_APPSYNC_GRAPHQL_API_URL\n```\n\n```\naws cloudformation describe-stacks --stack-name dev-4560bce --query \"Stacks[0].Outputs[?OutputKey=='AppSyncApiKey'].OutputValue\" --output text\n```\n\n```powershell\n$Env:REACT_APP_AWS_APPSYNC_API_KEY = 'TODO'\n$Env:REACT_APP_AWS_APPSYNC_API_KEY\n```\n\nGet S3 Bucket name for static web hosting\n\n```\naws cloudformation describe-stacks --stack-name dev-4560bce --query \"Stacks[0].Outputs[?OutputKey=='WebAppBucketName'].OutputValue\" --output text\n```\n\n```\ncd ..\\..\\frontend\nyarn build\naws s3 sync build/ s3://4560bce.bestpicture.link --acl public-read\n```\n\n## Production environment\n\n1. Prepare `devops` S3 bucket, where we copy nested stack (it has to be in S3, not in the local file system) and backend files e.g. AWS AppSync graphQL schema etc.\n\n```\ncd .\\infrastructure\\\n.\\prepare-devops-bucket.bat\n```\n\n2. Create CloudFormation stack\n\n```\naws cloudformation create-stack --stack-name prod --template-body file://stack.yaml --parameters ParameterKey=Environment,ParameterValue=prod --capabilities CAPABILITY_NAMED_IAM\n```\n\n3. Wait until infrastructure created. You can go to AWS console or use this command:\n\n```\naws cloudformation wait stack-create-complete --stack-name prod\n```\n\n4. Get needed stack outputs and set environment variables e.g. S3 Bucket name for static web hosting. You can go to AWS console or use this command:\n\n```\naws cloudformation describe-stacks --stack-name prod --query \"Stacks[0].Outputs[?OutputKey=='WebAppBucketName'].OutputValue\" --output text\n```\n\n5. Initialize DynamoDB database\n\n```\ncd ..\\backend\\DynamoDB\n```\n\nGet DynamoDB Movies table name\n\n```\naws cloudformation describe-stacks --stack-name prod --query \"Stacks[0].Outputs[?OutputKey=='DynamoDBMoviesTableName'].OutputValue\" --output text\n```\n\nModify table name inside Movies.json\n\nBatch write items\n\n```\naws dynamodb batch-write-item --request-items file://Movies.json\n```\n\n6. Build and deploy frontend\n\nGet AppSync API URI and key and set environment variables\n\n```\naws cloudformation describe-stacks --stack-name prod --query \"Stacks[0].Outputs[?OutputKey=='AppSyncGraphQLApiUrl'].OutputValue\" --output text\n```\n\n```powershell\n$Env:REACT_APP_AWS_APPSYNC_GRAPHQL_API_URL = 'TODO'\n$Env:REACT_APP_AWS_APPSYNC_GRAPHQL_API_URL\n```\n\n```\naws cloudformation describe-stacks --stack-name prod --query \"Stacks[0].Outputs[?OutputKey=='AppSyncApiKey'].OutputValue\" --output text\n```\n\n```powershell\n$Env:REACT_APP_AWS_APPSYNC_API_KEY = 'TODO'\n$Env:REACT_APP_AWS_APPSYNC_API_KEY\n```\n\nGet S3 Bucket name for static web hosting\n\n```\naws cloudformation describe-stacks --stack-name prod --query \"Stacks[0].Outputs[?OutputKey=='WebAppBucketName'].OutputValue\" --output text\n```\n\n```\ncd ..\\..\\frontend\nyarn build\naws s3 sync build/ s3://bestpicture.link --acl public-read\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeandpepper%2Fbestpicture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodeandpepper%2Fbestpicture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeandpepper%2Fbestpicture/lists"}