From 829ecdae7b70657d688699d57ca0e33426d4e269 Mon Sep 17 00:00:00 2001 From: Aditya Sriram Bhaskara <55957271+AdityaSriram09@users.noreply.github.com> Date: Sun, 5 Oct 2025 12:38:12 +0530 Subject: [PATCH 1/8] Create Serverless Image Resizer with Hot Reload.md #237 https://github.com/localstack/localstack-docs/issues/237 --- ...erverless Image Resizer with Hot Reload.md | 147 ++++++++++++++++++ 1 file changed, 147 insertions(+) create mode 100644 src/content/docs/aws/tutorials/Serverless Image Resizer with Hot Reload.md diff --git a/src/content/docs/aws/tutorials/Serverless Image Resizer with Hot Reload.md b/src/content/docs/aws/tutorials/Serverless Image Resizer with Hot Reload.md new file mode 100644 index 00000000..110609f6 --- /dev/null +++ b/src/content/docs/aws/tutorials/Serverless Image Resizer with Hot Reload.md @@ -0,0 +1,147 @@ +# Introduction + +In this tutorial, you’ll learn how to build a serverless image resizing pipeline using S3 + Lambda on LocalStack, with hot reload support so you can iterate quickly without full redeploys. + +The architecture is: + +Upload an image to an input S3 bucket. + +A Lambda, triggered by the S3 event, resizes the image and writes it to an output S3 bucket. + +You can modify the Lambda code locally and, via hot reload support, changes will reflect immediately (no full redeploy). + +This pattern is useful for generating thumbnails, avatars, image processing pipelines, etc. + +# Prerequisites + +Before you begin, ensure you have the following: + +* LocalStack Pro (hot reload features require the Pro edition) + +* Docker (for running LocalStack) + +* Node.js and/or Python (depending on the runtime in your repo) + +* AWS CLI or awslocal (for deploying / interacting with LocalStack) + +* make or shell tooling (optional but helpful) + +* Basic familiarity with AWS Lambda, S3, event-driven architectures + +# Architecture Diagram + +Below is a simplified flow: +``` +Client → upload image → S3 (input bucket) + ↓ (S3 trigger) + Lambda (resizer) + ↓ + S3 (output/resized bucket) + +``` +You can also incorporate error handling (SNS, alerts) or a UI layer (presigned upload) depending on your setup. + +# Steps +## 1. Clone the repository +``` +git clone https://github.com/localstack-samples/sample-lambda-s3-image-resizer-hot-reload.git +cd sample-lambda-s3-image-resizer-hot-reload +``` +## 2. Install dependencies + +If Python is used: +``` +python -m venv .venv +source .venv/bin/activate +pip install -r requirements-dev.txt +``` + +If there are Node.js parts: +``` +cd +npm install +``` +## 3. Start LocalStack + +Make sure your LOCALSTACK_AUTH_TOKEN is set. Then: +``` +localstack auth set-token +localstack start +``` +## 4. Build and Deploy Lambdas +``` +deployment/build-lambdas.sh +deployment/awslocal/deploy.sh +``` + +These scripts will package your lambda code and deploy to LocalStack (creating buckets, setting up triggers, etc.). After deployment, note the Lambda function URLs or ARNs printed by the script. + +## 5. Configure the Web UI (if present) + +If the sample repo includes a web UI, open it (e.g. via S3 static website endpoint in LocalStack). Configure it by inputting the Lambda URLs / endpoints that you obtained above. + +## 6. Upload a Sample Image + +Use the UI or awslocal + AWS CLI to upload an image (e.g. test.jpg) into the input bucket. This should trigger the resize Lambda, and produce a resized version in the output bucket. + +## 7. Enable Hot Reload + +To enable hot reload on a Lambda, you’ll use a special “hot-reload” S3 bucket that points to your local function code. Example command: +``` +awslocal lambda update-function-code --function-name \ + --s3-bucket hot-reload --s3-key "$(pwd)/lambdas/" +``` + +Now, when you change the handler code in your local folder (e.g. handler.py), LocalStack will detect changes and refresh the running function without a full redeploy. + +# Testing the Application +## 1. Initial Upload Test + +* Upload an image (e.g. sample.jpg) + +* Wait for Lambda to process (LocalStack handles invocation) + +* Download the resized image from the output bucket + +* Verify that its dimensions match your expectations (e.g. width/height constraints) + +## 2. Hot Reload Test + +* Edit your Lambda code (for example, change target size or add a watermark) + +* Save the changes + +* Re-upload a new image (or same filename) + +* Download from the output bucket again + +* Confirm that your updated logic is applied (new resized size or watermark) + +## 3. Automated Integration Tests + +If the repo includes a test suite (e.g. via pytest): +``` +pytest tests/ +``` + +These tests should cover end-to-end behavior: + +* Uploading test images + +* Verifying output in the target bucket + +* Edge cases (non-image uploads, errors, alerts) + +* Add assertions for new behavior after hot reload, etc. + +# Conclusion + +In this tutorial, you’ve built a serverless image processing pipeline on LocalStack: + +* Event-driven flow: S3 trigger → Lambda → output bucket + +* Hot reload support for fast development iteration + +* A foundation you can extend (e.g. add watermarking, format conversion, error alerts) + +This pattern is applicable to many real-world use cases—thumbnails, image pipelines, and other serverless media workflows. From eb78023de1d578b1ceb0078562c7f6a48e6b72c5 Mon Sep 17 00:00:00 2001 From: Aditya Sriram Bhaskara <55957271+AdityaSriram09@users.noreply.github.com> Date: Sun, 5 Oct 2025 12:40:44 +0530 Subject: [PATCH 2/8] Rename --- ...zer with Hot Reload.md => S3-Image-Resizer-with-Hot-Reload.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/content/docs/aws/tutorials/{Serverless Image Resizer with Hot Reload.md => S3-Image-Resizer-with-Hot-Reload.md} (100%) diff --git a/src/content/docs/aws/tutorials/Serverless Image Resizer with Hot Reload.md b/src/content/docs/aws/tutorials/S3-Image-Resizer-with-Hot-Reload.md similarity index 100% rename from src/content/docs/aws/tutorials/Serverless Image Resizer with Hot Reload.md rename to src/content/docs/aws/tutorials/S3-Image-Resizer-with-Hot-Reload.md From ef1e143f8ad17ba1b7f97dcc222b566609ca5513 Mon Sep 17 00:00:00 2001 From: Aditya Sriram Bhaskara <55957271+AdityaSriram09@users.noreply.github.com> Date: Sun, 5 Oct 2025 12:49:58 +0530 Subject: [PATCH 3/8] Delete src/content/docs/aws/tutorials/S3-Image-Resizer-with-Hot-Reload.md --- .../S3-Image-Resizer-with-Hot-Reload.md | 147 ------------------ 1 file changed, 147 deletions(-) delete mode 100644 src/content/docs/aws/tutorials/S3-Image-Resizer-with-Hot-Reload.md diff --git a/src/content/docs/aws/tutorials/S3-Image-Resizer-with-Hot-Reload.md b/src/content/docs/aws/tutorials/S3-Image-Resizer-with-Hot-Reload.md deleted file mode 100644 index 110609f6..00000000 --- a/src/content/docs/aws/tutorials/S3-Image-Resizer-with-Hot-Reload.md +++ /dev/null @@ -1,147 +0,0 @@ -# Introduction - -In this tutorial, you’ll learn how to build a serverless image resizing pipeline using S3 + Lambda on LocalStack, with hot reload support so you can iterate quickly without full redeploys. - -The architecture is: - -Upload an image to an input S3 bucket. - -A Lambda, triggered by the S3 event, resizes the image and writes it to an output S3 bucket. - -You can modify the Lambda code locally and, via hot reload support, changes will reflect immediately (no full redeploy). - -This pattern is useful for generating thumbnails, avatars, image processing pipelines, etc. - -# Prerequisites - -Before you begin, ensure you have the following: - -* LocalStack Pro (hot reload features require the Pro edition) - -* Docker (for running LocalStack) - -* Node.js and/or Python (depending on the runtime in your repo) - -* AWS CLI or awslocal (for deploying / interacting with LocalStack) - -* make or shell tooling (optional but helpful) - -* Basic familiarity with AWS Lambda, S3, event-driven architectures - -# Architecture Diagram - -Below is a simplified flow: -``` -Client → upload image → S3 (input bucket) - ↓ (S3 trigger) - Lambda (resizer) - ↓ - S3 (output/resized bucket) - -``` -You can also incorporate error handling (SNS, alerts) or a UI layer (presigned upload) depending on your setup. - -# Steps -## 1. Clone the repository -``` -git clone https://github.com/localstack-samples/sample-lambda-s3-image-resizer-hot-reload.git -cd sample-lambda-s3-image-resizer-hot-reload -``` -## 2. Install dependencies - -If Python is used: -``` -python -m venv .venv -source .venv/bin/activate -pip install -r requirements-dev.txt -``` - -If there are Node.js parts: -``` -cd -npm install -``` -## 3. Start LocalStack - -Make sure your LOCALSTACK_AUTH_TOKEN is set. Then: -``` -localstack auth set-token -localstack start -``` -## 4. Build and Deploy Lambdas -``` -deployment/build-lambdas.sh -deployment/awslocal/deploy.sh -``` - -These scripts will package your lambda code and deploy to LocalStack (creating buckets, setting up triggers, etc.). After deployment, note the Lambda function URLs or ARNs printed by the script. - -## 5. Configure the Web UI (if present) - -If the sample repo includes a web UI, open it (e.g. via S3 static website endpoint in LocalStack). Configure it by inputting the Lambda URLs / endpoints that you obtained above. - -## 6. Upload a Sample Image - -Use the UI or awslocal + AWS CLI to upload an image (e.g. test.jpg) into the input bucket. This should trigger the resize Lambda, and produce a resized version in the output bucket. - -## 7. Enable Hot Reload - -To enable hot reload on a Lambda, you’ll use a special “hot-reload” S3 bucket that points to your local function code. Example command: -``` -awslocal lambda update-function-code --function-name \ - --s3-bucket hot-reload --s3-key "$(pwd)/lambdas/" -``` - -Now, when you change the handler code in your local folder (e.g. handler.py), LocalStack will detect changes and refresh the running function without a full redeploy. - -# Testing the Application -## 1. Initial Upload Test - -* Upload an image (e.g. sample.jpg) - -* Wait for Lambda to process (LocalStack handles invocation) - -* Download the resized image from the output bucket - -* Verify that its dimensions match your expectations (e.g. width/height constraints) - -## 2. Hot Reload Test - -* Edit your Lambda code (for example, change target size or add a watermark) - -* Save the changes - -* Re-upload a new image (or same filename) - -* Download from the output bucket again - -* Confirm that your updated logic is applied (new resized size or watermark) - -## 3. Automated Integration Tests - -If the repo includes a test suite (e.g. via pytest): -``` -pytest tests/ -``` - -These tests should cover end-to-end behavior: - -* Uploading test images - -* Verifying output in the target bucket - -* Edge cases (non-image uploads, errors, alerts) - -* Add assertions for new behavior after hot reload, etc. - -# Conclusion - -In this tutorial, you’ve built a serverless image processing pipeline on LocalStack: - -* Event-driven flow: S3 trigger → Lambda → output bucket - -* Hot reload support for fast development iteration - -* A foundation you can extend (e.g. add watermarking, format conversion, error alerts) - -This pattern is applicable to many real-world use cases—thumbnails, image pipelines, and other serverless media workflows. From 232e3acab7cc98f1bfe858d3eb0567d9d9efca90 Mon Sep 17 00:00:00 2001 From: Aditya Sriram Bhaskara <55957271+AdityaSriram09@users.noreply.github.com> Date: Sun, 5 Oct 2025 12:54:34 +0530 Subject: [PATCH 4/8] Create image-resizer-hot-reload.md https://github.com/localstack/localstack-docs/issues/237 --- .../aws/tutorials/image-resizer-hot-reload.md | 140 ++++++++++++++++++ 1 file changed, 140 insertions(+) create mode 100644 src/content/docs/aws/tutorials/image-resizer-hot-reload.md diff --git a/src/content/docs/aws/tutorials/image-resizer-hot-reload.md b/src/content/docs/aws/tutorials/image-resizer-hot-reload.md new file mode 100644 index 00000000..46a145a7 --- /dev/null +++ b/src/content/docs/aws/tutorials/image-resizer-hot-reload.md @@ -0,0 +1,140 @@ +--- +title: S3 Image Resizer with Lambda (Hot Reload) +description: Learn how to build and test a serverless image resizing pipeline locally using LocalStack Pro with Lambda hot reload support. +--- + +# S3 Image Resizer with Lambda (Hot Reload) + +## Introduction + +In this tutorial, you’ll learn how to build and run a **serverless image resizing pipeline** locally using **LocalStack Pro**. +The workflow is simple: + +1. Upload an image to an **S3 source bucket**. +2. An **AWS Lambda** function automatically resizes the image. +3. The resized image is written back to an **S3 target bucket**. +4. Using **hot reload**, you can modify Lambda code locally and instantly test changes without redeployment. + +This pattern is ideal for developing and testing serverless media-processing workflows like thumbnails, avatars, and dynamic image scaling. + +--- + +## Prerequisites + +Make sure you have the following installed and configured: + +- **LocalStack Pro** (hot reload support requires Pro) +- **Docker** (to run LocalStack services) +- **Node.js** *or* **Python** (depending on the Lambda runtime used) +- **AWS CLI** or **awslocal** +- **Make** (optional, for running build scripts) +- Basic understanding of AWS Lambda and S3 event triggers + +--- + +## Architecture Diagram + +```text + ┌────────────────────┐ + │ Source S3 │ + │ (e.g. input-bucket)│ + └───────┬────────────┘ + │ + (S3 Event Trigger) + │ + ┌───────▼────────────┐ + │ Lambda │ + │ (Image Resizer) │ + └───────┬────────────┘ + │ + ┌───────▼────────────┐ + │ Target S3 Bucket │ + │ (e.g. output-bucket)│ + └────────────────────┘ +``` +# Steps +## 1. Clone the Repository +``` +git clone https://github.com/localstack-samples/sample-lambda-s3-image-resizer-hot-reload.git +cd sample-lambda-s3-image-resizer-hot-reload +``` +## 2. Install Dependencies + +If using Python: +``` +python -m venv .venv +source .venv/bin/activate +pip install -r requirements-dev.txt +``` + +If using Node.js Lambdas: +``` +npm install +``` +## 3. Start LocalStack + +Make sure your LocalStack Pro token is set: +``` +localstack auth set-token +localstack start +``` +## 4. Build and Deploy the Lambda +``` +Run the provided scripts to build and deploy: + +deployment/build-lambdas.sh +deployment/awslocal/deploy.sh +``` + +This sets up S3 buckets, event triggers, and deploys the Lambda function locally. + +## 5. Upload a Sample Image + +Once deployment completes, upload a sample image to the input bucket: +``` +awslocal s3 cp ./samples/test-image.jpg s3://input-bucket/ +``` + +The Lambda will trigger automatically and write the resized image to s3://output-bucket/. + +# Testing the Application +## Step 1: Verify the Resized Image + +* List files in the output bucket: +``` +awslocal s3 ls s3://output-bucket/ + +``` +* Download and inspect the resized image: +``` +awslocal s3 cp s3://output-bucket/test-image.jpg ./output/ +``` + +* Confirm the dimensions (e.g., via any image viewer or identify command from ImageMagick): +``` +identify ./output/test-image.jpg +``` +## Step 2: Test Hot Reload + +* Modify your Lambda code locally (for example, change the resize dimensions or add a watermark). + +* Hot reload automatically detects changes—no redeploy needed. + +* Upload another image (or the same one under a new name): +``` +awslocal s3 cp ./samples/test-image2.jpg s3://input-bucket/ +``` + +Verify that the new logic is applied (e.g., updated size or watermark visible). + +# Conclusion + +You’ve built and tested a complete serverless image pipeline on LocalStack, featuring: + +S3 → Lambda → S3 event-driven workflow + +Hot reload for rapid local iteration + +End-to-end testing of serverless image processing + +This pattern can easily extend to real-world use cases—such as photo galleries, CMS platforms, or social apps—where dynamic image transformation is essential. From ccef634390b53a90c5ccea6f655841120e4983f7 Mon Sep 17 00:00:00 2001 From: Aditya Sriram Bhaskara <55957271+AdityaSriram09@users.noreply.github.com> Date: Sun, 5 Oct 2025 13:15:06 +0530 Subject: [PATCH 5/8] Update schema-evolution-glue-msk.mdx [#229] Add - Testing the application --- .../tutorials/schema-evolution-glue-msk.mdx | 120 ++++++++++++++++++ 1 file changed, 120 insertions(+) diff --git a/src/content/docs/aws/tutorials/schema-evolution-glue-msk.mdx b/src/content/docs/aws/tutorials/schema-evolution-glue-msk.mdx index 37a13afe..c6ec546e 100644 --- a/src/content/docs/aws/tutorials/schema-evolution-glue-msk.mdx +++ b/src/content/docs/aws/tutorials/schema-evolution-glue-msk.mdx @@ -1051,7 +1051,127 @@ Our new consumer, based on the latest version of the schema, will be able to suc ```bash mvn -pl consumer-2 exec:java -Dexec.args="--bootstrap-servers localhost:4511" ``` +## Testing the application +After deploying and running the example, you can verify that your MSK and Glue Schema Registry integration is functioning correctly. +This section consolidates the end-to-end verification steps — producing and consuming messages, and validating schema compatibility. + +--- + +### 1. Produce a message to the Kafka topic + +Use the `awslocal` CLI or your preferred Kafka client to produce a test message using the initial Avro schema: + +```bash +awslocal kafka-produce \ + --topic my-topic \ + --value '{"name": "Alice", "age": 30}' +``` +Expected output: + +Message successfully produced to topic 'my-topic' + + +This message is serialized using the Avro schema registered in the Glue Schema Registry. + +### 2. Consume and verify the message + +Consume from the same topic using a compatible schema: +``` +awslocal kafka-consume \ + --topic my-topic \ + --from-beginning \ + --max-messages 1 +``` + +Expected output: +``` +{"name": "Alice", "age": 30} +``` + +This confirms that your consumer can successfully deserialize messages using the registered schema version. + +### 3. Test schema evolution and compatibility + +Now modify your Avro schema to simulate an update (for example, adding a new optional field): +``` +{ + "type": "record", + "name": "User", + "fields": [ + { "name": "name", "type": "string" }, + { "name": "age", "type": "int" }, + { "name": "email", "type": ["null", "string"], "default": null } + ] +} + +``` +Register the updated schema version: +``` +awslocal glue register-schema-version \ + --schema-id SchemaName=my-schema \ + --schema-definition file://updated_user_schema.avsc + +``` +Expected output: +``` +{ + "SchemaVersionId": "abcd1234...", + "Status": "AVAILABLE" +} + +``` +Then verify schema compatibility: +``` +awslocal glue check-schema-compatibility \ + --schema-id SchemaName=my-schema \ + --data-format AVRO \ + --schema-definition file://updated_user_schema.avsc + +``` +Expected output: +``` +{ + "Compatibility": "COMPATIBLE" +} + +``` +This indicates that the updated schema maintains backward compatibility with existing data. + +4. Validate end-to-end flow after schema update + +Produce a message using the new schema: +``` +awslocal kafka-produce \ + --topic my-topic \ + --value '{"name": "Bob", "age": 25, "email": "bob@example.com"}' +``` + +Then consume again to verify successful deserialization: +``` +awslocal kafka-consume \ + --topic my-topic \ + --from-beginning \ + --max-messages 2 +``` + +Expected output: +``` +{"name": "Alice", "age": 30} +{"name": "Bob", "age": 25, "email": "bob@example.com"} +``` + +Both messages deserialize successfully, confirming that schema evolution and compatibility are functioning as expected. + +### 5. Summary + +You’ve validated that: + +* Kafka topics in LocalStack correctly trigger message serialization/deserialization through Glue Schema Registry. + +* Schema evolution (adding optional fields) preserves backward compatibility. + +* Both producer and consumer integrate seamlessly after schema updates. ## Conclusion Apache Kafka is used as the core messaging system in complex environments, with independent producers and consumers. From b714f8aa2fd9cb230e4d78c44749eee3b05aa946 Mon Sep 17 00:00:00 2001 From: Aditya Sriram Bhaskara <55957271+AdityaSriram09@users.noreply.github.com> Date: Tue, 28 Oct 2025 10:07:20 +0530 Subject: [PATCH 6/8] Remove testing section for MSK and Glue integrations Removed the testing section for the application --- .../tutorials/schema-evolution-glue-msk.mdx | 120 ------------------ 1 file changed, 120 deletions(-) diff --git a/src/content/docs/aws/tutorials/schema-evolution-glue-msk.mdx b/src/content/docs/aws/tutorials/schema-evolution-glue-msk.mdx index c6ec546e..37a13afe 100644 --- a/src/content/docs/aws/tutorials/schema-evolution-glue-msk.mdx +++ b/src/content/docs/aws/tutorials/schema-evolution-glue-msk.mdx @@ -1051,127 +1051,7 @@ Our new consumer, based on the latest version of the schema, will be able to suc ```bash mvn -pl consumer-2 exec:java -Dexec.args="--bootstrap-servers localhost:4511" ``` -## Testing the application -After deploying and running the example, you can verify that your MSK and Glue Schema Registry integration is functioning correctly. -This section consolidates the end-to-end verification steps — producing and consuming messages, and validating schema compatibility. - ---- - -### 1. Produce a message to the Kafka topic - -Use the `awslocal` CLI or your preferred Kafka client to produce a test message using the initial Avro schema: - -```bash -awslocal kafka-produce \ - --topic my-topic \ - --value '{"name": "Alice", "age": 30}' -``` -Expected output: - -Message successfully produced to topic 'my-topic' - - -This message is serialized using the Avro schema registered in the Glue Schema Registry. - -### 2. Consume and verify the message - -Consume from the same topic using a compatible schema: -``` -awslocal kafka-consume \ - --topic my-topic \ - --from-beginning \ - --max-messages 1 -``` - -Expected output: -``` -{"name": "Alice", "age": 30} -``` - -This confirms that your consumer can successfully deserialize messages using the registered schema version. - -### 3. Test schema evolution and compatibility - -Now modify your Avro schema to simulate an update (for example, adding a new optional field): -``` -{ - "type": "record", - "name": "User", - "fields": [ - { "name": "name", "type": "string" }, - { "name": "age", "type": "int" }, - { "name": "email", "type": ["null", "string"], "default": null } - ] -} - -``` -Register the updated schema version: -``` -awslocal glue register-schema-version \ - --schema-id SchemaName=my-schema \ - --schema-definition file://updated_user_schema.avsc - -``` -Expected output: -``` -{ - "SchemaVersionId": "abcd1234...", - "Status": "AVAILABLE" -} - -``` -Then verify schema compatibility: -``` -awslocal glue check-schema-compatibility \ - --schema-id SchemaName=my-schema \ - --data-format AVRO \ - --schema-definition file://updated_user_schema.avsc - -``` -Expected output: -``` -{ - "Compatibility": "COMPATIBLE" -} - -``` -This indicates that the updated schema maintains backward compatibility with existing data. - -4. Validate end-to-end flow after schema update - -Produce a message using the new schema: -``` -awslocal kafka-produce \ - --topic my-topic \ - --value '{"name": "Bob", "age": 25, "email": "bob@example.com"}' -``` - -Then consume again to verify successful deserialization: -``` -awslocal kafka-consume \ - --topic my-topic \ - --from-beginning \ - --max-messages 2 -``` - -Expected output: -``` -{"name": "Alice", "age": 30} -{"name": "Bob", "age": 25, "email": "bob@example.com"} -``` - -Both messages deserialize successfully, confirming that schema evolution and compatibility are functioning as expected. - -### 5. Summary - -You’ve validated that: - -* Kafka topics in LocalStack correctly trigger message serialization/deserialization through Glue Schema Registry. - -* Schema evolution (adding optional fields) preserves backward compatibility. - -* Both producer and consumer integrate seamlessly after schema updates. ## Conclusion Apache Kafka is used as the core messaging system in complex environments, with independent producers and consumers. From 7aa9cf3ee9be137671fe92c1349e745290445eba Mon Sep 17 00:00:00 2001 From: Aditya Sriram Bhaskara <55957271+AdityaSriram09@users.noreply.github.com> Date: Fri, 31 Oct 2025 22:55:16 +0530 Subject: [PATCH 7/8] Enhance image resizer tutorial with use cases and clarity Added a new section on use cases for image resizing and updated the steps for clarity. Enhanced the document structure with additional headers and improved descriptions. --- .../aws/tutorials/image-resizer-hot-reload.md | 51 +++++++++++++------ 1 file changed, 35 insertions(+), 16 deletions(-) diff --git a/src/content/docs/aws/tutorials/image-resizer-hot-reload.md b/src/content/docs/aws/tutorials/image-resizer-hot-reload.md index 46a145a7..d164985f 100644 --- a/src/content/docs/aws/tutorials/image-resizer-hot-reload.md +++ b/src/content/docs/aws/tutorials/image-resizer-hot-reload.md @@ -1,6 +1,16 @@ --- title: S3 Image Resizer with Lambda (Hot Reload) description: Learn how to build and test a serverless image resizing pipeline locally using LocalStack Pro with Lambda hot reload support. +services: +- sqs +- lmb +services: + - lambda + - s3 +platform: pro +pro: true +deployment: docker-compose +leadimage: /img/tutorials/image-resizer-hot-reload.png --- # S3 Image Resizer with Lambda (Hot Reload) @@ -17,7 +27,6 @@ The workflow is simple: This pattern is ideal for developing and testing serverless media-processing workflows like thumbnails, avatars, and dynamic image scaling. ---- ## Prerequisites @@ -30,8 +39,16 @@ Make sure you have the following installed and configured: - **Make** (optional, for running build scripts) - Basic understanding of AWS Lambda and S3 event triggers ---- +## Why / Use Case +Image resizing is a fundamental part of many web applications — whether you’re: +- A **CMS platform** generating thumbnails for uploaded images +- An **e-commerce store** optimizing product visuals +- A **developer** testing media pipelines before production +Running this workflow locally with LocalStack lets you: +- Develop and debug Lambdas faster (no redeploys) +- Avoid AWS costs during experimentation +- Simulate a realistic event-driven workflow ## Architecture Diagram ```text @@ -42,23 +59,25 @@ Make sure you have the following installed and configured: │ (S3 Event Trigger) │ - ┌───────▼────────────┐ + ▼ + ┌────────────────────┐ │ Lambda │ │ (Image Resizer) │ └───────┬────────────┘ │ - ┌───────▼────────────┐ - │ Target S3 Bucket │ + ▼ + ┌─────────────────────┐ + │ Target S3 Bucket │ │ (e.g. output-bucket)│ - └────────────────────┘ + └─────────────────────┘ ``` -# Steps -## 1. Clone the Repository +## Steps +### 1. Clone the Repository ``` git clone https://github.com/localstack-samples/sample-lambda-s3-image-resizer-hot-reload.git cd sample-lambda-s3-image-resizer-hot-reload ``` -## 2. Install Dependencies +### 2. Install Dependencies If using Python: ``` @@ -71,14 +90,14 @@ If using Node.js Lambdas: ``` npm install ``` -## 3. Start LocalStack +### 3. Start LocalStack Make sure your LocalStack Pro token is set: ``` localstack auth set-token localstack start ``` -## 4. Build and Deploy the Lambda +### 4. Build and Deploy the Lambda ``` Run the provided scripts to build and deploy: @@ -88,7 +107,7 @@ deployment/awslocal/deploy.sh This sets up S3 buckets, event triggers, and deploys the Lambda function locally. -## 5. Upload a Sample Image +### 5. Upload a Sample Image Once deployment completes, upload a sample image to the input bucket: ``` @@ -97,8 +116,8 @@ awslocal s3 cp ./samples/test-image.jpg s3://input-bucket/ The Lambda will trigger automatically and write the resized image to s3://output-bucket/. -# Testing the Application -## Step 1: Verify the Resized Image +## Testing the Application +### Step 1: Verify the Resized Image * List files in the output bucket: ``` @@ -114,7 +133,7 @@ awslocal s3 cp s3://output-bucket/test-image.jpg ./output/ ``` identify ./output/test-image.jpg ``` -## Step 2: Test Hot Reload +### Step 2: Test Hot Reload * Modify your Lambda code locally (for example, change the resize dimensions or add a watermark). @@ -127,7 +146,7 @@ awslocal s3 cp ./samples/test-image2.jpg s3://input-bucket/ Verify that the new logic is applied (e.g., updated size or watermark visible). -# Conclusion +## Conclusion You’ve built and tested a complete serverless image pipeline on LocalStack, featuring: From de74a434461796dc4188d84668dd432124831767 Mon Sep 17 00:00:00 2001 From: Brian Rinaldi Date: Fri, 31 Oct 2025 15:46:22 -0400 Subject: [PATCH 8/8] Fix issues with frontmatter --- .../docs/aws/tutorials/image-resizer-hot-reload.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/docs/aws/tutorials/image-resizer-hot-reload.md b/src/content/docs/aws/tutorials/image-resizer-hot-reload.md index d164985f..fff8caa5 100644 --- a/src/content/docs/aws/tutorials/image-resizer-hot-reload.md +++ b/src/content/docs/aws/tutorials/image-resizer-hot-reload.md @@ -4,13 +4,13 @@ description: Learn how to build and test a serverless image resizing pipeline lo services: - sqs - lmb -services: - - lambda - - s3 -platform: pro +- s3 +platform: +- nodejs pro: true -deployment: docker-compose -leadimage: /img/tutorials/image-resizer-hot-reload.png +deployment: +- docker-compose +leadimage: "image-resizer-hot-reload.png" --- # S3 Image Resizer with Lambda (Hot Reload)