Serverless Architectures using ReactJS

October 08, 2018

by  Chris Carreck

It's no secret that technology is ever changing. Here at CLD, we are constantly improving and revitalizing our internal and delivery systems. Staying up-to-date with the latest approaches allows our agency to improve speeds, lower costs, reduce maintenance time, reduce points of failure in our applications, and ultimately, deliver a more cost effective, performant system for our clients.

As a part of this re-engineering process, we have recently reviewed the underlying application architecture in our business. We have introduced new technologies like React.JS and Docker to some of our latest projects. These tools have led to a rethinking of traditional architecture like ELB, EC2, and MongoDB that we use on AWS.

Our Front-End Tech

The revitalization project begins with CLD's front-end mechanisms and server set up. Our React front-ends are 100% JavaScript and CSS. The benefits to this approach? JS and CSS do not require any server processing power; all content can be rendered and run directly through the client's browser.

To effectively deliver our front-end content, we make use of AWS's own CDN: CloudFront. CloudFront is a hugely powerful delivery network offering low latency and high speeds at an extremely cost-effective price point. It also has DDoS protection built in so the added security works well with other AWS products.

To create distributions, we utilize Amazon's s3 storage to provide the back-end store for our JS, HTML and CSS files. This suite produced a fully-scalable, globally-distributed website without the requirements of a server or load balancer configurations. Content and front-end JS can now be accessed by customers from edge locations already provided by AWS.

Our Back-End Tech

With the combination of these systems supporting our front-end framework, our sites still need to make calls to APIs to handle domain logic and process and respond to requests.

Our NodeJS back-ends are now "dockerized." On our more recent platforms, we have built the APIs using Typescript and NodeJs, which are both easily configurable to a Docker container. Switching to AWS Fargate allowed us to boost our EC2 configuration to a fully-managed serverless resources that can scale with our apps. we were easily Combine this technology with a hosted MongoDB instance, and we have an end-to-end application relying to manage compute power. This back-end combination eliminates operating system, nginx, and other configurations previously required.

This approach has created a modern, serverless stack that has not only saved on hosting costs but has delivered a performant solution with reliable end results.

Be sure to follow us on Twitter @Cre8iveLicence, and if this kind of stuff interests you, then you'll love working with us).