How to Deploy a React App with Serverless Functions on AWS

Deploying a React application can be a challenging task, especially when you want to incorporate serverless functions for backend processing. AWS (Amazon Web Services) provides an excellent platform for deploying both static sites and serverless functions with its services like AWS Amplify and AWS Lambda. In this article, we will walk you through the process of deploying a React app with serverless functions on AWS, covering key concepts, use cases, and actionable steps.

What is a Serverless Function?

Before diving into the deployment process, let’s clarify what serverless functions are. A serverless function is a piece of code that runs in response to events without the need for server management. AWS Lambda is a popular service that allows you to run code without provisioning or managing servers, making it ideal for microservices, data processing, and API integration.

Use Cases for Serverless Functions

• API Endpoints: Create RESTful APIs for your React app.
• Data Processing: Handle data transformation or processing tasks.
• Event-Driven Applications: Execute functions in response to events like file uploads or database changes.
• Integration with Other Services: Connect your app with third-party APIs seamlessly.

Setting Up Your React App

First, let’s ensure you have a React application ready for deployment. If you don’t have one, you can quickly create a new app using Create React App.

npx create-react-app my-app
cd my-app
npm start

Now that your React app is running locally, we’ll move on to deploying it along with serverless functions.

Step 1: Setting Up AWS Account

1. Sign Up: Create an AWS account at aws.amazon.com.
2. IAM User: Set up an IAM user with permissions for AWS Lambda, S3, and API Gateway.
3. Install AWS CLI: Download and install the AWS Command Line Interface (CLI) to manage your AWS services from the terminal.

pip install awscli

1. Configure AWS CLI: Run the following command and enter your credentials.

aws configure

Step 2: Deploying Your React App to S3

AWS S3 (Simple Storage Service) is a cost-effective solution for hosting static websites. Here’s how to deploy your React app to S3:

1. Build Your React App: Create an optimized production build.

npm run build

1. Create an S3 Bucket: Go to the AWS Management Console and create a new S3 bucket. Ensure the bucket name is unique.

2. Configure Bucket for Static Hosting:

3. Go to the bucket properties.
4. Enable "Static website hosting".

5. Set the index document to index.html.

6. Upload Files: Upload the contents of the build folder to your S3 bucket.

7. Set Permissions: Update the bucket policy to allow public read access.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
    }
  ]
}

Step 3: Creating Serverless Functions with AWS Lambda

Now that your React app is live, let’s add some serverless functionality. We will create a simple API using AWS Lambda.

1. Create a New Lambda Function:
2. Go to the AWS Lambda console and click “Create function”.

3. Choose "Author from scratch", name your function, and select the Node.js runtime.

4. Write Your Function: Here’s a simple example of a Lambda function that returns a greeting:

exports.handler = async (event) => {
    const response = {
        statusCode: 200,
        body: JSON.stringify('Hello from Lambda!'),
    };
    return response;
};

1. Deploy the Function: Click on "Deploy" to save your changes.

2. Set Up API Gateway: To make your function accessible via HTTP:

3. Go to the API Gateway console and create a new API.
4. Choose "REST API" and connect it to your Lambda function.
5. Deploy your API and note the endpoint URL.

Step 4: Connecting Your React App to the Lambda Function

Now that your API is set up, you can connect your React app to the serverless function. Modify your React component to make a fetch request to the API endpoint.

import React, { useEffect, useState } from 'react';

function App() {
    const [message, setMessage] = useState('');

    useEffect(() => {
        fetch('YOUR_API_ENDPOINT')
            .then(response => response.json())
            .then(data => setMessage(data));
    }, []);

    return (
        <div>
            <h1>{message}</h1>
        </div>
    );
}

export default App;

Step 5: Testing Your Application

1. Access Your React App: Open your S3 bucket URL in a browser to view your live React application.
2. Verify the API Call: Ensure that the message from your Lambda function is displayed correctly.

Troubleshooting Common Issues

• CORS Errors: If you encounter CORS issues, you may need to configure the API Gateway to allow requests from your S3 bucket's URL.
• Permissions: Ensure your Lambda function has the necessary permissions to be invoked by API Gateway.

Conclusion

Deploying a React app with serverless functions on AWS is a powerful way to create scalable and efficient applications. By leveraging AWS S3 for static hosting and AWS Lambda for serverless computing, you can build a full-stack application without worrying about server management. With the steps outlined in this article, you should be well-equipped to deploy your own applications using these technologies.

By taking advantage of serverless architecture, you can focus on building features and improving user experience rather than managing infrastructure—allowing for greater agility and innovation in your development workflow. Happy coding!