{"id":13687273,"url":"https://github.com/qoomon/aws-s3-bucket-browser","last_synced_at":"2025-10-03T14:52:21.999Z","repository":{"id":41102793,"uuid":"221520862","full_name":"qoomon/aws-s3-bucket-browser","owner":"qoomon","description":"Single page application to browse AWS S3 bucket content","archived":false,"fork":false,"pushed_at":"2025-02-27T09:45:45.000Z","size":356,"stargazers_count":294,"open_issues_count":3,"forks_count":91,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-05-16T05:04:15.552Z","etag":null,"topics":["aliyun-oss","aws","aws-s3","browser","bucket","bulma","directory","directory-listing","explorer","folder","google-storage","html","index","list","listing","s3","s3-bucket","satic","vue","website"],"latest_commit_sha":null,"homepage":"https://qoomon.github.io/aws-s3-bucket-browser/index.html?bucket=https://s3.amazonaws.com/spacenet-dataset#","language":"HTML","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/qoomon.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,"publiccode":null,"codemeta":null}},"created_at":"2019-11-13T18:00:27.000Z","updated_at":"2025-05-13T12:52:09.000Z","dependencies_parsed_at":"2024-01-14T15:21:31.050Z","dependency_job_id":"93b66205-2aa9-4389-92d5-e91f66e33e6a","html_url":"https://github.com/qoomon/aws-s3-bucket-browser","commit_stats":{"total_commits":217,"total_committers":12,"mean_commits":"18.083333333333332","dds":0.07373271889400923,"last_synced_commit":"938e2e5cee972af1591208c1a276e5ce3f512775"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qoomon%2Faws-s3-bucket-browser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qoomon%2Faws-s3-bucket-browser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qoomon%2Faws-s3-bucket-browser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qoomon%2Faws-s3-bucket-browser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qoomon","download_url":"https://codeload.github.com/qoomon/aws-s3-bucket-browser/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254471061,"owners_count":22076585,"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":["aliyun-oss","aws","aws-s3","browser","bucket","bulma","directory","directory-listing","explorer","folder","google-storage","html","index","list","listing","s3","s3-bucket","satic","vue","website"],"created_at":"2024-08-02T15:00:51.399Z","updated_at":"2025-10-03T14:52:21.816Z","avatar_url":"https://github.com/qoomon.png","language":"HTML","funding_links":[],"categories":["aws"],"sub_categories":[],"readme":"# AWS S3 Bucket Browser [![starline](https://starlines.qoo.monster/assets/qoomon/aws-s3-bucket-browser)](https://github.com/qoomon/starlines)\n\n![-](favicon.ico)\n\nSingle HTML file to browse AWS S3 buckets\n## [Demo](https://qoomon.github.io/aws-s3-bucket-browser/index.html?bucket=https://s3.amazonaws.com/spacenet-dataset#)\n\n## Features\n* Compatible Providers: [![GCP](https://www.google.com/s2/favicons?sz=16\u0026domain=cloud.google.com)](https://cloud.google.com) [![IBM](https://www.google.com/s2/favicons?sz=16\u0026domain=ibm.com)](https://ibm.com/cloud) [![DigitalOcean](https://www.google.com/s2/favicons?sz=161\u0026domain=digitalocean.com)](https://digitalocean.com)\n* List all files in a table view\n* Treat and display `/` in keys as folders\n* Render preview for Markdown files\n* Show `Install` button for `manifest.plist` on iOS devices\n\n## Installation\n\n#### Self-Hosted\n\u003cdetails\u003e\n\u003csummary\u003eClick me\u003c/summary\u003e\n \n* Just download [`index.html`](index.html) and upload it to your bucket.\n  * Adjust [config](index.html#L8-L37) within `index.html` if needed, e.g.\n    ```js\n    const config = {\n      title: 'Bucket Browser', // prefix value with `HTML\u003e ` to render as html, see subtitle\n      subtitle: 'HTML\u003emade with ♥ by \u003cb\u003e\u003ca href=\"https://qoo.monster\"\u003eqoomon\u003c/a\u003e\u003c/b\u003e', // prefix value with `HTML\u003e ` to render as html\n      logo: 'https://qoomon.github.io/aws-s3-bucket-browser/logo.png',\n      favicon: 'https://qoomon.github.io/aws-s3-bucket-browser/favicon.ico',\n      primaryColor: '#167df0',\n      \n      bucketUrl: undefined,\n      // If bucketUrl is undefined, this script tries to determine bucket Rest API URL from this file location itself.\n      //   This will only work for locations like these\n      //   * https://s3.amazonaws.com/BUCKET-NAME/index.html\n      //   * https://s3.BUCKET-REGION.amazonaws.com/BUCKET-NAME/index.html\n      //   * http://BUCKET-NAME.s3-website-BUCKET-REGION.amazonaws.com/index.html\n      //   * https://storage.googleapis.com/BUCKET-NAME/index.html\n      //   * https://BUCKET-NAME.s3-web.BUCKET-REGION.cloud-object-storage.appdomain.cloud/\n      //   * https://BUCKET-NAME.BUCKET-REGION.digitaloceanspaces.com\n      //   * https://BUCKET-NAME.BUCKET-REGION.cdn.digitaloceanspaces.com\n      // If bucketUrl is set manually, ensure this is the bucket Rest API URL, e.g.\n      //   * https://s3.amazonaws.com/BUCKET-NAME\n      //   * https://storage.googleapis.com/BUCKET-NAME\n      //   The URL should return an XML document with \u003cListBucketResult\u003e as root element.\n      rootPrefix: undefined, // e.g. 'subfolder/'\n      keyExcludePatterns: [/^index\\.html$/], // matches againt object key relative to rootPrefix\n      pageSize: 50,\n      \n      bucketMaskUrl: undefined, \n      // If bucketMaskUrl is set file urls will be changed from ${bucketUrl}/${file} to ${bucketMaskUrl}/${file}\n      //   bucketMaskUrl: 'https://example.org'\n      //     =\u003e https://example.org/foo/bar.txt \n      //   bucketMaskUrl: document.location.origin\n      //     =\u003e ${document.location.origin}/foo/bar.txt \n      \n      defaultOrder: 'name-asc' // (name|size|dateModified)-(asc|desc)\n    }\n    ```\n* ##### ⚠️ Ensure Bucket Permissions\n  * Go to `https://s3.console.aws.amazon.com/s3/buckets/\u003cYOUR BUCKET NAME\u003e/?tab=permissions`\n  * Grant public read permission by `Access Control List` or `Bucket Policy`\n    * Access Control List\n      * Enable `List objects` for `Everyone`\n    * Bucket Policy\n      ```json\n      {\n          \"Version\": \"2012-10-17\",\n          \"Statement\": [\n              {\n                  \"Sid\": \"PublicRead\",\n                  \"Principal\": \"*\",\n                  \"Effect\": \"Allow\",\n                  \"Action\": [\n                      \"s3:ListBucket\",\n                      \"s3:GetObject\"\n                  ],\n                  \"Resource\": [\n                      \"arn:aws:s3:::\u003cYOUR BUCKET NAME\u003e\",\n                      \"arn:aws:s3:::\u003cYOUR BUCKET NAME\u003e/*\"\n                  ]\n              }\n          ]\n      }\n      ```\n* ##### ⚠️ Ensure Bucket CORS\n  * Depending on your setup you may need to ensure following `CORS Configuration`\n  * Go to `https://s3.console.aws.amazon.com/s3/buckets/\u003cYOUR BUCKET NAME\u003e/?tab=permissions`\n  * Grant Cross Origin Access by following `CORS Configuration`, replace `http://www.example.com` by your address of bucket browser `index.html` \n    * e.g `http://example.s3-website-eu-central-1.amazonaws.com/index.html`\n    ```json\n    [\n      {\n          \"AllowedHeaders\": [\n              \"*\"\n          ],\n          \"AllowedMethods\": [\n              \"GET\"\n          ],\n          \"AllowedOrigins\": [\n              \"http://www.example.com\",\n              \"https://BUCKET-NAME.s3.amazonaws.com\",\n              \"https://s3.BUCKET-REGION.amazonaws.com/BUCKET-NAME\",\n          ],\n          \"ExposeHeaders\": [\n              \"x-amz-server-side-encryption\",\n              \"x-amz-request-id\",\n              \"x-amz-id-2\"\n          ],\n          \"MaxAgeSeconds\": 3000\n      }\n    ]\n    ```\n* Open `\u003cYOUR BUCKET URL\u003e/index.html` in your browser.\n  \n\u003c/details\u003e\n \n#### Hosted\n\u003cdetails\u003e\n\u003csummary\u003eClick me\u003c/summary\u003e\n \n* ##### ⚠️ Ensure Bucket Permissions\n  * see [Self-Hosted](#self-hosted)\n* ##### ⚠️ Ensure Bucket CORS\n  * see [Self-Hosted](#self-hosted)\n* Open hosted `index.html` in your browser and provide bucket url as `bucket` request parameter\n  * `${INDEX_FILE_LOCATION}?bucket=${S3_BUCKET_URL}` \n  * e.g. [`https://qoomon.github.io/aws-s3-bucket-browser/index.html?bucket=https://s3.eu-west-1.amazonaws.com/data.openspending.org`](https://qoomon.github.io/aws-s3-bucket-browser/index.html?bucket=https://s3.eu-west-1.amazonaws.com/data.openspending.org)\n\n\u003c/details\u003e\n\n### CloudFront Setup\n\u003cdetails\u003e\n\u003csummary\u003eClick me\u003c/summary\u003e\n \nIf you use CloudFront in front of your S3 bucket ensure following CloudFront settings.\n- Allowed/Cached HTTP Methods: `GET`, `HEAD`, `OPTIONS`\n- Cached Based on Selected Headers: `Whitelist`\n  - `Access-Control-Request-Headers`\n  - `Access-Control-Request-Method`\n  - `Origin`\n- Query String Forwarding and Caching: `Forward all`\n\n\u003c/details\u003e\n\n### IBM Cloud Object Storage Setup\n\u003cdetails\u003e\n\u003csummary\u003eClick me\u003c/summary\u003e\n \nIBM Cloud Object storage only supports virtual host-style addressing, i.e. `https://\u003cbucket-name\u003es3-web.\u003cregion\u003e.cloud-object-storage.appdomain.cloud/` for static website hosting. Otherwise follow the instructions\nin this [tutorial](https://cloud.ibm.com/docs/cloud-object-storage?topic=cloud-object-storage-static-website-tutorial) to configure your bucket. In addition, you may need to [configure CORS](https://cloud.ibm.com/docs/cloud-object-storage?topic=cloud-object-storage-curl#curl-new-cors) for your bucket.\n\n```xml\n\u003cCORSConfiguration\u003e\n  \u003cCORSRule\u003e\n      \u003cAllowedOrigin\u003e*\u003c/AllowedOrigin\u003e\n      \u003cAllowedMethod\u003eGET\u003c/AllowedMethod\u003e\n      \u003cAllowedHeader\u003e*\u003c/AllowedHeader\u003e\n  \u003c/CORSRule\u003e\n\u003c/CORSConfiguration\u003e\n```\n\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqoomon%2Faws-s3-bucket-browser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqoomon%2Faws-s3-bucket-browser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqoomon%2Faws-s3-bucket-browser/lists"}