Seamless CI/CD with AWS: Deploy React Apps using Elastic Beanstalk

Hey everyone! Are you ready to embark on an incredible journey? In this blog, we're going to unlock the full potential of AWS and discover how to effortlessly deploy your React apps using Elastic Beanstalk and CodePipeline. Get ready to witness the magic of Continuous Integration and Deployment in action!

I have been holding myself for a long time and yeah now I am starting with my series of blogs. This is my first blog and we will be doing some cool stuff here.
Without any ado let's start!

Picture this: hosting your React app on AWS without spending a single penny (yes, you heard it right!). And not only that, I'll guide you through the entire process, step by step. So, buckle up and let's dive in!

But wait, there's more! I've got some insider tips, troubleshooting advice, and mind-blowing resources to ensure your journey is nothing short of spectacular.

By the time you reach the end of this blog, you'll have your very own CI/CD pipeline in place, launching your React app into the AWS cloud like a shooting star. Get ready to impress the world with your software delivery skills!

But first, let's quickly check what we need to get started:

Your brilliant React app (of course!)
An AWS user account (don't worry, I've got you covered with the free-tier services)
Your trusty laptop and a reliable internet connection

Breaking it into steps to get you a clear understanding:

Step 1:Create a GitHub Repository for Your React App

We'll start by setting up a repository on GitHub to house your app's code. Get ready to take your first leap into the world of version control!

Create a repository in Git Hub. Here we will have our reactJs app code.

Push the source code to this new repository using git commands.If you don't have any app create one using

npx create-react-app

for the time being later, you can modify it accordingly.

Now we have our source ready, let's move toward the main stuff!

Step 2:Unleash the Power of AWS - Set Up Your User Account

Create a new AWS account by following the below link, chill you are eligible for using free-tier services for a year! What else do you need in life?

https://portal.aws.amazon.com/billing/signup#/start/email

Don’t be scared to provide your credit/debit card details, it's not gonna cost you. It only costs 2rs for verifying your account and don't worry you get your 2rs back in your pocket soon after successful verification!

Step 3:Enter the AWS Console and Open the Door to Elastic Beanstalk

Welcome to Elastic Beanstalk, the gateway to hosting your app on AWS. I'll show you how to configure your application and environment like a pro.

Head to the “Create application” button.

Step4:Configure & Customize Elastic Beanstalk for Your Unique App

Get ready to put your personal touch on Elastic Beanstalk. Let's walk through the recommended settings, ensuring your app shines brighter than ever before.

Recommended Configs:-

1] Configure environment

Environment tier - Web server environment

Application name - Aws-CICD or any name you choose

Platform - Node js

Platform branch - nodejs. 16 or suitable to your local node version

Platform version - default

Application code: Sample application [later we will be connecting our git repository]

Configuration presets - Single instance (free tier eligible)

2] Configure service access

Service role: Create and use a new service role

This is an important step and most of the errors arise here. Please make sure you select the service role which has the necessary policies if you are electing an existing role.

One more thing if you want to access your ec2 instances then you must specify the key and service role for ec2. But for now, we have selected Create and Use new service role and we are not interested in manually configuring the ec2 instances later thus we will leave the key and instance role blank.

Leave everything else to default and click skip to preview

Click submit and let Beanstalk configure your environment for the application. It might take a few minutes. Once your configuration is done you see this window with health “ok” you are good to go!

Step 5:Unveil the Perfect CI/CD Pipeline with CodePipeline

The climax of our journey! Brace yourself as we introduce CodePipeline, the superhero of Continuous Integration and Deployment. Witness the seamless flow of your code from GitHub to Elastic Beanstalk.

Now let's jump over to the codePipeline from the navigation pane and create a pipeline to trigger our source code and deploy it to the Beanstalk environment.

Click on the Create pipeline and we will now configure our pipeline, sounds cool.

Choose pipeline settings

Pipeline name: Aws-CICD or any name you choose
Service role: new service role

Add source stage

Source provider:Github(version 1)
Connect your GitHub account by granting access.
Now select the repository, remember we created it initially now its time has come.

Add build stage

We are not going to have a build stage as elastic Beanstalk is going to handle the build config. Thus skip the build stage and proceed to the next stage.

Add deploy stage

Select AWS elastic beanStalk as the deploy provider and keep the default region. Choose the application name which we had configured earlier in Beanstalk and the respective environment name for the same application.

Review

At last review your changes and configurations and hit the create pipeline button at the bottom. As soon as you click the button you will be redirected to the pipeline interface which will resemble something like this.

Notice that the Source has started its work and fetches the source code from the GitHub repository specified. After the successful pull, it stages the source bundle in an S3 bucket from where the elastic beanstalk initializes its work of deployment. It's all automated as a beginner you don't need to worry about the things happening in the background.

You can verify the deployment by going to the domain provided by the elastic Beanstalk.
It should resemble something like this:
http://aws-cicd-env.eba-aetjufjr.eu-north-1.elasticbeanstalk.com/

It's the demo project that I used. The cloud holds infinite potential, waiting for your innovative ideas to take flight. Embrace the power of AWS, adapt and evolve your CI/CD

practices, and prepare to amaze the world with your seamless application delivery.

So, what are you waiting for? It's time to soar to new heights, armed with the knowledge and tools you've gained. Start building, iterating, and transforming your ideas into reality. Unleash your potential, embrace the cloud, and let your creativity shine!

See you in the cloud! :)

CI/CD Pipeline with AWS Elastic Beanstalk and CodePipeline: Hosting Your React App on AWS for Free

Table of contents