{"componentChunkName":"component---src-templates-article-template-js-content-file-path-content-blog-deploying-react-app-to-s-3-cloudfront-index-mdx","path":"/blog/deploying-react-app-to-S3-cloudfront/","result":{"data":{"allWebMentionEntry":{"edges":[]}},"pageContext":{"article":{"id":"0f53b018-52c4-53c4-a276-923246698f26","author":"Tarun Sharma (code with tkssharma)","slug":"/blog/deploying-react-app-to-S3-cloudfront/","timeToRead":"6 min read","date":"June 27, 2022","dateString":"June 27, 2022","datePublishedSeoFormat":"2022-06-27","title":"Deploying react app to S3 cloudfront using github actions","excerpt":"Deploying react app to S3 cloudfront using github actions","tags":["aws","aws s3","aws cloudfront","react app","github actions"],"lastModificationTime":"2022-06-27T00:00:00.000Z","lastModificationTimeString":"June 27, 2022","dateModifiedSeoFormat":"2022-06-27","hero":{"full":{"layout":"fullWidth","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/124afb015f28bcde7e29eeee4d663d40/8cf01/index.jpg","srcSet":"/static/124afb015f28bcde7e29eeee4d663d40/245e5/index.jpg 750w,\n/static/124afb015f28bcde7e29eeee4d663d40/f1a6c/index.jpg 1080w,\n/static/124afb015f28bcde7e29eeee4d663d40/6a52a/index.jpg 1366w,\n/static/124afb015f28bcde7e29eeee4d663d40/8cf01/index.jpg 1920w","sizes":"100vw"},"sources":[{"srcSet":"/static/124afb015f28bcde7e29eeee4d663d40/f1c30/index.webp 750w,\n/static/124afb015f28bcde7e29eeee4d663d40/54311/index.webp 1080w,\n/static/124afb015f28bcde7e29eeee4d663d40/8d6ee/index.webp 1366w,\n/static/124afb015f28bcde7e29eeee4d663d40/702da/index.webp 1920w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":0.5625},"seo":"/static/124afb015f28bcde7e29eeee4d663d40/index.png"},"commentId":"/blog/deploying-react-app-to-S3-cloudfront/","tableOfContents":{"items":[{"items":[{"url":"#deploy-react-app-to-aws-cloudfront-with-github-actionscicd","title":"Deploy React App to AWS CloudFront with GitHub Actions(CI/CD)"}]},{"url":"#table-of-content","title":"Table of Content","items":[{"url":"#step-1--setup-react-app-for-production","title":"Step 1 : Setup React App for Production"},{"url":"#step-2--setup-s3-bucket-and-upload-the-content","title":"Step 2 : Setup S3 bucket and upload the content"},{"url":"#step-3--creating-the-aws-cloudfront-distribution","title":"Step 3 : Creating the AWS CloudFront Distribution"}]},{"url":"#automating-the-deployment","title":"Automating the deployment","items":[{"url":"#step-4--configure-aws-credential-in-github","title":"Step 4 : Configure AWS Credential in GitHub"},{"url":"#step-5--create-workflowyml-to-define-github-actions","title":"Step 5 : Create workflow.yml to define GitHub Actions"}]},{"url":"#conclusion","title":"Conclusion"}]},"contentFilePath":"/opt/build/repo/content/blog/deploying-react-app-to-S3-cloudfront/index.mdx","lastModifiedTime":"2022-06-27T00:00:00.000Z","lastModifiedTimeString":"June 27, 2022"},"authors":[],"relatedArticles":[{"id":"902ddbca-4dfa-5590-b607-5872669a1fec","author":"Tarun Sharma (code with tkssharma)","slug":"/blog/how-to-learn-from-my-channel/","timeToRead":"4 min read","date":"April 01, 2024","dateString":"April 01, 2024","datePublishedSeoFormat":"2024-04-01","title":"How to Learn from My YouTube Channel (code with tkssharma)","excerpt":"How to Learn from My YouTube Channel (code with tkssharma)","tags":["react","aws","nestjs"],"lastModificationTime":"2024-04-01T00:00:00.000Z","lastModificationTimeString":"April 01, 2024","dateModifiedSeoFormat":"2024-04-01","hero":{"full":{"layout":"fullWidth","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/124afb015f28bcde7e29eeee4d663d40/8cf01/index.jpg","srcSet":"/static/124afb015f28bcde7e29eeee4d663d40/245e5/index.jpg 750w,\n/static/124afb015f28bcde7e29eeee4d663d40/f1a6c/index.jpg 1080w,\n/static/124afb015f28bcde7e29eeee4d663d40/6a52a/index.jpg 1366w,\n/static/124afb015f28bcde7e29eeee4d663d40/8cf01/index.jpg 1920w","sizes":"100vw"},"sources":[{"srcSet":"/static/124afb015f28bcde7e29eeee4d663d40/f1c30/index.webp 750w,\n/static/124afb015f28bcde7e29eeee4d663d40/54311/index.webp 1080w,\n/static/124afb015f28bcde7e29eeee4d663d40/8d6ee/index.webp 1366w,\n/static/124afb015f28bcde7e29eeee4d663d40/702da/index.webp 1920w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":0.5625},"seo":"/static/124afb015f28bcde7e29eeee4d663d40/index.png"},"commentId":"/blog/how-to-learn-from-my-channel/","tableOfContents":{"items":[{"url":"#how-to-learn-from-my-channel","title":"💻How to Learn From My Channel","items":[{"items":[{"url":"#","items":[{"url":"#-1"},{"url":"#-2"}]},{"url":"#-3","items":[{"url":"#-4"},{"url":"#-5"},{"url":"#-6"},{"url":"#-7"}]},{"url":"#-8"},{"url":"#-9"},{"url":"#-10"},{"url":"#-11","items":[{"url":"#-12"},{"url":"#-13"},{"url":"#-14"}]},{"url":"#-15"},{"url":"#-16"},{"url":"#-17"},{"url":"#-18"},{"url":"#-19"},{"url":"#-20"},{"url":"#-21"}]}]}]},"contentFilePath":"/opt/build/repo/content/blog/how-to-learn-from-my-channel/index.mdx","lastModifiedTime":"2024-04-01T00:00:00.000Z","lastModifiedTimeString":"April 01, 2024"},{"id":"64d281f1-d055-59f6-a2a6-a0dd1713a794","author":"Tarun Sharma (code with tkssharma)","slug":"/blog/booking-clone-app/","timeToRead":"1 min read","date":"March 03, 2024","dateString":"March 03, 2024","datePublishedSeoFormat":"2024-03-03","title":"lets build full stack clone app Clone Application","excerpt":"lets build full stack clone app Clone Application","tags":["react","aws","nestjs","nextjs"],"lastModificationTime":"2024-03-03T00:00:00.000Z","lastModificationTimeString":"March 03, 2024","dateModifiedSeoFormat":"2024-03-03","hero":{"full":{"layout":"fullWidth","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/124afb015f28bcde7e29eeee4d663d40/8cf01/index.jpg","srcSet":"/static/124afb015f28bcde7e29eeee4d663d40/245e5/index.jpg 750w,\n/static/124afb015f28bcde7e29eeee4d663d40/f1a6c/index.jpg 1080w,\n/static/124afb015f28bcde7e29eeee4d663d40/6a52a/index.jpg 1366w,\n/static/124afb015f28bcde7e29eeee4d663d40/8cf01/index.jpg 1920w","sizes":"100vw"},"sources":[{"srcSet":"/static/124afb015f28bcde7e29eeee4d663d40/f1c30/index.webp 750w,\n/static/124afb015f28bcde7e29eeee4d663d40/54311/index.webp 1080w,\n/static/124afb015f28bcde7e29eeee4d663d40/8d6ee/index.webp 1366w,\n/static/124afb015f28bcde7e29eeee4d663d40/702da/index.webp 1920w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":0.5625},"seo":"/static/124afb015f28bcde7e29eeee4d663d40/index.png"},"commentId":"/blog/booking-clone-app/","tableOfContents":{"items":[{"url":"#lets-build-clone-app-2024","title":"Lets Build Clone App 2024"}]},"contentFilePath":"/opt/build/repo/content/blog/booking-clone-app/index.mdx","lastModifiedTime":"2024-03-03T00:00:00.000Z","lastModifiedTimeString":"March 03, 2024"},{"id":"e862802c-0a64-5458-973c-514eea38c386","author":"Tarun Sharma (code with tkssharma)","slug":"/blog/deploy-react-app-to-s3/","timeToRead":"5 min read","date":"December 11, 2023","dateString":"December 11, 2023","datePublishedSeoFormat":"2023-12-11","title":"How to Deploy React App to S3 Bucket","excerpt":"How to Deploy React App to S3 Bucket","tags":["react","aws"],"lastModificationTime":"2023-12-11T00:00:00.000Z","lastModificationTimeString":"December 11, 2023","dateModifiedSeoFormat":"2023-12-11","hero":{"full":{"layout":"fullWidth","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/124afb015f28bcde7e29eeee4d663d40/8cf01/index.jpg","srcSet":"/static/124afb015f28bcde7e29eeee4d663d40/245e5/index.jpg 750w,\n/static/124afb015f28bcde7e29eeee4d663d40/f1a6c/index.jpg 1080w,\n/static/124afb015f28bcde7e29eeee4d663d40/6a52a/index.jpg 1366w,\n/static/124afb015f28bcde7e29eeee4d663d40/8cf01/index.jpg 1920w","sizes":"100vw"},"sources":[{"srcSet":"/static/124afb015f28bcde7e29eeee4d663d40/f1c30/index.webp 750w,\n/static/124afb015f28bcde7e29eeee4d663d40/54311/index.webp 1080w,\n/static/124afb015f28bcde7e29eeee4d663d40/8d6ee/index.webp 1366w,\n/static/124afb015f28bcde7e29eeee4d663d40/702da/index.webp 1920w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":0.5625},"seo":"/static/124afb015f28bcde7e29eeee4d663d40/index.png"},"commentId":"/blog/deploy-react-app-to-s3/","tableOfContents":{"items":[{"items":[{"items":[{"url":"#requirements","title":"Requirements"},{"url":"#setup-aws-s3-bucket-and-access","title":"Setup AWS S3 bucket and access"},{"url":"#prepare-gitlab","title":"Prepare Gitlab"},{"url":"#write-the-pipeline","title":"Write the pipeline"}]}]},{"url":"#we-simulate-a-build-phase-by-manually-creating-files-in-a-build-folder","title":"We simulate a build phase by manually creating files in a build folder"},{"url":"#an-example-would-be-using-yarn-build-to-build-a-react-project-that-would-create-static-files-in-a-build-or-public-folder","title":"An example would be using yarn build to build a react project that would create static files in a build or public folder","items":[{"items":[{"url":"#test-the-overall-setup","title":"Test the overall setup"},{"url":"#conclusion","title":"Conclusion"}]}]}]},"contentFilePath":"/opt/build/repo/content/blog/deploy-react-app-to-s3/index.mdx","lastModifiedTime":"2023-12-11T00:00:00.000Z","lastModifiedTimeString":"December 11, 2023"},{"id":"9aa19e16-09bb-5a6c-9cc8-503a58beb530","author":"Tarun Sharma (code with tkssharma)","slug":"/blog/host-static-website-using-s3-and-cloudfront/","timeToRead":"6 min read","date":"July 03, 2023","dateString":"July 03, 2023","datePublishedSeoFormat":"2023-07-03","title":"How to Build and Deploy S3 bucket with Cloudfront","excerpt":"How to Build and Deploy S3 bucket with Cloudfront","tags":["aws","aws-cdk"],"lastModificationTime":"2023-07-03T00:00:00.000Z","lastModificationTimeString":"July 03, 2023","dateModifiedSeoFormat":"2023-07-03","hero":{"full":{"layout":"fullWidth","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/124afb015f28bcde7e29eeee4d663d40/8cf01/index.jpg","srcSet":"/static/124afb015f28bcde7e29eeee4d663d40/245e5/index.jpg 750w,\n/static/124afb015f28bcde7e29eeee4d663d40/f1a6c/index.jpg 1080w,\n/static/124afb015f28bcde7e29eeee4d663d40/6a52a/index.jpg 1366w,\n/static/124afb015f28bcde7e29eeee4d663d40/8cf01/index.jpg 1920w","sizes":"100vw"},"sources":[{"srcSet":"/static/124afb015f28bcde7e29eeee4d663d40/f1c30/index.webp 750w,\n/static/124afb015f28bcde7e29eeee4d663d40/54311/index.webp 1080w,\n/static/124afb015f28bcde7e29eeee4d663d40/8d6ee/index.webp 1366w,\n/static/124afb015f28bcde7e29eeee4d663d40/702da/index.webp 1920w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":0.5625},"seo":"/static/124afb015f28bcde7e29eeee4d663d40/index.png"},"commentId":"/blog/host-static-website-using-s3-and-cloudfront/","tableOfContents":{"items":[{"url":"#build-and-deploy-s3-bucket-with-cloudfront","title":"Build and Deploy S3 bucket with Cloudfront"},{"url":"#lets-build-s3-bucket","title":"Lets build S3 bucket","items":[{"url":"#deploy-typescript-lambda-to-aws","title":"Deploy Typescript Lambda to AWS"},{"url":"#optimize-typescript-lambda-function","title":"Optimize Typescript Lambda function"},{"url":"#cleanup","title":"Cleanup"}]}]},"contentFilePath":"/opt/build/repo/content/blog/host-static-website-using-s3-and-cloudfront/index.mdx","lastModifiedTime":"2023-07-03T00:00:00.000Z","lastModifiedTimeString":"July 03, 2023"},{"id":"284de1e9-3a3f-5d97-b2b9-8e9946542949","author":"Tarun Sharma (code with tkssharma)","slug":"/blog/building-rest-apis-nodejs-mongo-part-7/","timeToRead":"12 min read","date":"June 07, 2023","dateString":"June 07, 2023","datePublishedSeoFormat":"2023-06-07","title":"Nest JS Writing Test cases for controller and services Part-7","excerpt":"Nest JS Writing Test cases for controller and services Part-7","tags":["nodejs","aws","nestjs","microservices"],"lastModificationTime":"2023-06-07T00:00:00.000Z","lastModificationTimeString":"June 07, 2023","dateModifiedSeoFormat":"2023-06-07","hero":{"full":{"layout":"fullWidth","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/124afb015f28bcde7e29eeee4d663d40/8cf01/index.jpg","srcSet":"/static/124afb015f28bcde7e29eeee4d663d40/245e5/index.jpg 750w,\n/static/124afb015f28bcde7e29eeee4d663d40/f1a6c/index.jpg 1080w,\n/static/124afb015f28bcde7e29eeee4d663d40/6a52a/index.jpg 1366w,\n/static/124afb015f28bcde7e29eeee4d663d40/8cf01/index.jpg 1920w","sizes":"100vw"},"sources":[{"srcSet":"/static/124afb015f28bcde7e29eeee4d663d40/f1c30/index.webp 750w,\n/static/124afb015f28bcde7e29eeee4d663d40/54311/index.webp 1080w,\n/static/124afb015f28bcde7e29eeee4d663d40/8d6ee/index.webp 1366w,\n/static/124afb015f28bcde7e29eeee4d663d40/702da/index.webp 1920w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":0.5625},"seo":"/static/124afb015f28bcde7e29eeee4d663d40/index.png"},"commentId":"/blog/building-rest-apis-nodejs-mongo-part-7/","tableOfContents":{"items":[{"url":"#nest-js-writing-test-cases-for-controller-and-services-part-7","title":"Nest JS Writing Test cases for controller and services Part-7","items":[{"url":"#what-is-nestjs","title":"What is NestJS?"},{"url":"#exploring-the-project-files","title":"Exploring the project files"}]},{"url":"#testing-nestjs-applications","title":"Testing Nestjs applications","items":[{"url":"#nestjs-test-harness","title":"Nestjs test harness"},{"url":"#jest-tips-and-tricks","title":"Jest Tips and Tricks","items":[{"url":"#mocking-external-classes-or-functions","title":"Mocking external classes or functions"},{"url":"#mock-parent-classes-through-prototype","title":"Mock parent classes through prototype"},{"url":"#extract-the-functionality-into-functions-as-possible","title":"Extract the functionality into functions as possible"}]},{"url":"#simple-test-example","title":"Simple Test example"},{"url":"#end-to-end-testing","title":"End-to-end testing"}]}]},"contentFilePath":"/opt/build/repo/content/blog/building-rest-apis-nodejs-mongo-part-7/index.mdx","lastModifiedTime":"2023-06-07T00:00:00.000Z","lastModifiedTimeString":"June 07, 2023"},{"id":"70f65f71-2bc2-511c-ad93-5865e60acfa3","author":"Tarun Sharma (code with tkssharma)","slug":"/blog/building-rest-apis-nodejs-mongo-part-6/","timeToRead":"13 min read","date":"June 06, 2023","dateString":"June 06, 2023","datePublishedSeoFormat":"2023-06-06","title":"Nest JS User registration with Sendgrid email Integration Part-6 ","excerpt":"Nest JS User registration with Sendgrid email Integration Part-6 ","tags":["nodejs","aws","nestjs","microservices"],"lastModificationTime":"2023-06-06T00:00:00.000Z","lastModificationTimeString":"June 06, 2023","dateModifiedSeoFormat":"2023-06-06","hero":{"full":{"layout":"fullWidth","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/124afb015f28bcde7e29eeee4d663d40/8cf01/index.jpg","srcSet":"/static/124afb015f28bcde7e29eeee4d663d40/245e5/index.jpg 750w,\n/static/124afb015f28bcde7e29eeee4d663d40/f1a6c/index.jpg 1080w,\n/static/124afb015f28bcde7e29eeee4d663d40/6a52a/index.jpg 1366w,\n/static/124afb015f28bcde7e29eeee4d663d40/8cf01/index.jpg 1920w","sizes":"100vw"},"sources":[{"srcSet":"/static/124afb015f28bcde7e29eeee4d663d40/f1c30/index.webp 750w,\n/static/124afb015f28bcde7e29eeee4d663d40/54311/index.webp 1080w,\n/static/124afb015f28bcde7e29eeee4d663d40/8d6ee/index.webp 1366w,\n/static/124afb015f28bcde7e29eeee4d663d40/702da/index.webp 1920w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":0.5625},"seo":"/static/124afb015f28bcde7e29eeee4d663d40/index.png"},"commentId":"/blog/building-rest-apis-nodejs-mongo-part-6/","tableOfContents":{"items":[{"url":"#nest-js-user-registration-with-sendgrid-email-integration-part-6","title":"Nest JS User registration with Sendgrid email Integration Part-6","items":[{"url":"#what-is-nestjs","title":"What is NestJS?"},{"url":"#exploring-the-project-files","title":"Exploring the project files"}]},{"url":"#handling-user-registration","title":"Handling user registration","items":[{"url":"#registering-a-new-user","title":"Registering a new user"},{"url":"#hashing-password","title":"Hashing password"},{"url":"#registration-welcome-notification","title":"Registration Welcome Notification"}]}]},"contentFilePath":"/opt/build/repo/content/blog/building-rest-apis-nodejs-mongo-part-6/index.mdx","lastModifiedTime":"2023-06-06T00:00:00.000Z","lastModifiedTimeString":"June 06, 2023"}],"relatedStories":[{"node":{"title":"What are Microservices? - AWS","date":"Aug 22, 2024","description":"Amazon's guide to microservices architecture, benefits, challenges, and how to implement them on AWS.","id":"947784a1-b30f-5feb-9354-dd67d086ec70","tags":["microservices","aws"],"url":"https://aws.amazon.com/microservices/"}},{"node":{"title":"AWS Serverless and Serverless Framework","date":"Jun 04, 2023","description":"Serverless offloads all management responsibility for backend cloud infrastructure and operations tasks — provisioning, scheduling, scaling, patching, and more — to the cloud provider. This gives developers more time to develop and optimize their front-end application code and business logic. And with serverless, customers never pay for idle capacity. They pay only for the resources required to run their applications, and only when those applications are running.    ","id":"c84c92c2-bd81-5e4c-8a8b-abcdd0d151f3","tags":["aws"],"url":"https://medium.com/tkssharma/aws-serverless-and-serverless-framework-45d976b92679"}}],"relatedVideos":[],"relatedTools":[{"node":{"title":"AWS Console - Cloud Services","id":"c5590a1d-abe7-500d-bd99-8955e13646e8","tags":["cloud","aws"],"url":"https://aws.amazon.com/console/","description":"Access and manage Amazon Web Services including compute, storage, databases, and more.","image":"https://a0.awsstatic.com/libra-css/images/logos/aws_logo_smile_1200x630.png"}}],"relatedSnippets":[],"next":{"id":"98f1fe63-f46a-55b5-9a94-ba0a920efbce","author":"Tarun Sharma (code with tkssharma)","slug":"/blog/nestjs-building-restful-apis-with-mongodb/","timeToRead":"15 min read","date":"July 02, 2022","dateString":"July 02, 2022","datePublishedSeoFormat":"2022-07-02","title":"Nest JS Building REST APIs using Mongo DB Part-1","excerpt":"Nest JS Building REST APIs using Mongo DB Part-1","tags":["nestjs","mongodb"],"lastModificationTime":"2023-01-16T12:50:10.699Z","lastModificationTimeString":"January 16, 2023","dateModifiedSeoFormat":"2023-01-16","hero":{"full":{"layout":"fullWidth","backgroundColor":"#f83858","images":{"fallback":{"src":"/static/583b4946bb0f3d93d37e42bd2ef9b379/49e4e/index.png","srcSet":"/static/583b4946bb0f3d93d37e42bd2ef9b379/0c057/index.png 750w,\n/static/583b4946bb0f3d93d37e42bd2ef9b379/900d9/index.png 1080w,\n/static/583b4946bb0f3d93d37e42bd2ef9b379/49e4e/index.png 1280w","sizes":"100vw"},"sources":[{"srcSet":"/static/583b4946bb0f3d93d37e42bd2ef9b379/f1c30/index.webp 750w,\n/static/583b4946bb0f3d93d37e42bd2ef9b379/54311/index.webp 1080w,\n/static/583b4946bb0f3d93d37e42bd2ef9b379/c2dd8/index.webp 1280w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":0.5625},"seo":"/static/583b4946bb0f3d93d37e42bd2ef9b379/index.png"},"commentId":"/blog/nestjs-building-restful-apis-with-mongodb/","tableOfContents":{"items":[{"url":"#nest-js-building-rest-apis-using-mongo-db-part-1","title":"Nest JS Building REST APIs using Mongo DB Part-1","items":[{"url":"#what-is-nestjs","title":"What is NestJS?"},{"url":"#generating-a-nestjs-project","title":"Generating a NestJS project"},{"url":"#exploring-the-project-files","title":"Exploring the project files"},{"url":"#defining-the-apis","title":"Defining the APIs"},{"url":"#creating-postservice","title":"Creating PostService"},{"url":"#creating-postcontroller","title":"Creating PostController"},{"url":"#run-the-application","title":"Run the application"}]}]},"contentFilePath":"/opt/build/repo/content/blog/nestjs-building-restful-apis-with-mongodb/index.mdx","lastModifiedTime":"2023-01-16T12:50:10.699Z","lastModifiedTimeString":"January 16, 2023"},"previous":{"id":"5dc8e617-2930-564d-82e7-699797e16647","author":"Tarun Sharma (code with tkssharma)","slug":"/blog/nestjs-with-sns-sqs-s3/","timeToRead":"6 min read","date":"June 19, 2022","dateString":"June 19, 2022","datePublishedSeoFormat":"2022-06-19","title":"Nest JS with AWS components like SNS, SQS, S3 and many more..","excerpt":"Nest JS with AWS components like SNS, SQS, S3 and many more..","tags":["nestjs","AWS","S3","SNS","SQS"],"lastModificationTime":"2022-06-19T00:00:00.000Z","lastModificationTimeString":"June 19, 2022","dateModifiedSeoFormat":"2022-06-19","hero":{"full":{"layout":"fullWidth","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/124afb015f28bcde7e29eeee4d663d40/8cf01/index.jpg","srcSet":"/static/124afb015f28bcde7e29eeee4d663d40/245e5/index.jpg 750w,\n/static/124afb015f28bcde7e29eeee4d663d40/f1a6c/index.jpg 1080w,\n/static/124afb015f28bcde7e29eeee4d663d40/6a52a/index.jpg 1366w,\n/static/124afb015f28bcde7e29eeee4d663d40/8cf01/index.jpg 1920w","sizes":"100vw"},"sources":[{"srcSet":"/static/124afb015f28bcde7e29eeee4d663d40/f1c30/index.webp 750w,\n/static/124afb015f28bcde7e29eeee4d663d40/54311/index.webp 1080w,\n/static/124afb015f28bcde7e29eeee4d663d40/8d6ee/index.webp 1366w,\n/static/124afb015f28bcde7e29eeee4d663d40/702da/index.webp 1920w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":0.5625},"seo":"/static/124afb015f28bcde7e29eeee4d663d40/index.png"},"commentId":"/blog/nestjs-with-sns-sqs-s3/","tableOfContents":{"items":[{"url":"#nest-js-with-aws-components-like-sns-sqs-s3-and-many-more","title":"Nest JS with AWS components like SNS, SQS, S3 and many more","items":[{"items":[{"url":"#create-producermodulets","title":"Create producer.module.ts"},{"url":"#create-producer-function-in-producerservicets","title":"Create Producer function in producer.service.ts"},{"url":"#lastly-import-the-producer-in-the-root-appmodulets","title":"Lastly Import the producer in the root app.module.ts"}]},{"url":"#lets-see-how-to-work-with-sns-topics","title":"Lets see how to work with SNS Topics"},{"url":"#lets-see-how-to-work-with-s3-buckets","title":"Lets see how to work with S3 buckets"}]}]},"contentFilePath":"/opt/build/repo/content/blog/nestjs-with-sns-sqs-s3/index.mdx","lastModifiedTime":"2022-06-19T00:00:00.000Z","lastModifiedTimeString":"June 19, 2022"},"permalink":"https://blog.tkssharma.com/blog/deploying-react-app-to-S3-cloudfront/","frontmatter":{"title":"Deploying react app to S3 cloudfront using github actions","description":"Deploying react app to S3 cloudfront using github actions","author":"Tarun Sharma (code with tkssharma)","date":"2022-06-27T00:00:00.000Z","lastModificationTime":"2022-06-27T00:00:00.000Z","image":"./index.png","tags":["aws","aws s3","aws cloudfront","react app","github actions"]}}},"staticQueryHashes":["1457518467","1714442890","2703881467","2744905544","292919004"],"slicesMap":{}}