{"id":29828967,"url":"https://github.com/dineshkumar-k-16/aws-codepipeline-react-s3","last_synced_at":"2026-02-08T18:04:08.421Z","repository":{"id":302438145,"uuid":"1012444161","full_name":"DINESHKUMAR-K-16/aws-codepipeline-react-s3","owner":"DINESHKUMAR-K-16","description":"Build a full CI/CD pipeline using AWS CodePipeline to automatically deploy a React.js application stored on GitHub to a static website hosted on Amazon S3.","archived":false,"fork":false,"pushed_at":"2025-07-02T10:58:30.000Z","size":15,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-02T11:50:38.514Z","etag":null,"topics":["aws-codebuild","aws-codedeploy","aws-codepipeline","aws-s3"],"latest_commit_sha":null,"homepage":"","language":null,"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/DINESHKUMAR-K-16.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,"zenodo":null}},"created_at":"2025-07-02T10:44:00.000Z","updated_at":"2025-07-02T10:58:33.000Z","dependencies_parsed_at":"2025-07-02T11:50:42.192Z","dependency_job_id":"7581aca7-bd15-4cb6-8e54-25d4eede373d","html_url":"https://github.com/DINESHKUMAR-K-16/aws-codepipeline-react-s3","commit_stats":null,"previous_names":["dineshkumar-k-16/aws-codepipeline-react-s3"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DINESHKUMAR-K-16/aws-codepipeline-react-s3","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DINESHKUMAR-K-16%2Faws-codepipeline-react-s3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DINESHKUMAR-K-16%2Faws-codepipeline-react-s3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DINESHKUMAR-K-16%2Faws-codepipeline-react-s3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DINESHKUMAR-K-16%2Faws-codepipeline-react-s3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DINESHKUMAR-K-16","download_url":"https://codeload.github.com/DINESHKUMAR-K-16/aws-codepipeline-react-s3/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DINESHKUMAR-K-16%2Faws-codepipeline-react-s3/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267652825,"owners_count":24122100,"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","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["aws-codebuild","aws-codedeploy","aws-codepipeline","aws-s3"],"created_at":"2025-07-29T08:14:56.410Z","updated_at":"2026-02-08T18:04:08.320Z","avatar_url":"https://github.com/DINESHKUMAR-K-16.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# ![aws](https://github.com/julien-muke/Search-Engine-Website-using-AWS/assets/110755734/01cd6124-8014-4baa-a5fe-bd227844d263) Deploy React App with Full CI/CD Pipeline on AWS | GitHub + CodePipeline + S3 🚀\n\n\u003cdiv align=\"center\"\u003e\n\n  \u003cbr /\u003e\n    \u003ca\u003e\n      \u003cimg src=\"https://github.com/user-attachments/assets/9f9b55f3-c9c2-4b87-97c7-030be3464a83\" alt=\"Project Banner\"\u003e\n    \u003c/a\u003e\n  \u003cbr /\u003e\n\n\u003ch3 align=\"center\"\u003eDeploying a React app using EC2 and Terraform\u003c/h3\u003e\n\n   \n\u003c/div\u003e\n\n\n\n## \u003ca name=\"introduction\"\u003e🤖 Introduction\u003c/a\u003e\n\nIn this tutorial, you'll learn how to build a fully automated CI/CD pipeline using AWS CodePipeline, CodeBuild, and Amazon S3 to deploy a React.js application hosted on GitHub. Say goodbye to manual deployments, every time you push to your repo, your app will automatically build and deploy to a static website on S3!\n\n\n## \u003ca name=\"steps\"\u003e🔧 How it Works:\u003c/a\u003e\n \n1. Push code to the `main` branch on GitHub.\n2. AWS CodePipeline detects the change.\n3. AWS CodeBuild installs dependencies and builds the React app.\n4. The build output is deployed to the S3 bucket.\n5. S3 serves the app as a public static website.\n\n## ➡️ Step 1 - Setup your React.js App on GitHub\n\nFirst, we’ll set up a React app by cloning the React app from my GitHub repository. You can use your own or follow along with mine. Make sure the app is committed to GitHub.\n\n\n```bash\nhttps://github.com/DINESHKUMAR-K-16/saas-landing-page.git\n```\n\n## ➡️ Step 2 - Create S3 Bucket for Hosting\n\nFor the deploy provider we are going to use Amazon S3, we will create an S3 bucket.\n1. Head over to the S3 service.\n2. Click Create bucket.\n3. Name it something unique like `my-react-cicd-demo`\n\n![Image](https://github.com/user-attachments/assets/5e772a9f-c278-499c-975d-b1590f962e50)\n\nOnce the s3 bucket is created, leave it for now, as we will come for it to finish the setup later.\n\n\n## ➡️ Step 3 - Create CodePipeline\n\nNow the fun part—building the pipeline.\n\n1. Go to AWS CodePipeline, click Create pipeline.\n2. Name your pipeline: `reactapp-cicd-demo`\n3. Choose a new service role or an existing one.\n\n![Image](https://github.com/user-attachments/assets/718b0040-e0f8-43e4-81ce-3b7e6d55c162)\n\n4. Add source stage:\n\u003cbr\u003e- Source provider: GitHub (connect your GitHub account).\n\u003cbr\u003e- Select your repository and branch.\n\n⚠️Note: Make sure you select the repository that we cloned in Step 1\n\n![Image](https://github.com/user-attachments/assets/7d7d6e7f-8a39-47e3-9271-ffa8c045c3cf)\n\n\u003cbr\u003e- Once you are connected to your Github and select your repository, then choose \"Next\"\n\n![Image](https://github.com/user-attachments/assets/2177e920-30a3-4196-b673-5ae4f1733391)\n\n5. Add build stage:\n\u003cbr\u003e- Provider: AWS CodeBuild.\n\u003cbr\u003e- Choose \"Create project\"\n\nLet's proceed to next step and create the CodeBuild Project.\n\n## ➡️ Step 4 - Create CodeBuild Project\n\nNow let’s set up CodeBuild, which will handle building the React app.\n\n1. Go to CodeBuild, click Create Build Project.\n2. Name it something like `react-cicd-pipeline-demo`\n\n![Image](https://github.com/user-attachments/assets/4f26b687-a04f-409d-877f-092e8dc59f46)\n\n3. Choose a managed image: aws/codebuild/standard:6.0 (or latest).\n4. Under build specifications, choose \"Use a buildspec file\" \n\n![Image](https://github.com/user-attachments/assets/85452545-3411-4766-84ae-b9571389c11f)\n\n5. Inside your GitHub repo, create a file named `buildspec.yml` in the root:\n\n```yaml\nversion: 0.2\n\nphases:\n  install:\n    runtime-versions:\n      nodejs: 18\n    commands:\n      - echo Installing dependencies...\n      - npm ci --legacy-peer-deps\n\n  build:\n    commands:\n      - echo Building the React app...\n      - npm run build\n\nartifacts:\n  files:\n    - '**/*'\n  base-directory: dist\n  discard-paths: no\n\n```\n\n⚠️Note: This file tells CodeBuild to install dependencies, build the app, and copy the contents of the build/ folder as artifacts.\n\n6. Back to the CodeBuild Project, keep the rest as default and choose \"Continue to CodePipeline\"\n7. Then the CodeBuild project will be create and added to the build stage as shown below, then choose \"Next\"\n\n![Image](https://github.com/user-attachments/assets/d5d2ffa9-7c7b-4502-86af-689f7bbe0dec)\n\n8. Add deploy stage:\n\u003cbr\u003e- Provider: Amazon S3.\n\u003cbr\u003e- Bucket: Select the one you created earlier `my-react-cicd-demo`\n\u003cbr\u003e- Extract file option: YES, choose \"Next\"\n\n![Image](https://github.com/user-attachments/assets/ed4dfacf-40f5-4ddb-bf0b-20837c37ac8c)\n\n\u003cbr\u003e- Lastly, review all the configuration and click \"Create pipeline\"\n\nOnce the pipeline is successfully created, you’ll see it run through the `source` `build` and `deploy` stages.\n\n## Let's finish our S3 Buckect configuration\n\n1. Go to Amazon S3 console\n2. Select our existing S3 bucket `my-react-cicd-demo`\n3. You should see the S3 bucket with objects inside, extracted from our CodePipeline.\n4. Now let's make this S3 Bucket public:\n\u003cbr\u003e- On the top bar, choose \"Properties\"\n\n![Image](https://github.com/user-attachments/assets/d0f13940-48fc-42ab-a42b-f57fca2eb618)\n\n\u003cbr\u003e- Scroll down to \"Static Website Hosting\" and click \"Edit\"\n\n![Image](https://github.com/user-attachments/assets/24f26fed-ec71-4a0b-96df-72f51de20d02)\n\n\u003cbr\u003e- Under \"Static Website Hosting\", choose \"Enable\"\n\u003cbr\u003e- And specify `index.html` as the index document, then click \"Save\"\n\n![Image](https://github.com/user-attachments/assets/c25619a1-822a-40bd-b43a-f941c6c2c3c8)\n\n\u003cbr\u003e- Next, edit some permissions, still on the tob bar choose \"Permissions\"\n\u003cbr\u003e- Uncheck \"Block all public access\" to allow public access, then click \"Save changes\"\n\n![Image](https://github.com/user-attachments/assets/e4c76949-667c-4cba-a6ef-637e4d3dcc4a)\n\n\u003cbr\u003e- Next, we will add a bucket policy to allow public read access inside our s3 bucket. Here's the sample policy you can use:\n\n```json\n{\n  \"Version\": \"2012-10-17\",\n  \"Statement\": [\n    {\n      \"Sid\": \"PublicReadGetObject\",\n      \"Effect\": \"Allow\",\n      \"Principal\": \"*\",\n      \"Action\": \"s3:GetObject\",\n      \"Resource\": \"arn:aws:s3:::your-bucket-name/*\"\n    }\n  ]\n}\n```\n⚠️ Replace: `your-bucket-name` with your actual bucket name, then click \"Save\"\n\n![Image](https://github.com/user-attachments/assets/625e9e8b-88ec-413d-931d-922cd21303d8)\n\n\u003cbr\u003e- Go back to the S3 Bucket console, on the top bar, choose Objects, then click on `index.html`\n\u003cbr\u003e- To visit your React.js App, click on the Object URL.\n\n![Image](https://github.com/user-attachments/assets/ad404089-e051-40a6-b6c3-6de7a1acc4df)\n\n\u003cbr\u003e- You should see your React.js App running on Amazon S3\n\n![Image](https://github.com/user-attachments/assets/4d6c02fd-44ba-49d5-967f-23f3d189087e)\n\n\n## ➡️ Step 5 - Test the Pipeline\n\nLet’s test the whole pipeline. I’ll make a small change to the homepage text and push it to GitHub.\n\nAs soon as the code is pushed, CodePipeline is triggered. You’ll see it run through the source, build, and deploy stages.\n\n![Image](https://github.com/user-attachments/assets/e2225370-5dd6-4665-92af-0fb6cc96d316)\n\n\n## 🗑️ Clean Up Resources\n\nWhen you’re done, clean up your AWS resources to avoid charges.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdineshkumar-k-16%2Faws-codepipeline-react-s3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdineshkumar-k-16%2Faws-codepipeline-react-s3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdineshkumar-k-16%2Faws-codepipeline-react-s3/lists"}