Deploying a React App with Vite on AWS S3 and CloudFront: A Step-by-Step Guide

Siva Sakthii U S — Thu, 23 Jan 2025 18:57:16 +0000

Introduction

In this blog, we’ll walk you through deploying a React app, built with Vite, to AWS S3 with CloudFront for fast and secure delivery. By the end, you’ll have your static React site live and ready to scale globally.

Step 1: Create a React Application

Download and install Node.js (LTS version recommended) from Node.js Official Website.
Check the version of node and npm:
Create a Vite Project:
Install dependencies:
Execute npm run dev :
Change the UI for your needs
Build the React App:
(Generate the static files for deployment)

npm run build

The output will be in the dist/ folder.

Step 2: Set Up an S3 Bucket

Create an S3 Bucket:

Go to the AWS Management Console > S3.
Click Create bucket.
Provide a unique bucket name (e.g., my-static-react-site).

Disable Block all public access.

Bucket versioning

Being a professional add Tags

Create the bucket.

Upload React Build Files:

Navigate to your S3 bucket.

Click Upload > Add files.

Upload all files from the dist/ folder.

Set Public Read Access:

Go to Permissions.
Edit Bucket Policy:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::my-static-react-site/*"
    }
  ]
}

Enable Static Website Hosting:

In the Properties tab, enable Static website hosting.

Set the Index document to index.html.

Note the Bucket website endpoint.

Step 3: Configure CloudFront for CDN

Create a CloudFront Distribution:

Go to CloudFront in the AWS Console.

Click Create Distribution.
In the Origin Domain Name, select your S3 bucket (or paste the static website URL).

Select "Do not enable security protections"
Click Create Distribution

Deploy the CloudFront Distribution:

Note the CloudFront domain name after deployment.

Step 5: Verify Deployment

Open your CloudFront distribution URL in a browser.
Ensure the React site loads correctly.

Conclusion

With these steps, you’ve successfully deployed your Vite-based React app on AWS S3 with CloudFront. This setup ensures your app is highly available, fast, and scalable.

AWS EventBridge: Unlock Event-Driven Architecture Effortlessly

Siva Sakthii U S — Wed, 22 Jan 2025 18:28:56 +0000

1. Service Overview

Service Name: Amazon EventBridge

Logo:

"Amazon EventBridge: Simplify Event-Driven Architectures with Serverless Event Bus."

Amazon EventBridge is a serverless event bus that makes it easy to connect your applications with data from various AWS services, SaaS platforms, or your own applications.

2. Key Features

Seamless Integration with AWS Services:
Automatically connects to over 200 AWS services, making it easy to build event-driven applications.

SaaS Integration:
Integrates with leading SaaS providers like Zendesk, Datadog, and Shopify to consume events directly from their platforms.

Event Filtering:
Allows fine-grained event filtering to process only the relevant events, reducing operational overhead.

Schema Registry and Discovery:
Provides a centralized schema registry and lets you discover event structures automatically.

Custom Event Bus Support:
Create your own event buses for specific applications or teams.

High Availability and Scalability:
Fully managed and scales automatically to handle millions of events per second.

Technical Specifications

Regions Supported: Available in all AWS regions.

High Availability: Built on the highly resilient AWS infrastructure.

Durability: Delivers at-least-once event delivery.

Request Limits: Default limits of 256 KB payload size and 300 rules per event bus (configurable).

3. Real-Life Applications

Microservices Communication:
Use EventBridge to decouple microservices in your architecture.

Real-Time Monitoring:
Integrate with monitoring tools like Datadog for real-time alerts and actions.

Data Ingestion Pipelines:
Trigger Lambda functions for ETL processes when new data is available.

IoT Event Processing:
Process IoT device events and update dashboards in real time.

4. Pricing Model

Amazon EventBridge offers a pay-as-you-go pricing model:

Event Ingestion: $1.00 per million events.

Custom Event Bus: Additional costs for custom events beyond the free tier.

Schema Discovery: Free tier includes up to 5 million schema discovery events.

5. Comparison with Similar Services

AWS SQS:
While both handle messaging, SQS is designed for message queues, whereas EventBridge excels at routing events with filtering.

Google Cloud Pub/Sub:
Pub/Sub provides similar event-driven functionality but lacks native AWS integration.

Azure Event Grid:
Offers event-driven architecture for Microsoft services, but EventBridge provides broader SaaS integration.

Feature	Amazon EventBridge	AWS SQS	Google Cloud Pub/Sub	Azure Event Grid
Purpose	Event routing and filtering for event-driven architectures	Messaging queue for decoupled systems	Event-driven messaging for Google Cloud services	Event routing for Azure-based architectures
Integration	Native AWS services, SaaS platforms, and custom events	Native AWS services	Google Cloud services	Microsoft Azure services
Event Filtering	Supports fine-grained filtering	No filtering; all messages in queue must be processed	Supports filtering	Supports filtering
Delivery Guarantee	At-least-once delivery	At-least-once delivery	At-least-once delivery	At-least-once delivery
Schema Registry	Provides a centralized schema registry	Not available	Not available	Limited support
Ease of Use	Simplifies event-driven architecture	Simple queue-based architecture	Optimized for Google Cloud users	Optimized for Azure users
Pricing	Pay-per-event	Pay-per-message	Pay-per-message	Pay-per-operation

6. Benefits and Challenges

Advantages

Serverless Architecture: No infrastructure to manage.

Seamless AWS Integration: Tight integration with AWS services.

Broad SaaS Support: Directly integrates with popular SaaS platforms.

Highly Scalable: Handles millions of events per second effortlessly.

Limitations or Challenges

Learning Curve: Understanding event-driven architecture might take time.

Cost Management: Costs can rise with a high volume of custom events.

7. Case Study

Square Enix

Square Enix, a leading video game company, uses AWS EventBridge to streamline event-driven architecture for their game platforms. They leverage EventBridge to:

Integrate events from various microservices.
Trigger workflows for in-game purchases.
Monitor player activities and scale resources dynamically.

By using EventBridge, Square Enix reduced latency and improved player experience, all while maintaining high scalability and operational efficiency.

Conclusion:

Amazon EventBridge empowers developers to build robust, event-driven systems with ease. Whether you're connecting microservices or integrating third-party SaaS, EventBridge simplifies the process with its powerful features and seamless integrations. Start your journey with AWS EventBridge today!

DEV Community: Siva Sakthii U S