Forem: Ninu Varghese

Switching from AWS to Azure: A Comparative Analysis for Web Application Development

Ninu Varghese — Wed, 14 Feb 2024 00:37:09 +0000

As someone who has experience with AWS and has recently switched to Azure, you might be interested in a detailed comparison of these two leading cloud service providers. This article will discuss the differences, pros, and cons of building web applications with AWS and Azure. We’ll cover topics such as hosting Single Page Applications (SPAs), using MongoDB, Relational Database Services (RDS), EC2 instances, database scaling, customizing blue-green deployments, rollback features, and more.

Hosting Single Page Applications (SPAs)

Both AWS and Azure provide robust solutions for hosting SPAs, catering to the needs of modern web applications. AWS offers Amazon S3 coupled with Amazon CloudFront for efficient content delivery and scalability. Azure, on the other hand, provides Azure Blob Storage and Azure CDN for hosting and delivering static content with high availability and performance. While both platforms excel in this regard, Azure’s integration with other Microsoft services may provide added convenience for organizations already leveraging Microsoft technologies.

Database Management: MongoDB and RDS

In terms of database management, AWS boasts Amazon RDS (Relational Database Service), which supports a variety of database engines including MySQL, PostgreSQL, and MariaDB. Additionally, AWS offers Amazon DocumentDB for MongoDB compatibility, providing a fully managed, scalable, and highly available MongoDB-compatible database service. Azure, meanwhile, provides Azure Cosmos DB, a globally distributed, multi-model database service ideal for building planet-scale applications. While both platforms offer robust solutions for database management, the choice may depend on specific requirements such as scalability, consistency, and global distribution.

EC2 Instances and Compute Resources

AWS Elastic Compute Cloud (EC2) is a fundamental component for deploying and managing virtual servers in the cloud, offering unparalleled flexibility and control over compute resources. Azure Virtual Machines (VMs) serve a similar purpose, providing scalable compute capacity on-demand. While both platforms offer comparable functionalities, Azure’s integration with other Azure services and Microsoft technologies may offer added convenience for organizations invested in the Microsoft ecosystem.

Database Scaling and Performance

Scaling databases to accommodate growing workloads is a critical aspect of building web applications. AWS and Azure provide scalable database solutions such as Amazon Aurora and Azure SQL Database, offering automated scaling, high availability, and performance optimizations. The choice between AWS and Azure for database scaling may depend on factors such as existing infrastructure, budgetary considerations, and specific performance requirements.

Deployment Strategies: Blue-Green Deployment and Rollback

Both AWS and Azure offer robust deployment strategies, including blue-green deployment and rollback capabilities. AWS CodeDeploy facilitates blue-green deployments, allowing seamless transitions between different versions of an application with minimal downtime. Azure DevOps provides similar capabilities with Azure Deployment Slots, enabling blue-green deployments and easy rollback options. While both platforms offer comprehensive deployment strategies, the choice may hinge on factors such as integration with existing workflows and familiarity with the respective toolsets.

Deploying Frameworks without DevOps Support

Both AWS and Azure provide services to deploy frameworks like Laravel, Django, etc., without requiring extensive DevOps support. AWS Elastic Beanstalk and Azure App Service are designed to simplify the deployment and scaling of web applications developed with popular frameworks.

Setting Up Code Pipeline

Both AWS and Azure offer robust solutions for setting up a CI/CD pipeline. AWS CodePipeline is a fully managed continuous delivery service that helps automate the release pipelines for fast and reliable application updates2. Similarly, Azure Pipelines provide cloud-hosted pipelines for fast CI/CD that work with any language, platform, and cloud2.

Ease of Use for Beginners

When it comes to ease of use for beginners, both AWS and Azure offer intuitive interfaces and extensive documentation to facilitate the learning process. However, beginners may find Azure’s interface more familiar and accessible if they have prior experience with Microsoft technologies such as Windows Server and Visual Studio. Additionally, Azure’s integrated development environment (IDE) and seamless integration with tools like Visual Studio Code may offer a smoother onboarding experience for newcomers.

Differences in Services and Offerings

One of the first things I noticed when transitioning from AWS to Azure was the differences in services and offerings. While both platforms provide core infrastructure services such as computing, storage, and networking, they often implement these services in slightly different ways. For example, AWS has EC2 instances for computing, S3 for storage, and VPC for networking, while Azure offers VMs, Blob Storage, and Virtual Networks, respectively.

Furthermore, each platform has its ecosystem of additional services tailored to specific use cases. AWS provides services like AWS Lambda for serverless computing, Amazon RDS for managed databases, and Amazon ECS for container orchestration. On the other hand, Azure offers Azure Functions, Azure SQL Database, and Azure Kubernetes Service (AKS) for similar functionalities.

Pros and Cons of AWS

As someone familiar with AWS, I appreciated its mature ecosystem and extensive documentation. AWS has been in the game longer than Azure and has a vast array of services, many of which are battle-tested and widely adopted. The AWS Management Console is intuitive, and the platform offers robust security features and compliance certifications.

However, AWS can be overwhelming for beginners due to its complexity and myriad of options. Pricing can also be a concern, as costs can quickly add up, especially if you’re not careful with resource provisioning and utilization. Additionally, some users have criticized AWS for its customer support, citing instances of slow response times and difficulty in resolving issues.

Pros and Cons of Azure

Upon switching to Azure, I found its integration with Microsoft’s development tools and services to be a significant advantage. As someone who frequently uses Visual Studio and other Microsoft products, Azure seamlessly integrates with these tools, providing a cohesive development experience. Azure also boasts strong support for Windows-based workloads, making it an attractive choice for enterprises with existing Microsoft investments.

Moreover, Azure’s pricing model, particularly for virtual machines, can be more straightforward and cost-effective compared to AWS. Azure’s pay-as-you-go model and reserved instances offer flexibility and potential savings for businesses of all sizes. Additionally, Azure’s global presence is impressive, with data centers strategically located around the world.

However, Azure may lack the depth and breadth of services compared to AWS in certain areas. While Azure has made significant strides in expanding its service offerings, some users may find that certain niche or specialized services are more mature on AWS. Additionally, Azure’s documentation and learning resources may not be as extensive as AWS’s, which could pose challenges for newcomers to the platform.

Conclusion

Both AWS and Azure offer a broad range of services and can meet the needs of different types of applications. Your choice between AWS and Azure would depend on your specific requirements, the architecture of your web application, and your personal preference. It’s always a good idea to explore both platforms and choose the one that best fits your needs.

Build and Share React UI Components between Projects using Material UI and Storybook Part-1

Ninu Varghese — Wed, 14 Feb 2024 00:34:49 +0000

Recently, I started using React Storybook for a React app that I've been building. In this post, I'll share my learning on component sharing using storybook and hopefully will encourage you to consider using Storybook in your next react project.
Storybook in a nutshell
Storybook is an open source tool for building UI components and pages in isolation. You will be able to develop your UI components in isolation without needing to start up a complex dev stack.
Why Material UI?
Material-UI is a React component library based on Google Material Design, which allows for faster and easier stylized web development. It has a simple and customizable component library to build faster, beautiful, and more accessible React applications.
Why component sharing?
For example if you have 3 react applications using same components like cards, button, menu bar etc. How do you share the components? Please don't copy and paste . Issues you may face when you copy and paste; What if the number of react apps grow from 3 to 7? Copy and pasting component code with all the dependancies will be error prone. What if a component needs an update? So, I strong recommend not to copy and paste.

We'll solve thisLet's get started by creating a React application
Assuming you've node installed. Let's create a React application using create-react-app.
npx create-react-app storybook
npx it's a package runner tool that comes with npm 5.2+. The above command will download the latest version of create-react-app and its dependancies and set up a new React application called storybook.
Setup storybook
Let's go to the newly created folder storybook
cd storybook
initialize storybook using the following command
npx -p @storybook/cli sb init
Once the setup is done, you should be able to start the storybook using the command
yarn storybook or npm run storybook
Now, that you've storybook ready, let's add material ui package.
npm i @material-ui/core
Now, let's create the card component in Storybook. Under src/components/Card create a Card.js

Now that you've created the card component, let's create the story under src/stories/Card create Card.stories.js

Now, this is how your card story would look like
Card storyNow, that you've learned how to create a component within storybook and write stories. In the next tutorial, you're going to learn on how to import these components into a separate react app so that we write the components once and could be reused anywhere.
Please stay tuned!!!

Create CI/CD Pipeline using GitHub Actions and AWS

Ninu Varghese — Sun, 30 Oct 2022 19:08:32 +0000

This tutorial assumes you are familiar with git commands, npm , AWS and you have a working web app that is ready to be deployed. The goal of setting up the CI/CD pipeline is to deploy your Web app to AWS S3 every-time a commit is made to the master branch.

Understanding CI/CD

CI/CD comprises series of steps that are going to be executed automatically every single time we make a change to the code and then push those changes up to GitHub.

The goal of CI/ CD is to make sure that any time we make changes to the code, we have some process that is going to automatically run the CI build of the package and then automatically attempt to deploy that change off to our infrastructure. To implement CI/CD pipeline, we’re going to be making use of something called GitHub actions

What are GitHub actions?

GitHub actions are essentially small bits of code that you can automatically execute whenever some event occurs to your repository.

For example, you can configure code to automatically run any time that you commit some code on your machine and then push it up to GitHub. To be more precise in the following scenarios:

Any time a pull/merge request is created or closed,
Anytime code gets merged into your primary branch,
On some set schedule, for example setup a build to run every day at 9AM.
Any time an issue is created or closed.
There are many different events you can watch for. So, any time one of these different events occurs to our GitHub repository, we can choose to run a set of workflows.

In this article, We are going to trigger an action whenever a change happens to our folder of our master/main (your primary branch).

While creating a workflow for you project , there are a series of different commands that are going to be executed on a virtual machine, this virtual machine is automatically created, destroyed, cleaned up, all that kind of actions will be executed by GitHub automatically.

Configuring a workflow

There are two ways to create workflows in GitHub,

First method is by accessing your GitHub repo’s action tab and click on the link set up a workflow yourself

Second method is by creating a YML file as part of your code repo. I’m taking the second approach here. Workflows can be created inside your the .github/workflows directory by adding a .yml workflow file. For example, add .github/workflows/container.yml to your project.

A typical workflow file should contain:

Name: The name of your workflow

On: The on keyword defines the Github events that trigger the workflow. For example push events on master/main branch. You can also specify paths

Jobs: A workflow run is made up of one or more jobs. Jobs define the functionality that will be run in the workflow and run in parallel by default.

Env: Env defines a map of environment variables that are available to all jobs and steps in the workflow.

Runs-on: The runs-on define the Operating System your workflow should run on.

Steps: Steps represent a sequence of tasks that will be executed as part of the job.

For more information on how to setup workflow, please follow this article. Sample of my workflow(container.yml) looks like this:

gist.githubusercontent.com

AWS Configuration

Now, that we got our workflow partially ready, let’s focus on how to get the stuffs ready at the AWS side. First you need to have an AWS account, once its ready and the navigate to AWS management console. Select the S3 service. To upload your data to Amazon S3, you must first create an Amazon S3 bucket in one of the AWS Regions. If you are new to AWS ,please follow this article on how to create an S3 bucket.

Create a bucket policy

1.In AWS Management Console and open the Amazon S3 console at https://console.aws.amazon.com/s3/.

2.Choose the name of the bucket that you’ve just created.

3.Choose Permissions > Edit Bucket Policy.

4.Copy the bucket ARN as shown below

Choose Policy generator to open the AWS Policy Generator in a new window.
On the policy generator page, select S3 Bucket Policy from the Select Type of Policy menu. Add the statements as per the example below

Add the copied ARN value to the field Amazon Resource Name in the following format:

<arn>/*
Click on the button Add statement and upon success, generate policy by clicking Generate Policy button.

Copy the generated policy text, and return to the Edit bucket policy page in the Amazon S3 console.
Under Bucket policy, choose Edit.
In the Policy text field, type or copy and paste a new bucket policy, and click save changes

Creating an IAM user

In the AWS management console select the service IAM, Select Users and Add User. I found this great tutorial which walks you through creating an IAM user for uploading to S3 bucket. Once, you successfully create the user You should see something similar to this.

Please do not close this window where, the Access key and secret access are displayed . The secret key is only going to be displayed one time. So, we need to make sure that we make use of these keys right away. Otherwise, we’ll have to regenerate the set of credentials. (We’re going to use these keys in the GitHub repository settings).

Here we’re going to create three different secrets: our access key, the secret key and the bucket name. They are essentially key value pairs and eventually refer to these inside of our action config code. Let’s open the GitHub repository in a new tab and go to settings->Secrets >New repository secret. Enter the name (please make sure you follow the below naming convention)and value as below and hit Add secret. You need to repeat this for the Access key, Secret key and bucket name

AWS_ACCESS_KEY_ID :<YOUR-AWS_ACCESS_KEY_ID> AWS_SECRET_ACCESS_KEY: <YOUR-AWS_SECRET_ACCESS_KEY> AWS_S3_BUCKET_NAME: <YOUR-AWS_S3_BUCKET_NAME>

Example of adding secret

Now, that you have our keys in GitHub. Its time to modify your container.yml. We need to add the following under the env(environment) section
env: AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET_NAME }} AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} AWS_REGION: "<YOUR-REGION>" # optional: defaults to us-east-1 SOURCE_DIR: "build" # optional: defaults to entire repository

Now, with the new addition the container.yml should look like below

gist.githubusercontent.com

Once, you have the container.yml ready, please go ahead and commit the changes and push it upstream to the master branch (or the branch you’ve specified in your workflow). Once the code is push to master, you should be seeing your build running under the Actions tab

CI Build in Progress

Once the build pass, you should be able to see the success message as below

To verify that your build worked go to Amazon S3 console and choose the bucket you’ve created earlier, and you should be able to see compiled contents inside

Conclusion

In this article you’ve learned on how to create a CI/CD pipeline to deploy a web app using GitHub actions. I hope you enjoyed this article! Please let me know if you have any feedback on how I can improve . Thanks and Cheers!

Multiple environments in Create React App

Ninu Varghese — Wed, 02 Jun 2021 17:38:17 +0000

In this article we are going to learn how to configure multiple environments in a single React application. For example, you might want your dev environment connected to your dev API Endpoint, QA to QA endpoint and production to a production endpoint. We could solve this by using a single .env file but, each time you push your code to specific environments you need to remember to change the endpoint values, which is a slight headache and can be error prone. Let’s see how we can solve this!

First, get the package env-cmd from npm by running
npm install — save-dev env-cmd

Next, create your environment specific .env files. In this example, I’ve created a folder named “environments” in my root directory (same level as package.json). Important the environment variables MUST start with REACT_APP_ . Read more here.
Then, I’ve my .dev.env , .qa.env and .prod.env created inside environments folder.

REACT_APP_API_END_POINT==http://my-dev-url.com //.dev.env REACT_APP_API_END_POINT==http://my-qa-url.com //.qa.env REACT_APP_API_END_POINT==http://my-prod-url.com //.prod.env
Please note .dev.env, .qa.env and .prod.env are three separate files in the environments folder. See below

Next, update the package.json . Update the scripts portion of your package.json to include the following:

“scripts”: { “start”: “react-scripts start”, “build”: “react-scripts build”, “test”: “react-scripts test”, “eject”: “react-scripts eject”, “start:dev”: “env-cmd -f ./environments/.dev.env react-scripts start”, “build:dev”: “env-cmd -f ./environments/.dev.env npm run-script build”, “start:qa”: “env-cmd -f ./environments/.qa.env react-scripts start”, “build:qa”: “env-cmd -f ./environments/.qa.env npm run-script build”, “start:prod”: “env-cmd -f ./environments/.prod.env react-scripts start”, “build:prod”: “env-cmd -f ./environments/.prod.env npm run-script build” },

Next start your local/dev react application by running

npm run start:dev

You can test your env variable in your app by doing the following

console.log(process.env.REACT_APP_API_END_POINT);

For QA and Production build replace the command npm run build to the newly added environment specific command npm run build:qa or npm run build:prod respectively. (For example, if you are on AWS, edit the buildspec on Codebuild and replace npm run build with npm run build:qa or npm run build:prod)
Always use your judgement skills, and remember not add any sensitive information in those files.
And that’s it. We’ve learned how to create multiple environments in a react application using Create React App.

I hope this article was helpful. Thanks and Cheers!