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?
- 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.
- 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
