Buttercups logo
·10 min read

Step-by-Step Guide to Using AWS S3 with React Apps

In today’s web development landscape, integrating scalable storage for your files isn’t just a luxury—it’s often a necessity. Amazon Web Services, and specifically Amazon S3, stands out for its robustness and flexibility. If you’re building modern applications, knowing how to use AWS S3 with React apps will give you an edge. In this comprehensive step-by-step guide, you'll learn how to seamlessly add S3 file storage to your front-end projects, ensuring you deliver lightning-fast resources and a polished user experience.

Why Choose AWS S3 for Your React Projects?

Before diving into the technical steps, let’s clarify why coupling AWS S3 with React apps is such a powerful combination. AWS S3 offers virtually unlimited storage, high durability, fine-grained security controls, and a global distribution network through AWS’s CDN, CloudFront. These features make it the perfect backend storage solution for React applications that require secure file uploads, downloads, or static asset hosting.

Whether you’re working on an image-heavy platform, a content management dashboard, or a video sharing site, this guide will help you leverage AWS S3 with React effectively and securely.

Prerequisites to Get Started

To ensure a smooth journey through this guide, make sure you have the following:

  • A basic understanding of React and JavaScript/TypeScript.
  • An active AWS account.
  • Node.js and npm installed on your development machine.
  • Familiarity with core cloud concepts (IAM users, permissions).
  • The AWS CLI set up on your local machine (optional but helpful).

With these in place, you’re ready to integrate AWS S3 with your React app.

Step 1: Setting Up your AWS S3 Bucket

Begin by creating an S3 bucket that will serve as your file storage. Here’s how:

  1. Log Into AWS Console: Head to the AWS Management Console and sign in.
  2. Navigate to S3: Search for S3 in the search bar and open the service dashboard.
  3. Create a New Bucket: Click “Create bucket.” Give it a unique name as S3 bucket names are globally unique.
  4. Choose AWS Region: Select a region close to your users for reduced latency.
  5. Configure Options: Default settings will suffice for most applications, but enable versioning and set up tags if needed.
  6. Configure Permissions: For most React apps, leave public access blocked. You'll manage file-level permissions via AWS IAM.
  7. Create the Bucket: Review your settings and click “Create bucket.”

Step 2: Setting Up IAM Permissions for Secure Access

It’s critical to ensure users only have access to what they need. This is especially important when linking AWS S3 with React apps to prevent unwanted exposure.

  1. Create a New IAM User: In IAM, create a user specifically for your React app’s S3 interactions.

  2. Attach a Custom Policy: Assign a policy to this user that provides limited access to your bucket, such as s3:GetObject, s3:PutObject, and s3:DeleteObject for your specific bucket. Here’s a sample policy:

    {
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "s3:PutObject",
        "s3:GetObject",
        "s3:DeleteObject"
      ],
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}

  3. Save Access Keys: Download or securely store the access key ID and secret access key for this user. You’ll use these in your application setup.

Step 3: Installing Required NPM Packages

For integrating AWS S3 with React apps, the AWS SDK provides the foundational tools. However, for browser-based apps, @aws-sdk/client-s3 (the modular v3 SDK) is the new best practice.

Install the AWS packages and a file upload utility:

npm install @aws-sdk/client-s3 @aws-sdk/s3-request-presigner

These packages will enable file upload, retrieval, and deletion within your React project.

Step 4: Preparing Your React App for S3 Integration

If you’re building a new application:

npx create-react-app react-s3-demo
cd react-s3-demo

If you already have an existing app, jump ahead to configuring your S3 interaction logic.

Securing Your AWS Credentials

Never embed AWS credentials directly in your front-end code. For security, use one of these two patterns:

  1. Backend Proxy Approach: Handle S3 interactions (especially write/delete) via your backend server using AWS credentials.
  2. Cognito and IAM Roles: Authenticate users with AWS Cognito, then grant temporary S3 permissions via IAM roles.

For learning purposes, this guide shows a presigned URL approach—your backend generates a secure, time-limited URL for each upload/download, keeping credentials out of your React code.

Step 5: Creating Presigned URLs for Secure File Uploads

Presigned URLs let your React app upload files directly to S3 securely. You’ll need a backend endpoint (Node.js/Express, Python/Flask, etc.) to create these URLs.

Here’s a minimal Node.js example:

const express = require('express');
const { S3Client, PutObjectCommand } = require('@aws-sdk/client-s3');
const { getSignedUrl } = require('@aws-sdk/s3-request-presigner');
require('dotenv').config();
 
const app = express();
 
const s3 = new S3Client({
  region: process.env.AWS_REGION,
  credentials: {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY
  }
});
 
app.get('/generate-presigned-url', async (req, res) => {
  const { fileName, fileType } = req.query;
 
  const command = new PutObjectCommand({
    Bucket: process.env.AWS_S3_BUCKET_NAME,
    Key: fileName,
    ContentType: fileType
  });
 
  try {
    const uploadUrl = await getSignedUrl(s3, command, { expiresIn: 300 });
    res.json({ uploadUrl });
  } catch (err) {
    res.status(500).json({ error: 'Error generating URL' });
  }
});
 
app.listen(3001, () => {
  console.log('Presigned URL server on port 3001');
});

This API returns a secure upload URL for your React app. For production, always validate authentication and access rights on your server.

Step 6: Handling File Uploads in Your React App

With the presigned URL endpoint live, build your React component.

import React, { useState } from 'react';
 
const S3Uploader = () => {
  const [file, setFile] = useState(null);
  const [uploading, setUploading] = useState(false);
  const [uploadedUrl, setUploadedUrl] = useState('');
 
  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };
 
  const uploadToS3 = async () => {
    if (!file) return;
    setUploading(true);
 
    // Request the presigned URL from your backend
    const res = await fetch(
      `http://localhost:3001/generate-presigned-url?fileName=${encodeURIComponent(file.name)}&fileType=${file.type}`
    );
    const { uploadUrl } = await res.json();
 
    // Upload file to S3 with the presigned URL
    await fetch(uploadUrl, {
      method: 'PUT',
      headers: {
        'Content-Type': file.type
      },
      body: file
    });
 
    setUploadedUrl(uploadUrl.split('?')[0]);
    setUploading(false);
  };
 
  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button disabled={!file || uploading} onClick={uploadToS3}>
        {uploading ? 'Uploading...' : 'Upload to S3'}
      </button>
      {uploadedUrl && (
        <div>
          <p>File uploaded to: <a href={uploadedUrl}>{uploadedUrl}</a></p>
        </div>
      )}
    </div>
  );
};
 
export default S3Uploader;

With this component, users can select a file, your backend provides a secure upload path, and S3 with React apps combines to provide direct, seamless storage uploads.

Step 7: Displaying Uploaded Files from S3 in Your React Interface

To enhance your user experience, list and display uploaded files. Here’s how:

  1. Store Uploaded File Paths: Save file metadata (name, S3 key, URL) in your backend database when uploading.
  2. Fetch File URLs: Create a backend endpoint that returns file URLs or S3 keys.
  3. Display in React: Fetch this list and render it in your React app:
import React, { useEffect, useState } from 'react';
 
const UploadedFilesList = () => {
  const [files, setFiles] = useState([]);
  useEffect(() => {
    fetch('http://localhost:3001/list-files')
      .then((res) => res.json())
      .then((data) => setFiles(data));
  }, []);
 
  return (
    <ul>
      {files.map((file) => (
        <li key={file.name}>
          <a href={file.url} target="_blank" rel="noopener noreferrer">{file.name}</a>
        </li>
      ))}
    </ul>
  );
};
 
export default UploadedFilesList;

Listing files and providing clickable links enables users to interact seamlessly with AWS S3 through your React app.

Step 8: Managing Upload Errors and User Feedback

A critical aspect of building reliable React and AWS S3 integrations is robust error handling. Always provide feedback for failed uploads, unsupported file types, and network issues. Enhance the previous upload component by adding:

  • File type and size validation before initiating the upload.
  • User notifications (success/error messages).
  • Retry mechanisms for transient errors.
  • Loading indicators during upload events.

This extra attentiveness ensures a smoother, less frustrating user experience when integrating AWS S3 with React apps.

Step 9: Securing Your Application

Security must be front and center when working with cloud storage. Here’s how to keep your AWS S3 with React apps secure and compliant:

  • Never Expose IAM Credentials: Enforce all privileged operations through backend proxies.
  • Leverage Presigned URLs: Limit direct access and reduce risk of bucket exposure.
  • Set Short Expiry Times: Ensure presigned URLs are valid only for necessary windows.
  • Apply Proper CORS Settings: Customize your S3 bucket’s CORS policy to allow your app’s origin, limiting allowed HTTP methods and headers.
  • Encrypt Files at Rest and in Transit: Enable S3’s encryption features to protect data.
  • Audit and Monitor: Enable AWS CloudTrail and logging for your bucket to monitor access patterns and potential security incidents.

Step 10: Deploying Your React App and S3 Integration

Once you’ve tested file uploads and retrievals locally, you’re ready to deploy. Deploy your backend API (for presigned URL generation) on AWS Lambda, EC2, or containers, and use a service like Vercel, Netlify, or AWS Amplify for your React app. To further optimize delivery:

  • Serve Static React App from S3: For completely static projects, consider uploading your React build assets to an S3 bucket and serving them via AWS CloudFront.
  • Use Custom Domain and SSL: Link your S3 content to a custom domain and add SSL certificates for user trust.

Advanced Tips: Scaling, Cost Optimization, and Best Practices

To make the most of AWS S3 with React apps in production, keep these strategies in mind:

  • Enable Lifecycle Policies: Automatically archive or delete files after a specified period to control storage costs.
  • Optimize File Sizes: Resize and compress images client-side before uploading to lower storage and bandwidth usage.
  • Implement Multi-Part Uploads: For large files, use S3’s multi-part upload API to improve reliability and speed.
  • Monitor S3 Usage: Set up budgets and alerts in the AWS Console to track and control expenses.
  • Graceful Degradation: Handle S3 API throttling or downtime gracefully in your UI, providing fallback options when needed.

Troubleshooting Common Issues

CORS Errors:
If your React app encounters cross-origin resource sharing errors when accessing S3 objects, double-check your bucket’s CORS configuration. Make sure it allows requests from your domain and includes the necessary HTTP methods.

Access Denied Errors:
Ensure that your IAM policies cover the actions your app needs, and that presigned URLs are being correctly generated.

Slow Uploads:
Optimize the client’s connection and recommend file size limits. Consider using AWS CloudFront for distributing downloads globally.

Conclusion: Unlocking Seamless File Management in React with AWS S3

Combining AWS S3 with React apps is a game changer for scalable, reliable file handling. By following this comprehensive step-by-step guide, you’ve learned how to set up your S3 bucket, create secure upload workflows with presigned URLs, and handle files directly from your React interface—all while keeping your credentials and user data safe.

As your project grows, continue to refine your approach: automate key steps, monitor usage, and introduce advanced storage features offered by AWS. Mastering these skills will make your applications robust, responsive, and ready for scale—ensuring your users enjoy seamless, secure file experiences every time they interact with your platform.

With this ultimate guide in your toolkit, integrating AWS S3 with React apps will become second nature, empowering you to tackle the next generation of feature-rich, cloud-enabled web applications.

More Posts

Building Serverless Apps with AWS Lambda: A Beginner’s Guide

July 24, 2025

AWS Amplify vs Vercel: Comparing Features, Pricing, and Use Cases

July 24, 2025