Home » React.js on AWS Lambda

React.js on AWS Lambda

React js on AWS Lambda is a serverless computing platform that allows developers to build and run applications without provisioning or managing servers. React js on AWS Lambda has many benefits over traditional web hosting solutions. It provides a scalable solution for developers who want to focus on their code instead of managing servers.

 But before that let us clear what is React js and AWS Lambda

What is React JS?

React is a JavaScript library for building user interfaces. It was developed at Facebook in 2011 and open-sourced in 2013. React has been used to build many high-profile web applications, including Instagram, WhatsApp, and Netflix.

React is different from other libraries because it only updates the parts of the page that need to change rather than the whole page each time something changes. This makes it much faster than traditional libraries like jQuery or AngularJS and improves the user experience by reducing load times and improving responsiveness.

What is AWS Lambda?

AWS Lambda is a serverless computing platform that enables developers to run code without provisioning or managing servers. AWS Lambda executes the code in response to events, such as changes in data storage, and then automatically manages the compute resources required by the code.

AWS Lambda is a service that runs code in response to events. It is an event-driven compute service that executes your code only when needed and scales automatically, from a few requests per day to thousands per second.

AWS Lambda can be used for many different purposes, such as:

  • Running code in response to HTTP requests with Amazon API Gateway
  • Processing images with Amazon Rekognition
  • Generating speech transcripts with Amazon Transcribe
  • Collecting data from various sources and writing it to a DynamoDB table
  • Processing data in real time with Kinesis Data Streams

Why we are not creating apps on React App, Next.js, Or Gatsby?

React App, Next.js, and Gatsby are all great frameworks for building a React-based app. But they have their own limitations.

React App is the easiest to use of the three but it doesn’t have any routing or server-side rendering capabilities. Next.js is a framework that can be used with React or with other libraries like Angular or Vue and it has routing and server-side rendering capabilities but it is not as easy to use as React App. Gatsby is a framework that can be used with React, Vue, Angular, or even GraphQL and it also has routing and server-side rendering capabilities but it requires you to use Webpack which can be difficult for beginners to learn how to set up.

What is boilerplate that makes serverless framework?

Boilerplate is a set of code that can be used to create a new project. It includes the basic framework for the project, such as the language, libraries and other dependencies.

Serverless frameworks are a type of boilerplate that can be used to create serverless applications. They are often used in conjunction with other boilerplates like AWS Lambda or Google Cloud Functions.

Creating app

To start, create a new repository by opening up the template in your browser and clicking “use this template.”This new repository can be created using your own codebase and then changes can be made to it and reintegrated.

To access your new repository on your local machine, type the following commands:

npm install

That’s it! I’ll include a copy of the Serverless Framework and everything you’ll need to get started. We will include this app in the next release and it should be ready to go.

But before that we do one thing:

serverless.yml

The serverless.yml file defines the configuration for a serverless application and its associated AWS Lambda functions.

The serverless.yml file is a configuration file for AWS Lambda functions written in NodeJS, Python, Java, C# or Go. It specifies how to deploy your function to AWS Lambda and provides default values for parameters such as memory size and timeout duration.

Start Your Deployment

Let’s deploy our new app to AWS. Make sure you have AWS credentials/configured, so the Serverless Framework can create all necessary resources for you

The boilerplate is set up to be really simple. All you have to do is run a command:

npm sls deploy

This will install the Serverless Framework (sls command-line interface) and instruct it to deploy your local code to a new AWS account in us-east-1 by default.Building and deploying your code generated application takes a couple of seconds. Doing so, may take up to a minute.

{show the output of after deployment}

What Will Happen Now?

  1. Your client-side JavaScript/TypeScript code is converted to a server-side Lambda function, which then pulls data from your API and renders the web page on the server. You don’t need to maintain any servers or underlying infrastructure; AWS handles that for you.
  2. Client-side JavaScript/TypeScript code is transpiled as well, but this time it’s done for more modern web browsers. It’s then copied together with the other static files to an S3 bucket, and served to users from there.

Updating Your Website

Now that our website is up and running, we’ll be making some changes. Open up ./src/browser/App.tsx and start editing the content. For more complex projects, I recommend creating subfolders to help you keep your stuff organized.

The backend code for server-side rendering is located in ./src/server. The only content you might need to customize is the configuration and the HTML template (see below). The rest of the files should be left alone

Shared components are placed in ./src/components by default. You can move them to another location if you prefer, but keep in mind that there is only one component – ConfigContext – for now. The corresponding useConfig hook is used to access the shared configuration options.

Configuration

The frontend (the browser / src/browser) and backend (the server – the src/server) of your website share a common configuration. You might need to edit ./src/server/config.tsx to add your own configuration options, but make sure to not change any of the existing ones.

HTML Template

The boilerplate has some HTML templates that are used to create the layout of your application, and these templates can be changed to suit your needs. You might also want to edit ./src/server/html.tsx

Stylesheet

A default stylesheet is available at ./src/browser/default.css. The boilerplate gives you the choice of which content management system to use and leaves you to enjoy designing at your own pace.

Public Folder

The ./public file of the repository needs to be uploaded to your S3 bucket. It contains the favicon and manifest file.

Fonts & Images

I recommend storing fonts and images in ./src/app. With a little bit of JavaScript, you can load your new icon sets and embed them directly in your website:

State Management

Lets not think about boilerplate code. Fundamentally, it has no dependencies on anything, so there’s nothing you need to do.

Running Locally

Feed your website before you get too far into making changes. Start the server locally using the following command:

npm start

Testing

Test server and assets will be served at http://localhost:3000/. One critical aspect of having production-ready websites is the ability to test them properly.The boilerplate comes preconfigured with Jest, an industry-standard for writing tests for JavaScript

Related Blogs

  • June 23, 2022

    React.js on AWS Lambda

    React js on AWS Lambda is a serverless computing platform that allows developers to build and run applications without provisioning or managing servers. Re ....

  • January 31, 2022

    Future of TypeScript

    TypeScript is a superset of JavaScript. In other words, TypeScript is a typed superset of JavaScript. It is a programming language that compiles to JavaScr ....

  • tailwind
    March 1, 2022

    What is Tailwind CSS and how to use it?

    Tailwind CSS is an open-source, responsive utility framework for rapidly developing websites. Tailwind was first released in 2015 by Adam Denning, the crea ....