{"id":23910782,"url":"https://github.com/tlinhart/s3-browser","last_synced_at":"2025-04-11T12:14:15.238Z","repository":{"id":36970046,"uuid":"462470033","full_name":"tlinhart/s3-browser","owner":"tlinhart","description":"Simple explorer for Amazon S3 buckets","archived":false,"fork":false,"pushed_at":"2025-04-09T17:26:31.000Z","size":12141,"stargazers_count":55,"open_issues_count":8,"forks_count":13,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T18:38:55.761Z","etag":null,"topics":["chakra-ui","react","react-query","react-router","s3-browser","s3-client"],"latest_commit_sha":null,"homepage":"http://s3-browser-demo.linhart.tech","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tlinhart.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-02-22T20:50:54.000Z","updated_at":"2025-04-05T08:04:18.000Z","dependencies_parsed_at":"2023-10-05T08:46:58.421Z","dependency_job_id":"2574e3c3-1494-4f66-bcb9-42f0e45959b1","html_url":"https://github.com/tlinhart/s3-browser","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tlinhart%2Fs3-browser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tlinhart%2Fs3-browser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tlinhart%2Fs3-browser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tlinhart%2Fs3-browser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tlinhart","download_url":"https://codeload.github.com/tlinhart/s3-browser/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248399061,"owners_count":21097295,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chakra-ui","react","react-query","react-router","s3-browser","s3-client"],"created_at":"2025-01-05T07:20:10.037Z","updated_at":"2025-04-11T12:14:15.220Z","avatar_url":"https://github.com/tlinhart.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# S3 Browser\n\n[![CI workflow status][badge]][actions]\n\n[badge]: https://github.com/tlinhart/s3-browser/actions/workflows/ci.yml/badge.svg\n[actions]: https://github.com/tlinhart/s3-browser/actions\n\nSimple explorer for Amazon S3 buckets built with React.\n\n## Motivation and Design\n\nSuppose you have contents in an Amazon S3 bucket which you would like to make\naccessible to either non-technical people or people who don't have access to an\nAmazon S3 console. You are looking for a simple way without building a custom\napplication for the purpose. That's where S3 Browser kicks in. It's a\nsingle-page (and single-file) application using AWS SDK to list the bucket's\ncontents. It relies on the bucket to have static website hosting enabled for\nactually accessing the contents. S3 Browser is designed, though not required, to\nbe hosted from the same bucket as well.\n\n## S3 Bucket and IAM Setup\n\nThe instructions below provide basic configuration steps for an S3 bucket named\n`www.example.com`.\n\n1. Enable static website hosting for the bucket and configure `index.html` as\n   the index document.\n1. Disable block public access settings and add the following bucket policy to\n   grant public read access:\n\n   ```json\n   {\n     \"Version\": \"2012-10-17\",\n     \"Statement\": [\n       {\n         \"Effect\": \"Allow\",\n         \"Principal\": \"*\",\n         \"Action\": \"s3:GetObject\",\n         \"Resource\": \"arn:aws:s3:::www.example.com/*\"\n       }\n     ]\n   }\n   ```\n\n1. Add the following CORS configuration to enable AWS SDK API calls:\n\n   ```json\n   [\n     {\n       \"AllowedHeaders\": [\"*\"],\n       \"AllowedMethods\": [\"GET\"],\n       \"AllowedOrigins\": [\"http://www.example.com\"],\n       \"ExposeHeaders\": []\n     }\n   ]\n   ```\n\n   This assumes that S3 Browser is hosted from the same bucket and accessed\n   using a CNAME record `www.example.com` for the website endpoint. If this is\n   not the case, change the value in an `AllowedOrigins` element accordingly or\n   set it to `*` to allow access from any origin.\n\n1. Create an IAM user with programmatic access and attach the following inline\n   policy to grant the user permission to list the bucket's contents:\n\n   ```json\n   {\n     \"Version\": \"2012-10-17\",\n     \"Statement\": [\n       {\n         \"Effect\": \"Allow\",\n         \"Action\": \"s3:ListBucket\",\n         \"Resource\": \"arn:aws:s3:::www.example.com\"\n       }\n     ]\n   }\n   ```\n\n## Usage\n\nStart by cloning the repository and installing the dependencies:\n\n```sh\ngit clone https://github.com/tlinhart/s3-browser.git\ncd s3-browser\nnvm install\nnpm install\n```\n\nNext, rename the `.env.example` file to `.env` and set the environment\nvariables. This will provide configuration for the application.\n\n### Development Server\n\nTo start the webpack development server with Hot Module Replacement (HMR)\nenabled, run\n\n```sh\nnpm run start\n```\n\nand open the browser at `http://localhost:8080`.\n\n### Production Build\n\nTo build the application for production, run\n\n```sh\nnpm run build\n```\n\nThis will bundle everything into a single distributable file `dist/index.html`\nready to be uploaded to the S3 bucket. To test the production build, run\n\n```sh\nnpm run serve\n```\n\nand point the browser to `http://localhost:3000`.\n\n### Formatting, Linting and Tests\n\nTo format the files with Prettier, issue\n\n```sh\nnpm run format\n```\n\nTo lint the code with ESLint and automatically try to fix the issues, run\n\n```sh\nnpm run lint:fix\n```\n\nTo run the tests with Jest test runner, issue\n\n```sh\nnpm run test\n```\n\nBy default, Jest runs in silent mode which prevents console output during the\ntests. To allow it (e.g. for debugging), run\n\n```sh\nnpm run test -- --no-silent\n```\n\n## Demo\n\nThere is a demo of the application available at\nhttp://s3-browser-demo.linhart.tech where S3 Browser is hosted from the same\nbucket as the contents (obtained from [getsamplefiles.com][getsamplefiles]). The\nwhole stack is managed with Pulumi IaC and deployed using GitHub Actions.\n\n[getsamplefiles]: https://getsamplefiles.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftlinhart%2Fs3-browser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftlinhart%2Fs3-browser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftlinhart%2Fs3-browser/lists"}