Vue Cloudfront is a blazing fast, standalone PWA cloudfront, basically for self-hosting purposes. Currently the only backend-solution is the official vue-cloudfront-api which is a fully-featured RESTful api. This project is and will always be open source, anybody can contribute to it - it should, and hopefully will be, a massive improvement regarding cloud solutions in contrast to google-drive and drop-box. The project is currently in the alpha phase.
For anyone who wants some guidance, feel free to contact me on Discord: Simon#6765
Features
Vue-cloudfront currently has full desktop and mobile support.
All modern browsers like Chrome, Firefox, Opera, Edge and Safari are supported. See .browserslistrc for further details. IE support is and will never be in consideration.
See GitHub Projects for the current roadmap.
Vue Cloudfront - unique features
- 100% Offline support (Navigation and searching) - via localStorage.
- Ultra lightweight, only '~ 60kb' js and '~ 20kb' css! (both gzipped).
- Realtime synchronization between sessions.
- Blazing fast with local caching: Average server response time: '~ 30ms' / Client-side rendering time: '~ 1.5s'.
- Installable - Install it on your desktop (Currently only supported by Chrome 70+ under Linux, Windows and Chrome OS).
- Modern Vue frontend with material-design - easy to design and customize.
- Simply structure and just a few dependencies.
- Clean dashboard to keep an overview over active sessions, files and more.
- Dark and light theme as well as setting to use the preferred color scheme by your os.
File Management
- GridView with small file previews and draggable tiles.
- ListView with sortable columns and more details.
- Easy drag 'n drop as well as selection functionality.
- Files and folders can be marked (for example to have quick access to them).
- Custom colors and color picker for faster content recognition.
- No latency during a search - get instant results within milliseconds.
- Copy, cut and move files and folders like on your notebook.
- Simultaneous uploads with a neat upload popup to control and see current uploads.
- Download entire directorie structures as zip file.
- Bookmark files and folders to directly access them in a seperate tab.
General
- Tooltips and introduction boxes to quickly understand how everything works.
- 29 Shortcuts, everything can also be done via a keyboard. No mouse at all required.
- File preview (currently only for images, videos, audio files, fonts and PDF).
- Search in your cloud and get results under '< 500ms'.
- Specify your search with file-type, size-range and more.
- Full mobile support, enjoy it everywhere.
Benchmarks
As a comparison, I compared the upload stats with these from google drive.
All benchmarks are made with an upload speed of ~9.89 Mbit/s / a ping of ~9ms
Upload of node_modules (26.3MB, 7.567 Files and 590 Folders)
- Vue Cloudfront:
~40 Seconds/2 Requests - Google Drive:
~39 Minutes/9644 Requests
Upload of one file (123MB)
- Vue Cloudfront:
~1 Minute and 53 Seconds/1 Request - Google Drive:
~2 Minutes and 10 Seconds/176 Requests
Lighthouse analysis
Documentation and table of contents
Currently and as already mentioned, this project is in its alpha phase. If all features and issues which I currently face are fixed and implemented, I will start to document stuff like config files, etc. Anyway the code is (hopefully) well-equipped with comments.
Vue Cloudfront has been (so far) only deployed on an 'debian 9.5' instance, and I myself only work on Windows machines so the installation instructions on MacOS are only assumed and based on these on Linux - If there are any issues/suggestions feel free to open a PR / Issue.
Installation
See our configuration docs for further tweaks.
Vue Cloudfront stack
- Vue as Framework
- Vuex as state management solution
- Fontawesome-free for fancy icons
- Normalize.css for more consistently style
- Selectionjs to provide selection experience like on your desktop
- Service Worker to provive offline experience
- PWA
- Docker as container solution
Vue Cloudfront-api stack
- Express as Framework
- Mongoose as database API
- MongoDB as database
- PM2 as load balancer
- Docker Compose as multi-container solution
Current branches
Architecture
A rough overview:
Thank's to icons8 for providing icons!