Bucket.json

{
	"Version": "2008-10-17",
	"Id": "Policy1397632521960",
	"Statement": [
		{
			"Sid": "Stmt1397633323327",
			"Effect": "Allow",
			"Principal": {
				"AWS": "*"
			},
			"Action": "s3:GetObject",
			"Resource": "arn:aws:s3:::YOUR_BUCKET_NAME_HERE/*"
		}
	]
}

CORS.xml

<?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>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

S3_Development_Bucket_Configuration.md

1. Create an S3 bucket. It can be called whatever you want. There are guides for this.
2. Go to Properties -> Static Web Hosting and then "Enable website hosting". Then enter a value for the "Index Document". "index.html" is fine.
3. Then, in Permissions -> Add CORS Configuration (Edit CORS Configuration if you've added a CORS configuration previously), paste in CORS.xml. This is for development only, as it allows CORS from any origin.
4. Then, in Permissions -> Add Bucket Configuration (Edit Bucket Configuration if you've added a Bucket configuration previously), paste in Bucket.json. This makes all files public by default.
5. Locate your AWS key and Secret Key. You can find this in the top AWS navigation under your name -> Security Credentials.
6. Add the following lines to your .env file:

AWS_ACCESS_KEY=<your-aws-access-key>
AWS_SECRET_KEY=<your-aws-secret-key>
S3_BUCKET=<your-s3-bucket>

7. Restart the app if it's running, and you should be good to go.

hi @catarak, thanks for this! just setting this up for myself, I had a couple notes:

• for step #2, it requires an index document field
• for step #3, the first time the button actually says "add bucket policy"
• for step #3 this field "Resource": "arn:aws:s3:::p5js-webeditor/*" needs to match your bucket name. maybe better to post the bucket.json with line "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"?

wow after MONTHS I finally corrected this gist 🎉

hey @catarak! i am assuming this needs an update, the permissions tab in aws has changed significantly since.

hey @catarak! i am assuming this needs an update, the permissions tab in aws has changed significantly since.

You're probably right! Feel free to suggest changes if you want to work on this.

yes, here are the changes so far:

• for step #2, there's also an error.html in the field for error document.
• for step #4, it's now called bucket policy, adding the json is the same.

the rest is fine i guess, but i did turn off the "block public access", just in case.

Wanted to add here that I think step #2 might not be required to set this up anymore, particularly for testing uploading images! It seems like its website endpoints are only equipped for GET or HEAD requests. I kept "enable web hosting" off and was able to get it running.