{"id":3621,"date":"2024-05-23T08:27:49","date_gmt":"2024-05-23T07:27:49","guid":{"rendered":"https:\/\/www.easydeploy.io\/blog\/?p=3621"},"modified":"2024-05-27T06:20:36","modified_gmt":"2024-05-27T05:20:36","slug":"how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3","status":"publish","type":"post","link":"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/","title":{"rendered":"How to Set up Jenkins CI\/CD Pipeline to Build and Deploy a ReactJS App from GitHub to Amazon S3"},"content":{"rendered":"<h1>Introduction<\/h1>\n<p>In this article, we are going to cover a <strong>Jenkins CI\/CD pipeline to build and deploy a reactjs app from github to amazon s3.<\/strong><\/p>\n<p><strong>Jenkins<\/strong> is an open-source automation server that is widely used for building, testing, and deploying software projects. It provides a platform for implementing Continuous Integration (CI) and Continuous Deployment (CD) pipelines, allowing developers to automate various stages of the software development lifecycle.<\/p>\n<p>If you would like to follow a video tutorial please use our YouTube video.<\/p>\n<div class=\"wpex-responsive-embed\"><iframe loading=\"lazy\" title=\"How to Set up Jenkins CI\/CD Pipeline to Build and Deploy a ReactJS App from GitHub to Amazon S3\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/pPWa0yeWEI0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<h1>Prerequisites<\/h1>\n<p><strong>GitHub Account<\/strong>: Ensure you have a GitHub account and a repository where your reactjs project is hosted.<br \/>\n<strong>AWS Account<\/strong>: An active AWS account with permissions to create and manage S3 buckets.<br \/>\n<strong>AWS S3 Bucket<\/strong>: Create an S3 bucket in your AWS account where you will deploy your project.<br \/>\n<strong>Jenkins Server<\/strong>: Install Jenkins on an EC2 instance or server.<\/p>\n<h1>Create IAM user<\/h1>\n<p>Go to <strong>IAM services<\/strong>, create a user with &#8220;<strong>EC2fullacess<\/strong>&#8221; and &#8220;<strong>S3fullaccess<\/strong>&#8221; permission. and download the access key and secret key<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/1-2.png\" alt=\"IAM user\" width=\"1702\" height=\"850\" class=\"aligncenter wp-image-3658 size-full\" title=\"IAM user\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/1-2.png 1702w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/1-2-300x150.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/1-2-1024x511.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/1-2-768x384.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/1-2-1536x767.png 1536w\" sizes=\"(max-width: 1702px) 100vw, 1702px\" \/><\/p>\n<h1>Setup S3 bucket<\/h1>\n<p>Go to<strong> S3 services<\/strong>, click &gt;&gt; <strong>create bucket<\/strong>, type &gt;&gt;<strong> bucket name<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/2-2.png\" alt=\"S3 bucket\" width=\"1206\" height=\"784\" class=\"aligncenter wp-image-3702 size-full\" title=\"S3 bucket\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/2-2.png 1206w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/2-2-300x195.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/2-2-1024x666.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/2-2-768x499.png 768w\" sizes=\"(max-width: 1206px) 100vw, 1206px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Unselect the &gt;&gt; <strong>block all access<\/strong>, select &gt;&gt; <strong>acknowledgement<\/strong>, click &gt;&gt; <strong>create bucket<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/3-1.png\" alt=\"S3 bucket\" width=\"1273\" height=\"811\" class=\"aligncenter wp-image-3660 size-full\" title=\"s3 bucket\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/3-1.png 1273w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/3-1-300x191.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/3-1-1024x652.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/3-1-768x489.png 768w\" sizes=\"(max-width: 1273px) 100vw, 1273px\" \/><\/p>\n<p>Now we successfully created the bucket, click &gt;&gt; <strong>properties<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/4-1.png\" alt=\"S3 bucket\" width=\"1645\" height=\"805\" class=\"aligncenter wp-image-3661 size-full\" title=\"S3 bucket properties\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/4-1.png 1645w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/4-1-300x147.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/4-1-1024x501.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/4-1-768x376.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/4-1-1536x752.png 1536w\" sizes=\"(max-width: 1645px) 100vw, 1645px\" \/><\/p>\n<p>Scroll down to see the <strong>static web hosting<\/strong>, click &gt;&gt;<strong> edit<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/5-1.png\" alt=\"static web hosting\" width=\"1704\" height=\"801\" class=\"aligncenter wp-image-3662 size-full\" title=\"static web hosting\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/5-1.png 1704w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/5-1-300x141.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/5-1-1024x481.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/5-1-768x361.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/5-1-1536x722.png 1536w\" sizes=\"(max-width: 1704px) 100vw, 1704px\" \/><\/p>\n<p>Click &gt;&gt;<strong> enable<\/strong>, In index document type &gt;&gt; &#8220;<strong>index.html<\/strong>&#8220;, click &gt;&gt; <strong>save changes<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/6-1.png\" alt=\"Static web hosting\" width=\"1299\" height=\"811\" class=\"aligncenter wp-image-3663 size-full\" title=\"Static web hosting\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/6-1.png 1299w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/6-1-300x187.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/6-1-1024x639.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/6-1-768x479.png 768w\" sizes=\"(max-width: 1299px) 100vw, 1299px\" \/><\/p>\n<p>Now click &gt;&gt; <strong>permissions<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/7-1.png\" alt=\"S3 bucket\" width=\"1680\" height=\"802\" class=\"aligncenter wp-image-3664 size-full\" title=\"S3 bucket\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/7-1.png 1680w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/7-1-300x143.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/7-1-1024x489.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/7-1-768x367.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/7-1-1536x733.png 1536w\" sizes=\"(max-width: 1680px) 100vw, 1680px\" \/><\/p>\n<p>In bucket policy, click &gt;&gt;<strong> edit<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/8-1.png\" alt=\"s3 bucket\" width=\"1618\" height=\"792\" class=\"aligncenter wp-image-3687 size-full\" title=\"Bucket policy\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/8-1.png 1618w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/8-1-300x147.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/8-1-1024x501.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/8-1-768x376.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/8-1-1536x752.png 1536w\" sizes=\"(max-width: 1618px) 100vw, 1618px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Now click &gt;&gt; <strong>policy generator<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/9-2-1024x466.png\" alt=\"S3 bucket\" width=\"1024\" height=\"466\" class=\"aligncenter wp-image-3803 size-large\" title=\"bucket policy\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/9-2-1024x466.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/9-2-300x137.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/9-2-768x350.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/9-2-1536x699.png 1536w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/9-2.png 1702w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>In step 1 &#8211; select a type of policy, choose &gt;&gt;<strong> s3 bucket policy<\/strong><\/p>\n<p>In step2 &#8211; principle, type &gt;&gt; <strong>&#8221; * &#8220;<\/strong> , in AWS service, choose &gt;&gt; <strong>amazon S3<\/strong>, In actions,choose &gt;&gt;&#8221;<strong>GetObject<\/strong>&#8220;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/10-1.png\" alt=\"S3 bucket policy \" width=\"1693\" height=\"894\" class=\"aligncenter wp-image-3690 size-full\" title=\"policy generator\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/10-1.png 1693w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/10-1-300x158.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/10-1-1024x541.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/10-1-768x406.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/10-1-1536x811.png 1536w\" sizes=\"(max-width: 1693px) 100vw, 1693px\" \/><\/p>\n<p>In ARN go back to the previous page and copy the &gt;&gt;<strong> bucket ARN<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/11.png\" alt=\"s3 bucket\" width=\"1692\" height=\"787\" class=\"aligncenter wp-image-3665 size-full\" title=\"Bucket ARN\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/11.png 1692w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/11-300x140.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/11-1024x476.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/11-768x357.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/11-1536x714.png 1536w\" sizes=\"(max-width: 1692px) 100vw, 1692px\" \/><\/p>\n<p>Paste the bucket ARN here and click &gt;&gt;<strong> add statement.<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/12-1.png\" alt=\"S3 bucket policy \" width=\"1708\" height=\"889\" class=\"aligncenter wp-image-3666 size-full\" title=\"S3 bucket policy\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/12-1.png 1708w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/12-1-300x156.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/12-1-1024x533.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/12-1-768x400.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/12-1-1536x799.png 1536w\" sizes=\"(max-width: 1708px) 100vw, 1708px\" \/><\/p>\n<p>Click &gt;&gt;\u00a0<strong> generate policy<\/strong>, copy the policy<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/13-1.png\" alt=\"S3 bucket policy\" width=\"1686\" height=\"885\" class=\"aligncenter wp-image-3667 size-full\" title=\"S3 bucket policy\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/13-1.png 1686w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/13-1-300x157.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/13-1-1024x538.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/13-1-768x403.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/13-1-1536x806.png 1536w\" sizes=\"(max-width: 1686px) 100vw, 1686px\" \/><\/p>\n<p>Go back to the previous page and paste the copied policy, add &#8220;\/*&#8221; in the 11th line and click &gt;&gt;<strong> save changes<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/14-1.png\" alt=\"S3 bucket policy\" width=\"1675\" height=\"835\" class=\"aligncenter wp-image-3668 size-full\" title=\"S3 bucket policy\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/14-1.png 1675w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/14-1-300x150.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/14-1-1024x510.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/14-1-768x383.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/14-1-1536x766.png 1536w\" sizes=\"(max-width: 1675px) 100vw, 1675px\" \/><\/p>\n<p>Now we set all the things in the s3 bucket<\/p>\n<h1>Jenkins server<\/h1>\n<p>This is my Jenkins server, I already installed Jenkins, open the Jenkins server.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/15-1.png\" alt=\"Jenkins\" width=\"1692\" height=\"819\" class=\"aligncenter wp-image-3669 size-full\" title=\"jenkins server\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/15-1.png 1692w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/15-1-300x145.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/15-1-1024x496.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/15-1-768x372.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/15-1-1536x743.png 1536w\" sizes=\"(max-width: 1692px) 100vw, 1692px\" \/><\/p>\n<p>Click &gt;&gt; <strong>Create a job<\/strong>, add &gt;&gt; <strong>name<\/strong>,choose &gt;&gt;<strong> pipeline<\/strong>, click &gt;&gt; <strong>ok<\/strong>.<\/p>\n<p>Select &gt;&gt; <strong>Github project<\/strong>, paste the GitHub project repository URL<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/16-1.png\" alt=\"Jenkins\" width=\"1699\" height=\"832\" class=\"aligncenter wp-image-3670 size-full\" title=\"jenkins pipeline\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/16-1.png 1699w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/16-1-300x147.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/16-1-1024x501.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/16-1-768x376.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/16-1-1536x752.png 1536w\" sizes=\"(max-width: 1699px) 100vw, 1699px\" \/><\/p>\n<p>In build triggers, select &gt;&gt; <strong>github hook trigger<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/17-1.png\" alt=\"Jenkins\" width=\"1702\" height=\"871\" class=\"aligncenter wp-image-3671 size-full\" title=\"Github hook trigger\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/17-1.png 1702w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/17-1-300x154.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/17-1-1024x524.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/17-1-768x393.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/17-1-1536x786.png 1536w\" sizes=\"(max-width: 1702px) 100vw, 1702px\" \/><\/p>\n<p>In definition, choose &gt;&gt; <strong>pipeline script for SCM<\/strong>, In SCM choose &gt;&gt; <strong>git<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/18-1.png\" alt=\"jenkins\" width=\"1693\" height=\"894\" class=\"aligncenter wp-image-3691 size-full\" title=\"SCM\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/18-1.png 1693w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/18-1-300x158.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/18-1-1024x541.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/18-1-768x406.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/18-1-1536x811.png 1536w\" sizes=\"(max-width: 1693px) 100vw, 1693px\" \/><\/p>\n<p>Add the github project repository url again, In credentials, click &gt;&gt;<strong> add<\/strong> , choose &gt;&gt;<strong> Jenkins<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/19.png\" alt=\"Jenkins\" width=\"1693\" height=\"888\" class=\"aligncenter wp-image-3692 size-full\" title=\"jenkins credentials\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/19.png 1693w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/19-300x157.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/19-1024x537.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/19-768x403.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/19-1536x806.png 1536w\" sizes=\"(max-width: 1693px) 100vw, 1693px\" \/><\/p>\n<p>Choose &gt;&gt; <strong>AWS credentials<\/strong> (if it is not shown go to Jenkins main page, click manage jenkins, click plugin, and install AWS credentials plugin)<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/20.png\" alt=\"Jenkins\" width=\"1687\" height=\"859\" class=\"alignnone wp-image-3693 size-full\" title=\"aws credentials\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/20.png 1687w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/20-300x153.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/20-1024x521.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/20-768x391.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/20-1536x782.png 1536w\" sizes=\"(max-width: 1687px) 100vw, 1687px\" \/><\/p>\n<p>Add access key and secret key of the user that we created in the first step, and click &gt;&gt; <strong>add<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/21.png\" alt=\"Jenkins\" width=\"1725\" height=\"907\" class=\"aligncenter wp-image-3672 size-full\" title=\"aws credentials\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/21.png 1725w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/21-300x158.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/21-1024x538.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/21-768x404.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/21-1536x808.png 1536w\" sizes=\"(max-width: 1725px) 100vw, 1725px\" \/><\/p>\n<p>Click &gt;&gt; <strong>apply<\/strong> and <strong>save<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/22.png\" alt=\"Jenkins\" width=\"1699\" height=\"885\" class=\"aligncenter wp-image-3673 size-full\" title=\"Jenkins file\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/22.png 1699w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/22-300x156.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/22-1024x533.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/22-768x400.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/22-1536x800.png 1536w\" sizes=\"(max-width: 1699px) 100vw, 1699px\" \/><\/p>\n<p>Now we successfully created a job, go to Jenkins main page, click &gt;&gt; <strong>manage Jenkins<\/strong>, and click &gt;&gt; <strong>credentials<\/strong>, here it will assign a credential id for the aws credentials, copy the credential id<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/23.png\" alt=\"jenkins\" width=\"1672\" height=\"822\" class=\"aligncenter wp-image-3674 size-full\" title=\"jenkins credentials\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/23.png 1672w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/23-300x147.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/23-1024x503.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/23-768x378.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/23-1536x755.png 1536w\" sizes=\"(max-width: 1672px) 100vw, 1672px\" \/><\/p>\n<h1>Setup Github<\/h1>\n<p>Go to github,add the credential id in the jenkins file<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/24.png\" alt=\"Github\" width=\"1698\" height=\"859\" class=\"aligncenter wp-image-3675 size-full\" title=\"jenkins file\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/24.png 1698w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/24-300x152.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/24-1024x518.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/24-768x389.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/24-1536x777.png 1536w\" sizes=\"(max-width: 1698px) 100vw, 1698px\" \/><\/p>\n<p>To reference my Jenkins file, please consult the file<strong> &#8220;jenkinsfile&#8221;<\/strong> located in the root directory of this repository: <a href=\"https:\/\/github.com\/easydeploy-cloud\/jenkins-cicd-reactjs\">https:\/\/github.com\/easydeploy-cloud\/jenkins-cicd-reactjs<\/a><\/p>\n<p>Now add S3 bucket name in the jenkinsfile<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/25.png\" alt=\"Jenkins file\" width=\"1702\" height=\"883\" class=\"aligncenter wp-image-3676 size-full\" title=\"Jenkins file\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/25.png 1702w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/25-300x156.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/25-1024x531.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/25-768x398.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/25-1536x797.png 1536w\" sizes=\"(max-width: 1702px) 100vw, 1702px\" \/><\/p>\n<p>Now go to Jenkins server copy the public ip<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/26.png\" alt=\"Jenkins\" width=\"1684\" height=\"882\" class=\"aligncenter wp-image-3677 size-full\" title=\"Jenkins\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/26.png 1684w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/26-300x157.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/26-1024x536.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/26-768x402.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/26-1536x804.png 1536w\" sizes=\"(max-width: 1684px) 100vw, 1684px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Go to github repository settings, click &gt;&gt; <strong>webhooks<\/strong>, click &gt;&gt; <strong>add webhook<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/27.png\" alt=\"Webhooks\" width=\"1711\" height=\"889\" class=\"aligncenter wp-image-3678 size-full\" title=\"github webhook\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/27.png 1711w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/27-300x156.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/27-1024x532.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/27-768x399.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/27-1536x798.png 1536w\" sizes=\"(max-width: 1711px) 100vw, 1711px\" \/><\/p>\n<p>Now paste the jenkins ip here and type &#8220;<strong>\/github-webhook<\/strong>&#8221; and click &gt;&gt; <strong>save<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/28.png\" alt=\"Webhook\" width=\"1672\" height=\"847\" class=\"aligncenter wp-image-3694 size-full\" title=\"github webhook\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/28.png 1672w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/28-300x152.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/28-1024x519.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/28-768x389.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/28-1536x778.png 1536w\" sizes=\"(max-width: 1672px) 100vw, 1672px\" \/><\/p>\n<h1>Jenkins job<\/h1>\n<p>Go to Jenkins dashboard, click &gt;&gt;<strong> your job<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/29.png\" alt=\"jenkins \" width=\"1657\" height=\"822\" class=\"aligncenter wp-image-3696 size-full\" title=\"jenkins\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/29.png 1657w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/29-300x149.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/29-1024x508.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/29-768x381.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/29-1536x762.png 1536w\" sizes=\"(max-width: 1657px) 100vw, 1657px\" \/><\/p>\n<p>Click &gt;&gt;<strong> build now<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/30.png\" alt=\"jenkins\" width=\"1717\" height=\"895\" class=\"aligncenter wp-image-3698 size-full\" title=\"build jenkins\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/30.png 1717w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/30-300x156.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/30-1024x534.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/30-768x400.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/30-1536x801.png 1536w\" sizes=\"(max-width: 1717px) 100vw, 1717px\" \/><\/p>\n<p>Now our project is successfully buildt and deployed in s3<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/31.png\" alt=\"Build jenkins\" width=\"1345\" height=\"823\" class=\"aligncenter wp-image-3679 size-full\" title=\"Build jenkins\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/31.png 1345w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/31-300x184.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/31-1024x627.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/31-768x470.png 768w\" sizes=\"(max-width: 1345px) 100vw, 1345px\" \/><\/p>\n<h1>Web hosting<\/h1>\n<p>Go to S3 service, choose your bucket, click &gt;&gt; <strong>properties<\/strong>, scroll down, and copy the static web hosting url<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/32.png\" alt=\"Static web hosting\" width=\"1669\" height=\"837\" class=\"aligncenter wp-image-3680 size-full\" title=\"Static web hosting\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/32.png 1669w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/32-300x150.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/32-1024x514.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/32-768x385.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/32-1536x770.png 1536w\" sizes=\"(max-width: 1669px) 100vw, 1669px\" \/><\/p>\n<p>paste it in the new tab<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/33.png\" alt=\"React app\" width=\"1909\" height=\"957\" class=\"aligncenter wp-image-3681 size-full\" title=\"Static web hosting\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/33.png 1909w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/33-300x150.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/33-1024x513.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/33-768x385.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/33-1536x770.png 1536w\" sizes=\"(max-width: 1909px) 100vw, 1909px\" \/><\/p>\n<p>Now our React JS project is successfully built and hosted in the S3 web hosting<\/p>\n<p>Now I am going to change some content to check if\u00a0 the auto trigger is working properly or not<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/34.png\" alt=\"React app\" width=\"1909\" height=\"957\" class=\"aligncenter wp-image-3682 size-full\" title=\"Static web hosting\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/34.png 1909w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/34-300x150.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/34-1024x513.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/34-768x385.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/34-1536x770.png 1536w\" sizes=\"(max-width: 1909px) 100vw, 1909px\" \/><\/p>\n<p>Go to GitHub project repository,i am changing some words on the main page(app.js), click &gt;&gt;<strong> commit changes.<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/35.png\" alt=\"React js\" width=\"1705\" height=\"877\" class=\"aligncenter wp-image-3683 size-full\" title=\"React js\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/35.png 1705w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/35-300x154.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/35-1024x527.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/35-768x395.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/35-1536x790.png 1536w\" sizes=\"(max-width: 1705px) 100vw, 1705px\" \/><\/p>\n<p>The auto trigger is working properly, it successfully built the job and hosted it in the s3<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/36.png\" alt=\"Auto trigger deployment\" width=\"1714\" height=\"849\" class=\"aligncenter wp-image-3684 size-full\" title=\"Auto trigger deployment\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/36.png 1714w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/36-300x149.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/36-1024x507.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/36-768x380.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/36-1536x761.png 1536w\" sizes=\"(max-width: 1714px) 100vw, 1714px\" \/><\/p>\n<p>Go to the react js page, click &gt;&gt; r<strong>efresh button.<\/strong> Now the content has changed<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/37.png\" alt=\"React app\" width=\"1743\" height=\"934\" class=\"aligncenter wp-image-3685 size-full\" title=\"React app\" srcset=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/37.png 1743w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/37-300x161.png 300w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/37-1024x549.png 1024w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/37-768x412.png 768w, https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/37-1536x823.png 1536w\" sizes=\"(max-width: 1743px) 100vw, 1743px\" \/><\/p>\n<p>setting up a Jenkins CI\/CD pipeline to build and deploy a ReactJS app from GitHub to Amazon S3 involves:<\/p>\n<p>Configuring Jenkins with GitHub and AWS credentials.<br \/>\nCreating a Jenkins job to pull code from GitHub.<br \/>\nBuilding the ReactJS app.<br \/>\nDeploying the built files to an S3 bucket.<\/p>\n<p>This automated process ensures efficient, reliable, and consistent deployment of your application, allowing your team to focus on development rather than manual deployments.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction In this article, we are going to cover a Jenkins CI\/CD pipeline to build and deploy a reactjs app from github to amazon s3. Jenkins is an open-source automation server that is widely used for building, testing, and deploying software projects. It provides a platform for implementing Continuous Integration (CI) and Continuous Deployment (CD) [&hellip;]<\/p>\n","protected":false},"author":28,"featured_media":3813,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[2],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Set up Jenkins CI\/CD Pipeline to Build and Deploy a ReactJS App from GitHub to Amazon S3 | easydeploy.io<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Set up Jenkins CI\/CD Pipeline to Build and Deploy a ReactJS App from GitHub to Amazon S3 | easydeploy.io\" \/>\n<meta property=\"og:description\" content=\"Introduction In this article, we are going to cover a Jenkins CI\/CD pipeline to build and deploy a reactjs app from github to amazon s3. Jenkins is an open-source automation server that is widely used for building, testing, and deploying software projects. It provides a platform for implementing Continuous Integration (CI) and Continuous Deployment (CD) [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/\" \/>\n<meta property=\"og:site_name\" content=\"easydeploy.io\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-23T07:27:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-27T05:20:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-23-143703-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1905\" \/>\n\t<meta property=\"og:image:height\" content=\"988\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Suryakumar KR\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Suryakumar KR\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/\"},\"author\":{\"name\":\"Suryakumar KR\",\"@id\":\"https:\/\/www.easydeploy.io\/blog\/#\/schema\/person\/ddca6ab45d6281f710b0a73ec80b1aa2\"},\"headline\":\"How to Set up Jenkins CI\/CD Pipeline to Build and Deploy a ReactJS App from GitHub to Amazon S3\",\"datePublished\":\"2024-05-23T07:27:49+00:00\",\"dateModified\":\"2024-05-27T05:20:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/\"},\"wordCount\":860,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.easydeploy.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-23-143703-1.png\",\"articleSection\":[\"Amazon Web Services\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/\",\"url\":\"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/\",\"name\":\"How to Set up Jenkins CI\/CD Pipeline to Build and Deploy a ReactJS App from GitHub to Amazon S3 | easydeploy.io\",\"isPartOf\":{\"@id\":\"https:\/\/www.easydeploy.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-23-143703-1.png\",\"datePublished\":\"2024-05-23T07:27:49+00:00\",\"dateModified\":\"2024-05-27T05:20:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/#primaryimage\",\"url\":\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-23-143703-1.png\",\"contentUrl\":\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-23-143703-1.png\",\"width\":1905,\"height\":988},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.easydeploy.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Set up Jenkins CI\/CD Pipeline to Build and Deploy a ReactJS App from GitHub to Amazon S3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.easydeploy.io\/blog\/#website\",\"url\":\"https:\/\/www.easydeploy.io\/blog\/\",\"name\":\"easydeploy.io\",\"description\":\"A Cloud Architect Company\",\"publisher\":{\"@id\":\"https:\/\/www.easydeploy.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.easydeploy.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.easydeploy.io\/blog\/#organization\",\"name\":\"EasyDeploy Technologies Pvt Ltd\",\"url\":\"https:\/\/www.easydeploy.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.easydeploy.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2019\/02\/easydeploy.png\",\"contentUrl\":\"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2019\/02\/easydeploy.png\",\"width\":536,\"height\":100,\"caption\":\"EasyDeploy Technologies Pvt Ltd\"},\"image\":{\"@id\":\"https:\/\/www.easydeploy.io\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.easydeploy.io\/blog\/#\/schema\/person\/ddca6ab45d6281f710b0a73ec80b1aa2\",\"name\":\"Suryakumar KR\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.easydeploy.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2951decabd8b3bc440c7b230ae32eef8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2951decabd8b3bc440c7b230ae32eef8?s=96&d=mm&r=g\",\"caption\":\"Suryakumar KR\"},\"sameAs\":[\"https:\/\/easydeploy.io\"],\"url\":\"https:\/\/www.easydeploy.io\/blog\/author\/suryakumar\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Set up Jenkins CI\/CD Pipeline to Build and Deploy a ReactJS App from GitHub to Amazon S3 | easydeploy.io","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/","og_locale":"en_GB","og_type":"article","og_title":"How to Set up Jenkins CI\/CD Pipeline to Build and Deploy a ReactJS App from GitHub to Amazon S3 | easydeploy.io","og_description":"Introduction In this article, we are going to cover a Jenkins CI\/CD pipeline to build and deploy a reactjs app from github to amazon s3. Jenkins is an open-source automation server that is widely used for building, testing, and deploying software projects. It provides a platform for implementing Continuous Integration (CI) and Continuous Deployment (CD) [&hellip;]","og_url":"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/","og_site_name":"easydeploy.io","article_published_time":"2024-05-23T07:27:49+00:00","article_modified_time":"2024-05-27T05:20:36+00:00","og_image":[{"width":1905,"height":988,"url":"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-23-143703-1.png","type":"image\/png"}],"author":"Suryakumar KR","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Suryakumar KR","Estimated reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/#article","isPartOf":{"@id":"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/"},"author":{"name":"Suryakumar KR","@id":"https:\/\/www.easydeploy.io\/blog\/#\/schema\/person\/ddca6ab45d6281f710b0a73ec80b1aa2"},"headline":"How to Set up Jenkins CI\/CD Pipeline to Build and Deploy a ReactJS App from GitHub to Amazon S3","datePublished":"2024-05-23T07:27:49+00:00","dateModified":"2024-05-27T05:20:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/"},"wordCount":860,"commentCount":0,"publisher":{"@id":"https:\/\/www.easydeploy.io\/blog\/#organization"},"image":{"@id":"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-23-143703-1.png","articleSection":["Amazon Web Services"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/","url":"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/","name":"How to Set up Jenkins CI\/CD Pipeline to Build and Deploy a ReactJS App from GitHub to Amazon S3 | easydeploy.io","isPartOf":{"@id":"https:\/\/www.easydeploy.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/#primaryimage"},"image":{"@id":"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-23-143703-1.png","datePublished":"2024-05-23T07:27:49+00:00","dateModified":"2024-05-27T05:20:36+00:00","breadcrumb":{"@id":"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/#primaryimage","url":"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-23-143703-1.png","contentUrl":"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-23-143703-1.png","width":1905,"height":988},{"@type":"BreadcrumbList","@id":"https:\/\/www.easydeploy.io\/blog\/how-to-set-up-jenkins-ci-cd-pipeline-to-build-and-deploy-a-reactjs-app-from-github-to-amazon-s3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.easydeploy.io\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Set up Jenkins CI\/CD Pipeline to Build and Deploy a ReactJS App from GitHub to Amazon S3"}]},{"@type":"WebSite","@id":"https:\/\/www.easydeploy.io\/blog\/#website","url":"https:\/\/www.easydeploy.io\/blog\/","name":"easydeploy.io","description":"A Cloud Architect Company","publisher":{"@id":"https:\/\/www.easydeploy.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.easydeploy.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/www.easydeploy.io\/blog\/#organization","name":"EasyDeploy Technologies Pvt Ltd","url":"https:\/\/www.easydeploy.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.easydeploy.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2019\/02\/easydeploy.png","contentUrl":"https:\/\/www.easydeploy.io\/blog\/wp-content\/uploads\/2019\/02\/easydeploy.png","width":536,"height":100,"caption":"EasyDeploy Technologies Pvt Ltd"},"image":{"@id":"https:\/\/www.easydeploy.io\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.easydeploy.io\/blog\/#\/schema\/person\/ddca6ab45d6281f710b0a73ec80b1aa2","name":"Suryakumar KR","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.easydeploy.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2951decabd8b3bc440c7b230ae32eef8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2951decabd8b3bc440c7b230ae32eef8?s=96&d=mm&r=g","caption":"Suryakumar KR"},"sameAs":["https:\/\/easydeploy.io"],"url":"https:\/\/www.easydeploy.io\/blog\/author\/suryakumar\/"}]}},"_links":{"self":[{"href":"https:\/\/www.easydeploy.io\/blog\/wp-json\/wp\/v2\/posts\/3621"}],"collection":[{"href":"https:\/\/www.easydeploy.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.easydeploy.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.easydeploy.io\/blog\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/www.easydeploy.io\/blog\/wp-json\/wp\/v2\/comments?post=3621"}],"version-history":[{"count":15,"href":"https:\/\/www.easydeploy.io\/blog\/wp-json\/wp\/v2\/posts\/3621\/revisions"}],"predecessor-version":[{"id":3701,"href":"https:\/\/www.easydeploy.io\/blog\/wp-json\/wp\/v2\/posts\/3621\/revisions\/3701"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.easydeploy.io\/blog\/wp-json\/wp\/v2\/media\/3813"}],"wp:attachment":[{"href":"https:\/\/www.easydeploy.io\/blog\/wp-json\/wp\/v2\/media?parent=3621"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.easydeploy.io\/blog\/wp-json\/wp\/v2\/categories?post=3621"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.easydeploy.io\/blog\/wp-json\/wp\/v2\/tags?post=3621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}