Repository files navigation

Simple explorer for Amazon S3 buckets built with React.

Suppose you have contents in an Amazon S3 bucket which you would like to makeaccessible to either non-technical people or people who don't have access to anAmazon S3 console. You are looking for a simple way without building a customapplication for the purpose. That's where S3 Browser kicks in. It's asingle-page (and single-file) application using AWS SDK to list the bucket'scontents. It relies on the bucket to have static website hosting enabled foractually accessing the contents. S3 Browser is designed, though not required, tobe hosted from the same bucket as well.

The instructions below provide basic configuration steps for an S3 bucket namedwww.example.com.

1. Enable static website hosting for the bucket and configureindex.html asthe index document.

2. Disable block public access settings and add the following bucket policy togrant public read access:

   {"Version":"2012-10-17","Statement": [    {"Effect":"Allow","Principal":"*","Action":"s3:GetObject","Resource":"arn:aws:s3:::www.example.com/*"    }  ]}

3. Add the following CORS configuration to enable AWS SDK API calls:

   [  {"AllowedHeaders": ["*"],"AllowedMethods": ["GET"],"AllowedOrigins": ["http://www.example.com"],"ExposeHeaders": []  }]

   This assumes that S3 Browser is hosted from the same bucket and accessedusing a CNAME recordwww.example.com for the website endpoint. If this isnot the case, change the value in anAllowedOrigins element accordingly orset it to* to allow access from any origin.

4. Create an IAM user with programmatic access and attach the following inlinepolicy to grant the user permission to list the bucket's contents:

   {"Version":"2012-10-17","Statement": [    {"Effect":"Allow","Action":"s3:ListBucket","Resource":"arn:aws:s3:::www.example.com"    }  ]}

Start by cloning the repository and installing the dependencies:

git clone https://github.com/tlinhart/s3-browser.gitcd s3-browsernvm installnpm install

Next, rename the.env.example file to.env and set the environmentvariables. This will provide configuration for the application.

To start the webpack development server with Hot Module Replacement (HMR)enabled, run

npm run start

and open the browser athttp://localhost:8080.

To build the application for production, run

npm run build

This will bundle everything into a single distributable filedist/index.htmlready to be uploaded to the S3 bucket. To test the production build, run

npm run serve

and point the browser tohttp://localhost:3000.

To format the files with Prettier, issue

npm run format

To lint the code with ESLint and automatically try to fix the issues, run

npm run lint:fix

To run the tests with Jest test runner, issue

npm runtest

By default, Jest runs in silent mode which prevents console output during thetests. To allow it (e.g. for debugging), run

npm runtest -- --no-silent

There is a demo of the application available athttp://s3-browser-demo.linhart.tech where S3 Browser is hosted from the samebucket as the contents (obtained fromgetsamplefiles.com). Thewhole stack is managed with Pulumi IaC and deployed using GitHub Actions.