SimplGy / s3-txt-ui

A web and mobile UI for viewing text and markdown in your AWS S3 bucket

s3 Text UI

This is a simple text file viewer meant for use with AWS s3.

If you want view-only access to your text files in an encrypted s3 bucket, this app might be for you.

Features

• Navigate heirarchies of folders
• View text and markdown files
• Mobile and desktop web
• Credentials stored on device only (for security and simplicity)
• Support for up to 1000 files. (accepting donations or PRs)

Screenshots

Here it is showing a list of text files:

And here is viewing a single text file:

Set Up

1. Create an AWS S3 bucket to use as a source of text files. For it to work with this application, you'll have to configure permissions and enable CORS. If you've never used S3 this project might be a bit difficult to set up, but I believe you can do it.
2. Configure the application to point to an s3 bucket that hosts your text files. to do this, create a file src/.s3cfg.js. You can use src/.s3cfg-EXAMPLE.js as a starting point.

Example 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>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
    <ExposeHeader>x-amz-request-id</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Example S3 permissions configuration (substitute YOUR_BUCKET_HERE):

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "s3:GetBucketTagging",
                "s3:GetBucketCORS",
                "s3:ListBucket",
                "s3:GetBucketAcl",
                "s3:GetBucketPolicy"
            ],
            "Resource": "arn:aws:s3:::YOUR_BUCKET_HERE"
        },
        {
            "Sid": "VisualEditor1",
            "Effect": "Allow",
            "Action": [
                "s3:GetObjectVersionTagging",
                "s3:PutObjectVersionTagging",
                "s3:PutObject",
                "s3:GetObjectAcl",
                "s3:GetObject",
                "s3:GetObjectVersionAcl",
                "s3:GetObjectTagging",
                "s3:PutObjectTagging",
                "s3:GetObjectVersionForReplication",
                "s3:DeleteObject",
                "s3:GetObjectVersion"
            ],
            "Resource": "arn:aws:s3:::YOUR_BUCKET_HERE/*"
        }
    ]
}

Start Developing

Get dependencies:

npm install

Run the development environment:

npm start

Run unit tests:

npm test

SASS isn't complied automaticaly. When working on styles, run the watcher:

npm run sass

Or run it as a one-time compilation:

npm run sass-once

If you add a brand-new sass file, make sure you import it somewhere (eg: index.js' import './index.css';)

Deploying

This repo uses GitHub pages to deploy for convenience. The "deployment" consists of building the project, copying it to the docs/ folder (Github convention), and pushing to remote.

npm run deploy
# This builds the deployment. Then, git commit/push to publish it.

Todo list

• Add some simple markdown syntax highlighting (that doesn't change char positions) -- tried codemirror via react-md-editor and ace and didn't like either
• First let's grab the url in componentDidMount -> window.location.pathname
• Then we'll turn it in to a meaningful action with urlToAction
• Include Redux
• send redux the url changed action
• turn the action into a useful state
• handle a filename that isn't found
• observe the back/forward buttons and react appropriately
• support reading data from an s3 bucket
• get file details from s3 bucket
• turn size into a char count (assuming plain text), and count words
• Show the bucket name you're connected to
• Make the text appear editable and scroll nicely
• If props.file.content != editableText, show a save button. Enable cmd+s for the button
• Have the save button actually persist to the server
• override cmd+s to save on chrome (got ctrl+s to work, but having trouble blocking browser behavior with cmd) -- use keydown instead of keypress
• Quickly build a functional way to sync a system folder with the s3 bucket (command line npm module?)
• CORS must be enabled on the bucket/resource. Have a clear warning on the front end when we detect that this is the problem
• Add a client-side search filter
• Support tests
• Support navigable folders
• Adjust layout for mobile
• Reuse header for individual file and file list
• Document deployment steps
• Add a configuration screen so you can set your aws keys through the ui. they are persisted safely to your local device.
• Fix width and form styling on actual mobile devices
• Fix long file scrolling and width on mobile (hide keyboard by default, too)
• Detect missing configuration
• Provide an easy way (QR code?) to configure your mobile
• Have clear errors in the UI for timed out or failed aws calls
• Have clear error messaging for incorrect configuration
• Add a caching layer to the files api so you can call get as often as you want.
• grow search area when focused on mobile without shifting title text
• Infinite scroll for long file lists

Nice to Have

• (for long files) Remember your last scroll position
• (for long files) Scroll to the area that was most recently edited (maybe from another device)
• Live refresh the text, mixing in the current user's edits intelligently (2-way-sync challenge)
• cache file list and file contents on device; if old, greedy-invalidate. if not fresh, lazy-invalidate
• gui configurable s3 bucket target & key

---

This project was bootstrapped with Create React App.