How to Host Your Website in aws S3 and Local Host

How to Host Your Website on aws S3 and Localhost

by

How to Host Your Website on aws S3 and Localhost + Test Amazon Connect Chat Widget Without a Live Website

How to Host Your Website on aws S3 and Localhost: If you’re looking for a simple and cost-effective way to host a static website and test the Amazon Connect Chat Widget without a live domain, this guide is for you! Below, we’ll walk through the steps to:

✅ Host a static website on AWS S3 (free tier available)
✅ Set the correct S3 bucket policy for public access
✅ Run the website locally for testing
✅ Embed and test the Amazon Connect Chat Widget

For a detailed visual walkthrough, check out below YouTube video.

Video: How to Host Your Website on aws S3 and Localhost

Step 1: Hosting a Static Website on AWS S3

AWS S3 is an excellent choice for hosting static websites (HTML, CSS, JS) with high availability and low cost.

1.1. Create an S3 Bucket

  1. Log in to your AWS Management Console.
  2. Navigate to Amazon S3 and click “Create bucket.”
  3. Enter a unique bucket name (e.g., my-static-website).
  4. Choose the region closest to your audience.
  5. Uncheck “Block all public access” (since we need public access for website hosting).
  6. Acknowledge the warning and click “Create bucket.”

1.2. Enable Static Website Hosting

  1. Open your newly created bucket.
  2. Go to the “Properties” tab.
  3. Scroll down to “Static website hosting” and click “Edit.”
  4. Select “Enable” and specify:
    • Index document: index.html
    • (Optional) Error document: error.html
  5. Click “Save changes.”

1.3. Set the Correct Bucket Policy (Important!)

To allow public access to your website, you need to attach a bucket policy:

  1. Go to the “Permissions” tab.
  2. Under “Bucket Policy,” click “Edit.”
  3. Paste the following JSON policy (replace your-bucket-name with your actual bucket name):
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your-bucket-name/*"
        }
    ]
}
  1. Click “Save changes.”

Now, your bucket allows public read access to all objects inside it.

1.4. Upload Your Website Files

  1. Go to the “Objects” tab.
  2. Click “Upload” and add your website files (index.html, CSS, JS, etc.).
  3. After uploading, select all files and click “Actions” > “Make public.”

1.5. Access Your Website

Once uploaded, go back to “Properties” > “Static website hosting” and find your Bucket website endpoint (e.g., http://my-static-website.s3-website-us-east-1.amazonaws.com).

Open this URL in a browser—your website is now live!

Step 2: Hosting & Testing Locally

If you don’t want to upload files to S3 yet, you can test your website locally.

2.1. Using a Local Server (Python, Node, or Live Server Extension)

  • Python (Simple HTTP Server): 
    python -m http.server 8000

    Then open http://localhost:8000 in your browser.

  • VS Code (Live Server Extension):
    Install the “Live Server” extension, right-click your index.html, and select “Open with Live Server.”

Your website will run on http://localhost:8000 (or similar).

Step 3: Testing Amazon Connect Chat Widget Without a Live Website

Amazon Connect’s chat widget requires a web page to function, but you can test it on localhost or your S3-hosted site before going live.

3.1. Get the Chat Widget Code from Amazon Connect

  1. Go to Amazon Connect Console > Your instance > “Channels” > “Amazon Connect Chat.”
  2. Click “Add new chat widget.”
  3. Configure the chat (e.g., name, flow, appearance).
  4. Copy the JavaScript snippet provided.

3.2. Embed the Widget in Your Website

Paste the Connect chat code just before the closing </body> tag in your index.html:

<script>
  // Amazon Connect Chat Widget Code
  (function(w, d, x, id){
    s=d.createElement('script');
    s.src='https://dxxxxxx.awsapps.com/connect/chat/js/amazon-connect-chat.js';
    s.async=1;
    s.id=id;
    d.getElementsByTagName('head')[0].appendChild(s);
    w[x] = w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', 'chat-widget-id');
  amazon_connect('styles', { /* Custom styles if needed */ });
  amazon_connect('snippetId', 'YOUR_SNIPPET_ID');
</script>

3.3. Test the Chat Widget

  • On Localhost: Open your local server (http://localhost:8000) and check if the chat widget appears.
  • On S3: Visit your S3 website URL and verify the chat loads correctly.

If the widget doesn’t appear:

  • Ensure the S3 bucket is public.
  • Check the browser console (F12) for errors.
  • Verify the snippet ID and region in the widget code.

Final Thoughts

Now you can:
✔ Host a static website on AWS S3 for free (or low cost).
✔ Test locally before deploying.
✔ Embed and test the Amazon Connect Chat Widget without a live domain.

For a full step-by-step demo, check out my YouTube tutorial here (insert your video link).

Have questions? Drop them in the comments! 🚀