There is a lot of content available on the internet around building applications and services using Cloud Native technologies leveraging Containers and Serverless for backend applications using microservices and event-driven architectures etc.

But for the front end especially single page application , there is information available on how to build applications leveraging the features available in Cloud. However, the information available is spread out throughout the web. In this blog post, I have collated all the information available on the web on the various patterns or strategies that are available to host a front end single page application in AWS.

Some of the consideration while choosing the solution for hosting the front application in AWS are :

1. Serverless - Pay As You Go model vs Fixed cost
2. SEO Optimization
3. Cloud Front CDN distribution for low latency to end-users
4. Overhead of maintenance of servers for the patch, fixes, expertise to run infrastructure etc
5. Additional plumbing that is required to set up infrastructure, logs, monitoring etc
6. Scalability and Performance - Autoscaling
7. Redundancy - Availability across multi availability zones, CDN etc
8. Limited flexibility vs ease of setup/ use
9. Vendor Lock-In while choosing AWS specific products or services
10. Developer Workflow and Tooling experience for local development, testing, team maturity on Cloud etc

There is no single right answer here. Depending on the context, use-case and maturity of the team and the technology,a suitable solution can be chosen.

1.Hosting application the good old way: EC2

This is a straight forward approach, in the way how we set up our development environment. But again this is not easy and simple. Deploy the front-end application in the EC2 instance and make it accessible via the EC2’s public I/P address.

To scale this setup, add a load balancer and have multiple EC2’s that can help to scale the application. This is where Elastic Bean Stalk can help.

References:

1.Deploy React Application to AWS EC2 with PM2 and Nginx

https://faun.pub/deploy-react-application-to-aws-ec2-using-pm2-and-nginx-7a051fd6ea06

2.Setting up a React Web Application on AWS — On an EC2 Instance

https://medium.com/pulseque/setting-up-a-react-web-application-on-aws-on-an-ec2-instance-69bccc0f5145

3.Deploy Angular App on AWS EC2 instance

https://medium.com/@sandeeptengale/deploy-angular-app-on-aws-ec2-instance-20749f17b33e

For more advanced scenarios, a combination of EC2, Load Balancer with Auto Scaling can be used.

Pros :

• This follows the lift and shift model from the data centre world before the cloud.
• Easy to port applications that are running in a data centre with minimal to no-changes

Cons :

• Not Cloud Native approach
• Complex to setup
• Scaling and Performance challenge
• Redundancy not factored here
• Billing based on the running cost of EC2. No pay per use pricing

2. Using AWS Elastic Bean Stalk

Elastic Beanstalk reduces management complexity without restricting choice or control. One can simply upload an application, and Elastic Beanstalk automatically handles the details of capacity provisioning, load balancing, scaling, and application health monitoring.

References:

1.AWS — Deploying Angular With NodeJS App On Elastic Beanstalk

https://medium.com/bb-tutorials-and-thoughts/aws-deploying-angular-with-nodejs-app-on-elastic-beanstalk-6857e2fc8367

2.How to deploy an Express application with React front-end on AWS Elastic Beanstalk

https://medium.com/@wlto/how-to-deploy-an-express-application-with-react-front-end-on-aws-elastic-beanstalk-880ff7245008

3.How to deploy a static website to Elastic Beanstalk for the Enterprise

https://github.com/mwittenbols/How-to-deploy-a-static-website-to-Elastic-BeanStalk-for-the-Enterprise

Pros :

• Server management and scaling requirements are taken care of by AWS
• Load Balancer and related necessary components are provisioned by default

Cons :

• Not Cloud Native approach
• Billing based on the running cost of Load Balancer and EC2 irrespective of whether the app is used or not. No pay per use pricing

3. Using AWS S3 to host a static website

Deploy the front end application as Static Website in the S3 bucket and expose the S3 bucket as a static website

References:

1.How to Deploy Your Frontend Application on AWS S3

https://dev.to/oyetoket/how-to-deploy-your-frontend-application-on-aws-s3-31m9

2.How To Deploy Your React App to AWS S3

https://andela.com/insights/how-to-deploy-your-react-app-to-aws-s3/

Pros :

• Serverless
• Pay as you go
• Static website
• Easy to manage, low maintenance

Cons :

• Error handling and routing needs to be thought through
• Not optimized for SEO

4. Using Combination of AWS S3 + Cloud Front

In addition to deploying to S3, attach an AWS Cloud Front for better performance and latency across geographies

References

1.Deploying Static Web Applications using AWS S3, CloudFront and its benefits

https://blogs.halodoc.io/deploy-static-web-application-using-s3-and-cloudfront/

2.Hosting your entire web application using S3 + CloudFront

https://www.sankalpjonna.com/posts/hosting-your-entire-web-application-using-s3-cloudfront

Pros :

• Serverless
• Pay as you go
• Static website
• Easy to manage, low maintenance
• Globally distributed, faster response time
• Caching at CDN

Cons :

• Error handling and routing needs to be thought through
• Not optimized for SEO in general

5. Using the Serverless framework

Deploy the front end application through a combination of S3 /CloudFront via Serverless framework. There are other frameworks too like Stackery etc that can help us to build applications. But Serverless framework is widely used.

References:

1.Serverless Server Side Rendering with Angular on AWS Lambda@Edge

https://dev.to/eelayoubi/serverless-server-side-rendering-with-angular-on-aws-lambda-edge-57g5

2.How to implement Serverless Server-Side Rendering in React

https://reactgo.com/aws-serverless-server-side-rendering-react/

3.Building and deploying next.js in AWS using Serverless for Server-Side Rendering

https://blog.bitsrc.io/why-aws-love-next-js-1f7b6491857

4.A Crash Course on Serverless-Side Rendering With React.js, Next.js, and AWS Lambda

https://dzone.com/articles/a-crash-course-on-serverless-side-rendering-with-r

Pros :

• Serverless
• Pay as you go
• Easy to manage, low maintenance
• Globally distributed, faster response time
• Caching at CDN
• SEO can be optimized during server-side rendering

Cons :

• Vendor Lock-in with AWS
• Community support limited to Serverless. Have to be dependent on plugins and customization roll out by Serverless for any issues or bug fixes
• Not a recognized pattern by AWS

6. Using AWS Amplify

AWS Amplify provides an extremely opinionated way for building and deploying not just front end applications, but the back end stack as well through AWS. It stitches various AWS services to achieve this.

References :

1.The best of both worlds: SSR with isomorphic JavaScript

https://blog.logrocket.com/ssr-with-isomorphic-javascript/

2.Building a location-based, scalable, serverless web app

https://aws.amazon.com/blogs/compute/building-a-location-based-scalable-serverless-web-app-part-3/

3.First steps with AWS Amplify for an Angular application

https://itnext.io/first-steps-with-aws-amplify-for-an-angular-app-31c271ade5a6

4.Build your first full-stack serverless app with Angular and AWS Amplify

https://gerard-sans.medium.com/build-your-first-full-stack-serverless-app-with-angular-and-aws-amplify-d2e4716de9bd

5.How to build an Angular Authentication Application using AWS Amplify

https://medium.com/workfall/how-to-build-an-angular-authentication-application-using-aws-amplify-3cdc6e67cfc2

Pros :

• Serverless
• Pay as you go
• Easy to manage, low maintenance
• Globally distributed, faster response time
• Caching at CDN
• SEO can be optimized during server-side rendering

Cons :

• Vendor Lock-in with AWS
• Highly opinionated, less flexible for advanced use-cases

7. Using Containers via ECS Fargate / EKS

Containers are also another option to deploy Front End applications in AWS. AWS offers different type of container services like ECS Elastic Container Service with Standard and Fargate Verison. It also offers EKS - Elastic Kubernetes Service.

References

1.Steps to Deploy Angular application on Kubernetes

https://blog.mayadata.io/openebs/steps-to-deploy-angular-application-on-kubernetes

2.AWS — Deploying Angular App With NGINX on EKS

https://medium.com/bb-tutorials-and-thoughts/aws-deploying-angular-app-with-nginx-on-eks-c2850ec6309d

3.AWS — Deploying Angular With NodeJS App On ECS

https://medium.com/bb-tutorials-and-thoughts/aws-deploying-angular-with-nodejs-app-on-ecs-2128208017f8

4.Dockerization of Node.JS Applications on Amazon Elastic Containers

https://soshace.com/dockerization-of-node-js-applications-on-amazon-elastic-containers/

5.Deploy Your React App to ECS (Fargate)

https://dev.to/mubbashir10/deploy-your-react-app-to-ecs-fargate-38p9

Pros :

• Open Source, good community support for both Docker and Kubernetes
• Existing developer workflow and tooling can be re-used
• Can seamlessly integrate with CI-CD container pipeline if available already

Cons :

• Initial setup to bootstrap may be required. A lot of plumbing work involved
• Not serverless. Need to pay fixed cost even if no one is using
• Kubernetes is difficult to manage, need dedicated expertise to manage this effectively
• ECS and Fargate is specific to AWS
• Scaling and other configuration/ managing of servers need to be managed

7. Using the JAM Stack

JAM stack is yet another highly opinionated way to build and deploy web applications. AWS Amplify and AWS S3/CloudFront along with AWS Lambda @Edge together can help us to build applications loosely based on the JAM stack.

References

1.Building server-side rendering for React in AWS Lambda

https://aws.amazon.com/blogs/compute/building-server-side-rendering-for-react-in-aws-lambda/

2.Deploying JAMStack Applications Using Amazon S3, CloudFront, and Lambda@Edge

https://pages.awscloud.com/Deploying-JAMStack-Applications-Using-Amazon-S3-CloudFront-and-LambdaEdge_2020_0515-NET_OD.html

Pros :

• Serverless
• Pay as you go
• Easy to manage, low maintenance
• Globally distributed, faster response time
• Caching at CDN
• SEO can be optimized during server-side rendering

Cons :

• Vendor Lock-in with AWS
• Highly opinionated, less flexible for advanced use-cases
• Architecture is comparatively complex

8. Using Micro Front End Pattern

Micro Front End is re-thinking building micro front end apps similar to microservices that is widely adopted for building services in the backend. Micro Front End pattern can help us to build applications rapidly with autonomous teams without stamping on each other’s feet.

References :

1.Micro-frontend Architectures on AWS

https://aws.amazon.com/blogs/architecture/micro-frontend-architectures-on-aws/

2.Micro-frontends with AWS Amplify

https://levelup.gitconnected.com/micro-frontends-with-aws-amplify-50c2e2dc4222

3.Serverless Micro-Frontends with the AWS CDK

https://dev.to/fllstck/serverless-micro-frontends-with-the-aws-cdk-3lf

4.Serverless Micro-frontends using Vue.js, AWS Lambda, and Hypernova

https://medium.com/js-dojo/serverless-micro-frontends-using-vue-js-aws-lambda-and-hypernova-835d6f2b3bc9

Pros :

• Autonomous team can help to build applications faster with micro front ends.
• Quicker turn around time. Engineers can work in small teams and release features quickly.

Cons:

• Architecture is complex
• CI-CD pipeline and other plumbing required to be completely thought through to make this work seamlessly

With the advent of the cloud, there are plenty of choices for building new apps and hosting them on the cloud. Some times it becomes overwhelming to consider all the options and then narrow down the solution that would best work for us. I compiled this post to give a 360-degree view of the various options commonly used for hosting/ deploying a front end app on AWS.

If there are any other patterns missed out here, please let me know.