# How to Deploy a Word Counter Application to AWS S3 Bucket

wise4rmgod

Nwokocha wisdom maduabuchi

Posted on March 6, 2024

# How to Deploy a Word Counter Application to AWS S3 Bucket

AWS S3 is a cloud storage service provided by Amazon Web Services. It is a simple storage service that offers scalability, security, and performance for storing and retrieving data.

S3 allows developers to host static websites, store and retrieve data anytime, and manage data using a web interface.

You’ll deploy a word counter application using an AWS S3 bucket. You can access this application in a web browser at the end of this article.

What is an S3 Bucket?

Amazon Simple Storage Service S3 is a scalable object storage service offered by AWS. It allows you to store and retrieve data from anywhere on the web.

An S3 bucket is essentially a container for objects stored in S3. It serves as the top-level folder in which you store your files.

S3 is an object storage service that stores data as objects in containers called buckets. An object can be any kind of file: a text file, an image, a video, etc.

Project Overview

This project will use the AWS console to create an S3 bucket and deploy a word counter application to the bucket.

The word counter application contains HTML, CSS, and JavaScript files. The application will count the number of words in a given text.

Once the bucket is created, you'll upload the Word Counter application files to it and make it public to access it using a web browser.

Prerequisites

This tutorial assumes that you have an AWS account and are familiar with the AWS Management Console. Every other step will be explained in detail.

Application setup

This word counter app can be found on GitHub. Clone the repository to your local machine using the following command:

git clone https://github.com/Aahil13/Word-counter.git
Enter fullscreen mode Exit fullscreen mode

The word counter application contains the following files:

  • index.html: The main HTML file that contains the structure of the application.
  • style.css: The CSS file that contains the styles for the application.
  • index.js: The JavaScript file that contains the logic for the word counter application.
  • README.md: The README file that contains the instructions for running the application.
  • Dockerfile: The Dockerfile that contains the instructions for building the Docker image.
  • Favicon folder: The folder that contains the favicon for the application.

Step 1: Create an S3 Bucket

To create an S3 bucket, follow these steps:

  1. Open the AWS Management Console and navigate to the S3 service.

  2. Click the Create bucket button to create a new bucket.

  3. Enter a unique name for your bucket and select the region where you want to create it. Then click on the Create bucket button to create the bucket.

Figure 1: Enter a unique name for your bucket.

  1. Once the bucket is created, click on the bucket name to open the bucket.

Figure 2: Bucket created.

Step 2: Configure Bucket for Static Website Hosting

To configure the bucket for static website hosting, follow these steps:

  1. Click on the Properties tab and then click on the Static website hosting card.

  2. Click on Edit and select the Enable option. Enter the name of the index document (e.g, index.html) and click on the Save changes button to save the changes.

Figure 3: Configure the bucket for static website hosting.

Step 3: Make the Bucket Public

To make the bucket public, follow these steps:

  1. On the Permissions tab, click on the Block public access button and then click on the Edit button.

Figure 4: Block public access.

  1. Uncheck the Block all public access option and click on the Save changes button.

Figure 5: Uncheck the block-all public access option.

  1. Still on the Permissions tab, click on the Bucket Policy button.

  2. Click Edit and enter the following bucket policy to make the bucket public. Replace your-bucket-name with the name of your bucket.

   {
     "Version": "2012-10-17",
     "Statement": [
       {
         "Sid": "PublicReadGetObject",
         "Effect": "Allow",
         "Principal": "*",
         "Action": "s3:GetObject",
         "Resource": "arn:aws:s3:::your-bucket-name/*"
       }
     ]
   }
Enter fullscreen mode Exit fullscreen mode

Click on the Save changes button to save the bucket policy.

Figure 6: Bucket policy.

Step 4: Upload Application Files to the Bucket

To upload the application files to the bucket, follow these steps:

  1. On the Objects tab, click on the Upload button to upload the application files to the bucket.

Figure 7: Upload the application files to the bucket.

  1. Click the Add files button and select the application files from your local machine. Then, click on Add folder to upload the favicon folder.

Figure 8: Add files to the bucket.

  1. Click the Upload button to upload the files to the bucket.

Figure 9: Application files uploaded to the bucket.

Step 5: Access the Application

To access the application, follow these steps:

  1. Open the bucket and click on the Properties tab.

  2. Click on the Static website hosting card and copy the endpoint URL.

Figure 10: Copy the endpoint URL.

  1. Open a web browser and paste the endpoint URL in the address bar.

Figure 11: Word counter application.

Clean Up

After deploying and playing around with your application, you can delete the S3 bucket to avoid incurring unnecessary charges.

To delete the S3 bucket, follow these steps:

  1. On the word-counter bucket, select all the files and click on the Delete button to delete the files.

  2. Afterward, go back to your bucket and click the Delete button to delete the bucket.

Conclusion

In this article, you learned about AWS S3 and how to deploy a word counter application to an S3 bucket.

You created an S3 bucket, configured it for static website hosting, uploaded the application files to the bucket, and accessed the application using a web browser.

This is a simple and fast way of hosting static websites on AWS!

💖 💪 🙅 🚩
wise4rmgod
Nwokocha wisdom maduabuchi

Posted on March 6, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related