<> Code Runner 🚀

🧩 Project Overview

Code Runner is a web-based application that allows users to write, compile, and execute code directly from their browser. The platform is inspired by Judge0, providing seamless code execution powered by AWS infrastructure. This documentation explains the purpose of Code Runner, the tools used, and the complete AWS-based deployment workflow.

⚙️ What is Code Runner?

Code Runner is a cloud-based platform for executing code. It is inspired by Judge0, a popular code execution API, and leverages AWS services for hosting and backend operations.

Architecture Overview:

• Backend: The backend uses the Judge0 API through RapidAPI for compiling and running user code.
• Frontend: The frontend is hosted on AWS S3, ensuring static content is globally distributed using CloudFront.
• AWS Lambda: Lambda functions act as the intermediary, handling requests between the frontend and the Judge0 API.

The goal is to offer a simple, scalable, and efficient environment where users can execute code on-demand, powered by AWS.

🧰 Prerequisites

🖥️ IDE

Use any code editor or Integrated Development Environment (IDE) for local development, such as:

• VS Code
• PyCharm

🔑 RapidAPI Credentials

To connect to Judge0 via RapidAPI, you need the following credentials:

• RAPIDAPI_ENDPOINT
• RAPIDAPI_HOST
• RAPIDAPI_KEY

These credentials are necessary for authenticating Lambda function requests to the Judge0 API.

☁️ AWS Account

Ensure you have an AWS account with access to the following services:

• Lambda: For running backend logic and making API requests.
• S3: To host static frontend files.
• CloudFront: To serve content globally and enhance performance.
• Route 53: For custom domain and SSL certificate configuration.

📦 requirements.txt

The requirements.txt file lists the Python dependencies required by your Lambda function. It is crucial for defining the Lambda Layer, ensuring proper environment setup and dependency management.

🗂️ Naming Conventions and Best Practices

• Lambda: lambda_function.py
• Frontend: index.html, style.css, script.js
• AWS Resources: Choose descriptive names for your AWS resources (e.g., code-runner-bucket, code-runner-distribution) to enhance clarity and ease of management.

Best Practices:

• Keep names simple and precise to ease collaboration and resource management.
• Follow consistent naming patterns for files and resources across your project.

🚀 Step-by-Step Deployment Guide

Step 1: AWS Lambda Setup

1. Write the backend logic inside lambda_function.py.

2. Configure environment variables:

   • RAPIDAPI_ENDPOINT
   • RAPIDAPI_HOST
   • RAPIDAPI_KEY

3. Use AWS CloudWatch to monitor and debug your Lambda function. CloudWatch logs provide real-time execution data and error reports, which are invaluable for troubleshooting.

Step 2: Local Frontend Development

1. Develop the frontend locally using:

   • index.html for structure and UI
   • style.css for styling
   • script.js for logic and communication with Lambda

2. Insert your Lambda function URL in the script.js file to link the frontend and backend.

3. Store all frontend files (HTML, CSS, JS) in one folder for easy deployment.

Step 3: Hosting with AWS S3

1. Create an S3 bucket and enable static website hosting.
2. Upload index.html, style.css, and script.js to the bucket.
3. Configure bucket permissions and policies for public access.
4. Verify the Bucket Website Endpoint to ensure your site is working correctly.

Step 4: CloudFront Distribution

1. Create a CloudFront Distribution and link it to your S3 bucket.
2. CloudFront will act as a Content Delivery Network (CDN), improving speed, security, and global accessibility.
3. After deployment, perform CloudFront invalidation to clear cached files and serve the latest version to users.
4. Verify that the Distribution Domain Name is active and accessible.

Step 5: Domain Setup via Route 53

1. Register your custom domain using Route 53.
2. Map your domain to the CloudFront distribution.
3. Set up an SSL certificate to enable HTTPS security for your domain.
4. Validate the SSL certificate for secure access.

Step 6: Deployment and Updates

1. Once the domain is linked, your project will be live.
2. To push updates:
   • Edit the files locally.
   • Re-upload updated files to S3.
   • Invalidate CloudFront to refresh cached content.

This ensures that your latest updates are available to users immediately.

Step 7: Troubleshooting

If new changes aren’t appearing:

• Clear browser cache — Browsers may store an older version of your site.
• Use an incognito window — This ensures you’re not loading a cached version.
• Verify CloudFront invalidation — Ensure that CloudFront cache has been cleared.
• Check CloudWatch logs — Review the backend execution logs for errors or issues.

🧾 Summary

Architecture Flow:

• AWS Lambda (Backend) → RapidAPI (Judge0 API) → Frontend (S3 + CloudFront) → Domain (Route 53)

These AWS services work together to create a scalable, reliable code execution platform with a globally accessible frontend and a monitored backend.

---

Happy coding! 😄

For further details on the tools and services mentioned in this guide, refer to the official AWS documentation and the Judge0 API documentation.

References:

• AWS Lambda Documentation
• AWS S3 Documentation
• AWS CloudFront Documentation
• RapidAPI Judge0 API Documentation