{"id":89,"date":"2024-05-09T21:39:13","date_gmt":"2024-05-10T01:39:13","guid":{"rendered":"https:\/\/shagun.dev\/?p=89"},"modified":"2025-01-13T19:48:55","modified_gmt":"2025-01-14T00:48:55","slug":"build-and-deploy-react-project","status":"publish","type":"post","link":"https:\/\/shagun.dev\/?p=89","title":{"rendered":"Build and deploy React project on AWS"},"content":{"rendered":"\n

I have already explained in my previous post how can you auto upload your project changes on push action with S3 using Github workflows. Today, we will learnt about deployment part of it. <\/p>\n\n\n\n\n\n\n\n

Here is the link to previous blog where you can learn about continuous integration of the code:
Click the emoticon \ud83d\udc69\u200d\ud83d\udcbb<\/a><\/p>\n\n\n\n

After completing all the steps and replacing your index.html with react project in the local repository. Now is the time to update main.yaml or app.yaml file<\/p>\n\n\n\n

name: Deploy React App\n\non:\n  push:\n    branches:\n    - master\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Clone repository\n        uses: actions\/checkout@v4\n      - name: Use Node.js 12.x\n        uses: actions\/setup-node@v1\n        with:\n          node-version: 12.x\n      - name: Install dependencies\n        run: npm install    \n      - name: Test\n        run: npm test\n        env:\n          CI: true\n      - name: Generate build\n        run: npm run build\n      # Share artifact inside workflow\n      - name: Share artifact inside workflow\n        uses: actions\/upload-artifact@v1\n        with:\n          name: github-workflow\n          path: build\n  deploy:\n    runs-on: ubuntu-latest\n    # once the application has been successfully tested and the build has been produced\n    # Then we can start with deployment\n    needs: build\n    steps:\n      # Download previously shared build\n      - name: Get artifact\n        uses: actions\/download-artifact@v1\n        with:\n          name: react-github-actions-build\n      # Set the credentials from repository settings\/secrets\n      - name: Configure AWS credentials\n        uses: aws-actions\/configure-aws-credentials@v1\n        with:\n          aws-s3-bucket: ${{ secrets.AWS_S3_BUCKET }}\n          aws-access-key-id: ${{ secrets.AWS_ACCESS_ID }}\n          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}\n          aws-region: ${{ secrets.AWS_REGION }}\n      # Copy the files from build folder to the S3 bucket\n      - name: Deploy to S3\n        run: aws s3 sync .\/your-folder-name s3:\/\/aws-s3-bucket-name \n<\/code><\/pre>\n\n\n\n
Here, how Github actions look like<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
From onwards whenever you push the code to master it will going to deploy it on S3 bucket.
You can get the link of the index.html from the S3 > choose your bucket > properties > object url.<\/p>\n\n\n\n
Kudos!! You deployed your react app on S3 using workflow \ud83e\udd73<\/p>\n","protected":false},"excerpt":{"rendered":"
I have already explained in my previous post how can you auto upload your project changes on push action with S3 using Github workflows. Today, we will learnt about deployment part of it.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-89","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/shagun.dev\/index.php?rest_route=\/wp\/v2\/posts\/89","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shagun.dev\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shagun.dev\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shagun.dev\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shagun.dev\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=89"}],"version-history":[{"count":9,"href":"https:\/\/shagun.dev\/index.php?rest_route=\/wp\/v2\/posts\/89\/revisions"}],"predecessor-version":[{"id":156,"href":"https:\/\/shagun.dev\/index.php?rest_route=\/wp\/v2\/posts\/89\/revisions\/156"}],"wp:attachment":[{"href":"https:\/\/shagun.dev\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=89"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shagun.dev\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=89"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shagun.dev\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}