Skip to main content

How to Host your JS App on AWS like a BOSS

In this adventure, we configure AWS to host a commercial static website.

The solution offers features required by a commercial application.

The running cost of the solution is close to free in the context of a website with moderate traffic.

The complete solution is suitable for hosting JavaScript applications that rely on client-side routing. For example, applications built with create-react-app, next.js, Docusaurus etc.

Features​

  • Automatically redirect to HTTPS.
  • Full end-to-end encryption.
  • Use your domain name.
  • SSL certificate for your domain.
  • No servers to manage/secure.
  • Scale to massive amounts of traffic.
  • Content Delivery Network (CDN) ensures low latency. Resilient to failure.
  • Host a Single Page Application built with next.js, react, Docusaurus, etc.
  • Affordable running costs.

Implementation: 15 minutes.​

caution

This solution works for me. I expect you to be an Adult. If anything goes wrong, does not work as expected, you lose data, get hacked, or incur any form of damages including a crippling bill it's all your fault, not mine.

Tutorial​

A full video walk-through is up on my channel.

Watch "How To Host Your JS App on AWS" on YouTube.

AWS Services Used​

Below is the list of services used to implement the solution.

loading...

Simple Storage Service (S3)​

Our website content will be stored in S3. S3 is not only a very affordable option for storing massive amounts of data but is also highly resilient and reliable.

Furthermore, S3 affords the ability to encrypt all data at rest.

CloudFront​

CloudFront is Amazon's content delivery network (CDN). We use CloudFront to ensure that our content is served as close to possible to the user for low latency. CloudFront also enables the use of SSL certificates, automatic redirection to HTTPS as well as the ability to run LambdaEdge function to manipulate web requests.

Certificate Manager​

Amazon Certificate manager allows the free creation of SSL certificates for use with amazon services. We use the certificate manager service to secure our HTTPS traffic.

Lambda Edge​

Applications that utilise client-side routing typically rely on some form of URL writing by a web server such as NGINX or Apache. We use lambda edge functions to achieve rewriting URLs for single-page applications.

We will also touch on securing a site using basic authentication using lambda edge.

Route 53 (optional)​

Route53 is Amazon's domain name service. It is the only service in this solution that has a price attached for a low-traffic website.

We use Route53 to prove that we own our domain when issuing our SSL certificate.

We also use Route53 to point our domain to the CloudFront distribution to afford our visitors to use our domain name to find the website.

If you are already using a service to manage DNS then use that service.

You will need to adjust the DNS-related steps to suit your provider.