How to Deploy Your freeCodeCamp Project on AWS: Complete Step by Step Guide
By Braincuber Team
Published on April 4, 2026
What You'll Learn:
- What AWS is and why cloud computing experience matters for your development career
- Method 1: Deploy to AWS S3 as a static website with public access and hosting configuration
- Method 2: Deploy to Elastic Beanstalk with Node.js/Express, learning EC2, Load Balancers, and Auto Scaling
- Method 3: Deploy to AWS Lambda + API Gateway for a fully serverless architecture
- How to prepare your CodePen project files for local testing and deployment
- Understanding the underlying AWS services behind each deployment method
When you work through the freeCodeCamp curriculum and finish your Front End Libraries Projects, you submit those projects via CodePen where freeCodeCamp has unit tests to verify your work. Confetti falls, you see an inspirational phrase, and you are probably very proud of your project. But in the real world, when a company finishes a project they do not make it available via CodePen -- they deploy it. In this complete tutorial, we will deploy your freeCodeCamp front end project on AWS using three different methods. This step by step guide will take you from CodePen to a globally accessible URL endpoint. Whether you are a beginner or experienced developer, this beginner guide will show you exactly how cloud deployment works on AWS.
What is AWS? A Brief Intro to the Cloud
Amazon Web Services (AWS) offers a cloud computing platform with services ranging from simply storing files (S3), running servers (EC2), converting speech to text (Transcribe), machine learning, private cloud networks (VPC), and about 200+ other services.
The basic idea behind cloud computing is to gain on-demand IT resources. The alternative is for you to own those IT resources -- buying physical servers, configuring networking, and managing everything yourself. There are a number of benefits to using a cloud computing platform instead of owning, one of the main ones being the cost savings.
Cost Savings
Imagine paying for all the physical IT resources to run 200+ services. Cloud platforms eliminate upfront infrastructure costs.
Faster Deployment
Cloud platforms allow you to launch resources much faster than an IT department could provision physical hardware.
Security
AWS provides enterprise-grade security, compliance certifications, and built-in protections for your applications.
Career Advantage
Many job postings include cloud platform experience requirements. Familiarity with AWS separates you from other candidates.
Preparing Your Project for Deployment
Before we deploy to AWS, we need to take your CSS, HTML, and JS code from CodePen and put them into their own separate files in a text editor. In the CodePen environment, CodePen links your CSS to your HTML code, as well as your JS file to your HTML. We need to account for this before we deploy.
random-quote-machine/
├── index.html (your CodePen HTML + <body> tag)
├── styles.css (your CodePen CSS)
└── main.js (your CodePen JavaScript)
CodePen does not require the <body> tag, but it is good practice to add that. You will now need to link your styles.css and main.js to your index.html, since CodePen no longer does it for you.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- Your CodePen HTML here -->
</body>
<script src="main.js"></script>
</html>
Open a web browser, press Ctrl+O to select a local file, navigate to your folder, and open index.html. If everything works locally, great! If you imported any libraries via CodePen, those would need to be imported through their CDN. Make whatever changes you find necessary to get your project in working order.
Method 1: Deploy with AWS S3
Our first approach is through the AWS service called S3. S3 stands for Simple Storage Service. As you might have guessed from that name, the service lets you simply store objects. Objects can be things like image files, video files, even HTML, CSS, and JavaScript files. AWS S3 is a service we can use to deploy a website.
Step 1: Create Your S3 Bucket
Create Your S3 Bucket
Log into AWS, search for "S3" (not "S3 Glacier"), and open the S3 Management Console. Click Create bucket and enter a globally unique name (no spaces). Bucket names must be unique across all AWS accounts worldwide.
Configure Public Access
Scroll to Block Public Access settings and uncheck Block all public access. Check the acknowledgement box. We want our website visitors' browsers to access our index.html file.
Upload Files with Public Read Access
Click your bucket, then Upload. Select your three files. Expand Additional upload options, scroll to Access control list (ACL), and check Read for Everyone (public access). Click Upload.
Enable Static Website Hosting
Go to the Properties tab, scroll to Static website hosting, click Edit, set it to Enable, and type index.html for both Index document and Error document. Save changes. A URL endpoint will appear -- click it to view your project!
Troubleshooting S3 Deployment
If your site works locally but not through S3: (1) Verify the same files work locally. (2) Check the Permissions tab -- ensure Block all public access is Off. (3) Delete and re-upload files, ensuring you select the Read checkboxes for public access.
Method 2: Deploy with AWS Elastic Beanstalk
Now we are going to learn more about the AWS cloud platform services and see an alternative way to deploy your code. We will get an introduction into several core AWS services: EC2, Load Balancers, Auto Scaling Groups, and CloudWatch. Elastic Beanstalk bootstraps the deployment process for web applications.
Understanding Node.js and Express.js
Node.js is a JavaScript runtime for server-side applications. A runtime is an execution model -- a process that implements how to execute code. Node is a process that implements how to execute JavaScript code on a server, as opposed to a client like a web browser.
Express.js is a web application framework for Node.js. While Node gives us the server-side runtime environment where we can run JavaScript code, Express gives us a framework for serving web applications. When we deployed via S3, we told S3 the file name we wanted served. Now, Express will be where we configure what file we want served.
const express = require("express");
const path = require("path");
const app = express();
// Serve static files from the "public" folder
app.use(express.static(path.join(__dirname, "public")));
const port = 8080;
app.listen(port);
console.log("listening on port: " + port);
Let us break down the key line: app.use(express.static(path.join(__dirname, "public"))). The app.use() function tells Express we want to run some code. The express.static() function handles serving static files. And path.join(__dirname, "public") tells Express to grab the files from the public folder. All together: "When the browser requests the app, serve the static files from the public folder."
Testing Locally Before Deploying
In your terminal, navigate to the project folder and enter npm start. You should see the message listening on port: 8080. Open a browser and go to localhost:8080 to verify your project runs. Ensuring it works locally before going to AWS will help us debug if errors occur.
Deploying to Elastic Beanstalk
Create Elastic Beanstalk Application
Search for Elastic Beanstalk in AWS. Click Create Application. Set Platform to Node.js, Platform Branch to Node.js 14 running on 64bit Amazon Linux 2, and Application code to Upload your code.
Zip and Upload Your Code
Zip the contents of your project folder (NOT the folder itself). Click Upload and Deploy, select your zipped file. Wait for deployment logs to finish. Health status goes from red to orange to green.
Access Your Deployed Application
Once the health status is green, click the URL endpoint to view your project. Anyone in the world can now see your project with that link!
Important: Stop Resources to Avoid Charges
Be sure to terminate your EC2 Instance or delete your Elastic Beanstalk Application when you are done. If you do not, you will be charged for however long your application runs. Elastic Beanstalk creates EC2 instances, Load Balancers, and other resources that incur costs.
Understanding the Underlying Services
| Service | Purpose |
|---|---|
| EC2 (Elastic Compute Cloud) | Virtual servers/computers. Elastic Beanstalk launched an EC2 Instance to host your application. You can "spin up" servers quickly using EC2. |
| Load Balancer | Distributes incoming traffic across multiple EC2 targets. Provides a single access point. The Elastic Beanstalk endpoint actually points to the Load Balancer's DNS name. |
| Auto Scaling Group | Automatically scales EC2 instances based on criteria. Default: Desired 1, Min 1, Max 4. Scales out on network issues, scales in when stable. |
| CloudWatch | AWS monitoring service providing metrics for all resources. Auto Scaling Group uses CloudWatch metrics (e.g., NetworkOut) to determine scaling actions. |
Method 3: Deploy with AWS Lambda (Serverless)
For our final method, we are going to deploy our code to a serverless environment. Serverless infrastructures are becoming increasingly popular and preferred over dedicated servers. Not only is the serverless route more cost-effective, it lends itself to a different software architectural approach: microservices.
What is Serverless?
Serverless does NOT mean there is no server. There has to be one, since a server is a computer and we need our program running on a computer. Serverless means that for you and me in all practicality there is no server, but in reality there is. You never see the server and have no configurations to set for it. AWS owns and manages the server; you just hand over the code.
Less Configuration
No EC2, Load Balancers, or Auto Scaling Groups to configure. Just specify the runtime and AWS handles everything else.
Cheaper - Pay Per Use
EC2 costs money for as long as it runs. Lambda only charges for the time your code actually runs. No traffic = no cost.
Microservice Architecture
Serverless enables breaking applications into smaller sub-applications. Each microservice can be updated independently.
Automatic Scaling
Lambda automatically scales from zero to thousands of concurrent executions without any configuration from you.
Step 1: Create the Lambda Function
Create Lambda Function
Go to the AWS Lambda Management Console. Click Create Function. Keep Author from scratch selected. Enter a function name, select the Node.js runtime, and click Create Function.
Step 2: Prepare Your HTML for Lambda
Because of how Lambda serves content, you must inline your CSS and JS directly into index.html rather than linking to external files.
Inline CSS and JavaScript
Replace the <link href="styles.css"/> with <style> tags and paste all CSS inside. Remove the src="main.js" from the script tag and paste all JS code between the <script> tags at the bottom of index.html.
Step 3: Write the Lambda Handler
The Lambda function needs to read the index.html file and return it as an HTTP response. Here is the handler code:
const fs = require('fs');
const path = require('path');
exports.handler = async (event) => {
const htmlPath = path.join(__dirname, 'index.html');
const html = fs.readFileSync(htmlPath, 'utf-8');
return {
statusCode: 200,
headers: {
'Content-Type': 'text/html',
},
body: html,
};
};
In the Lambda code editor, create a new file called index.html and paste your inlined HTML content. The handler reads this file and returns it as an HTTP response with the correct Content-Type header.
Step 4: Configure API Gateway
Lambda functions need a trigger to be accessible over the internet. API Gateway provides this by creating an HTTP endpoint that invokes your Lambda function.
Add API Gateway Trigger
In the Lambda console, go to the Configuration tab, then Triggers. Click Add trigger, select API Gateway, choose Create a new API, select HTTP API for the API type, and set Security to Open for public access.
Test the Deployed Endpoint
Once the trigger is configured, API Gateway provides a URL endpoint. Open this URL in your browser to see your deployed project. The Lambda function serves your inlined HTML whenever someone visits the endpoint.
Comparing All Three Deployment Methods
| Feature | S3 | Elastic Beanstalk | Lambda + API Gateway |
|---|---|---|---|
| Complexity | Lowest - just upload files | Medium - requires Node/Express setup | Medium - requires inlining CSS/JS |
| Cost | Very low - pay per storage/request | Higher - EC2 runs continuously | Lowest - pay per invocation only |
| Server Management | None - fully managed | Managed by Elastic Beanstalk | None - fully serverless |
| Scaling | Automatic and unlimited | Auto Scaling Group (configurable) | Automatic and unlimited |
| Best For | Static websites and front end projects | Full web applications with backend logic | Serverless APIs and microservices |
| AWS Services Learned | S3, bucket policies, static hosting | EC2, Load Balancer, Auto Scaling, CloudWatch | Lambda, API Gateway, serverless architecture |
Additional S3 Use Cases
Configuring an S3 bucket to be a website endpoint is just one of many ways to use S3. Here are additional use cases worth knowing about.
Data Store for Applications
Store data like JSON files that applications can pull from. For example, the quotes on a Random Quote Machine could be stored in S3 as a JSON file, and the front end could request them. S3 acts as a central repository accessible by multiple apps.
Archive with S3 Glacier
Use the Glacier option of S3 to archive objects that you do not anticipate accessing frequently. This saves money compared to the standard S3 bucket configuration for long-term storage.
Application Logging
Save logs from a running application to an S3 bucket. If there is a bug, you can inspect those logs to help identify the source of the problem. This is a common pattern for debugging production issues.
AWS Services Quick Reference
| Service | Full Name | What It Does |
|---|---|---|
| S3 | Simple Storage Service | Object storage with unlimited capacity. Can host static websites. |
| EC2 | Elastic Compute Cloud | Virtual servers that you can launch and configure quickly. |
| Elastic Beanstalk | AWS Elastic Beanstalk | Platform-as-a-Service that bootstraps web application deployment. |
| Lambda | AWS Lambda | Serverless compute. Run code without provisioning servers. |
| API Gateway | Amazon API Gateway | Creates HTTP endpoints to trigger Lambda functions over the internet. |
| CloudWatch | Amazon CloudWatch | Monitoring and observability service with metrics and dashboards. |
Frequently Asked Questions
What does "deploy" mean in web development?
Deploy means taking your code from a local environment (your computer or CodePen editor) and putting it on a server that is networked for the world to access your site. Instead of sharing a CodePen URL, you share a live website URL.
Which AWS deployment method should I use for my project?
For static front end projects (HTML/CSS/JS), S3 is the simplest and cheapest option. For applications with backend logic, use Elastic Beanstalk. For serverless APIs and microservices, use Lambda with API Gateway.
What is the difference between serverless and EC2?
EC2 requires you to configure and manage virtual servers that run continuously and cost money 24/7. Serverless (Lambda) means AWS manages the server entirely -- you just upload code and pay only for execution time. No server configuration needed.
Why do S3 bucket names need to be globally unique?
S3 bucket names are part of the URL endpoint (bucket-name.s3.region.amazonaws.com). Since these URLs must be unique across all AWS accounts worldwide, bucket names must also be globally unique with no spaces allowed.
How much does it cost to deploy a project on AWS?
S3 hosting costs fractions of a cent per month for small projects. Lambda is free within the free tier (1 million requests/month). Elastic Beanstalk costs more since it runs EC2 instances continuously. Always terminate resources when done to avoid charges.
Need Help with AWS Cloud Deployment?
Our experts can help you design cloud architectures, deploy applications, and optimize your AWS infrastructure for performance and cost.