Prerequisites

The front-end source code available here. I am using Vanilla JavaScript so that it would be easy for anyone to get started. I will put the followup updates on React and Angular in the future.

Copy the front-end code to an S3 bucket in your account. Make sure you Do not block public acccess of the bucket. Once the code is moved, apply the Public Read policy as mentioned below.

WebApp Bucket Policy for Public Access

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<your S3 bucket>/*"
        }
    ]
}

Create another S3 bucket to store all the file uploads. Update the CORS configurations for the files bucket as per below.

Keep your files buckets as private and secure. You can block public access of the bucket to make sure no accidental configuration override.

Files Bucket CORS Configuration

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>ETag</ExposeHeader>
</CORSRule>
</CORSConfiguration>

Make sure you create Web Hosting and Document Storage buckets in the same region.

Quick test

If you open the application in your browser now, it will show that the Cognito Pool and Client is not configured.

PreviousWhy Serverless!!NextAuthentication

Last updated 4 years ago

Was this helpful?