Continuous Deployment Pipeline for Your React App using Github Actions and AWS S3

Continuous Deployment Pipeline for Your React App using Github Actions and AWS S3

Today we will see how we can create a continuous deployment pipeline using github actions that will automatically build and deploy our website to aws s3.

For hosting React applications there are many good options . AWS s3 is one of them and its very cheap and reliable too.

Deployment can be a real boring part of your day-to-day job. We should automate as much as possible.

Today we will see how we can create a continuous deployment pipeline using github actions that will automatically build and deploy our website to aws s3.

Pre Requisites

To Follow along with me i assume you already have

  • A github account
  • An AWS account
  • A ReactJS project

Let’s get started . . .

STEP 1 : Create S3 Bucket

  1. Login to AWS console
  2. Search S3 from your services and click Create Bucket
  3. Give appropriate name and select region . Remember the value for your region ( for me it is ap-south-1 )

Image for post

aws s3 console

  • Scroll down and uncheck the block public access . This is not recommended if you are using S3 for other purposes. But if you want to host your static website it’s necessary.

Image for post

aws s3 console

  • Leave other options as it is and click Create Bucket.

programming aws devops react javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

How to Integrate AWS Amplify Authentication For React Native

AWS Amplify is a framework that lets you develop a web or mobile application quickly, by accessing the backend cloud services offered by AWS. In this article, we are going to learn how to use AWS Amplify in React Native by building a fully functional login and registration flow. The Ultimate Guide For Integrate AWS Amplify Authentication For React Native

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

How to use Functional Programming in your React app | React Next

In the past few years, the buzz around functional programming has been growing, but it can be challenging to apply theoretical concepts to everyday work. How can we make the code we work on more functional? What advanced patterns can you use, and why should you do that? And what do React hooks have to do with all this? In this talk we’ll have a look at real-life examples and patterns you can use to make React apps more functional.

How to Extend your DevOps Strategy For Success in the Cloud?

DevOps and Cloud computing are joined at the hip, now that fact is well appreciated by the organizations that engaged in SaaS cloud and developed applications in the Cloud. During the COVID crisis period, most of the organizations have started using cloud computing services and implementing a cloud-first strategy to establish their remote operations. Similarly, the extended DevOps strategy will make the development process more agile with automated test cases.