Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/veliovgroup/meteor-files-website
File sharing PWA. Upload and share at files.veliov.com
https://github.com/veliovgroup/meteor-files-website
meteor meteor-application
Last synced: about 2 months ago
JSON representation
File sharing PWA. Upload and share at files.veliov.com
- Host: GitHub
- URL: https://github.com/veliovgroup/meteor-files-website
- Owner: veliovgroup
- License: bsd-3-clause
- Created: 2020-10-29T15:50:34.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-07-05T19:22:01.000Z (over 1 year ago)
- Last Synced: 2024-05-01T11:29:14.030Z (8 months ago)
- Topics: meteor, meteor-application
- Language: JavaScript
- Homepage: https://files.veliov.com
- Size: 1.79 MB
- Stars: 14
- Watchers: 4
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[![support](https://img.shields.io/badge/support-GitHub-white)](https://github.com/sponsors/dr-dimitru)
[![support](https://img.shields.io/badge/support-PayPal-white)](https://paypal.me/veliovgroup)
# File sharing web app
This is repository with codebase of the web application available at [files.veliov.com](https://files.veliov.com/). It's fully-featured file-sharing service build on top of [`ostrio:files` library](https://github.com/veliovgroup/Meteor-Files) and [meteor.js](https://docs.meteor.com).
This is third reincarnation of this webapp, most of changes in this release made during [Impact Meteor Conference 2020](https://impact.meteor.com) to showcase Meteor usage building modern webapps.
Awarded by Meteor Chef with [GCAA 2016](https://themeteorchef.com/blog/giant-cotton-apron-awards-show). Used by [thousands Meteor developers](https://atmospherejs.com/ostrio/files) to manage files and uploads in Meteor.js apps.
Backed by [veliovgroup](https://veliovgroup.com), sponsored by [ostr.io](https://ostr.io) and [awesome community members](https://github.com/veliovgroup/Meteor-Files#supporters). Idea, development, maintenance, and support by [@smart_egg](https://twitter.com/smart_egg) and [@veliovgroup](https://twitter.com/veliovgroup).
## ToC:
- [Links](https://github.com/veliovgroup/meteor-files-website#links)
- [Goals](https://github.com/veliovgroup/meteor-files-website#goals) of this project
- [Features](https://github.com/veliovgroup/meteor-files-website#functionality)
- [Quick start](https://github.com/veliovgroup/meteor-files-website#quick-start)
- [Activate AWS:S3](https://github.com/veliovgroup/meteor-files-website#activate-awss3)
- [Activate Web Push Notifications](https://github.com/veliovgroup/meteor-files-website#activate-web-push-notifications)
- [Change application settings](https://github.com/veliovgroup/meteor-files-website#application-settings)
- [Deploy this app](https://github.com/veliovgroup/meteor-files-website#deployment)
- [SEO](https://github.com/veliovgroup/meteor-files-website#seo)
- [`title` and `meta` tags](https://github.com/veliovgroup/meteor-files-website#meta-tags-and-title)
- [Pre-rendering](https://github.com/veliovgroup/meteor-files-website#pre-rendering)
- [Debugging](https://github.com/veliovgroup/meteor-files-website#debugging)
- ❤️ [Support this project](https://github.com/veliovgroup/meteor-files-website#support-this-project)## Links:
- Website: __[files.veliov.com](https://files.veliov.com/)__
- Meteor's [tutorials repository](https://github.com/veliovgroup/meteor-snippets#meteor-snippets) inspired by this app
- [`ostrio:files`](https://github.com/veliovgroup/Meteor-Files) library
- Self-hosted (Nginx + Phusion Passenger) [deploy tutorial](https://github.com/veliovgroup/meteor-snippets/tree/main/devops#deploy)
- Hekoru [deploy instructions](https://github.com/veliovgroup/meteor-files-website/blob/master/heroku-deploy.md)## Goals
Goals of this open source web application:
- Showcase usage of [`ostrio:files` library](https://github.com/veliovgroup/Meteor-Files)
- Showcase usage of ServiceWorker with Meteor
- Showcase implementing fully-featured PWA (*including push-notifications*) using Meteor
- Build good and open source solution to quickly upload and share files## Functionality:
- 📑 Upload / Download Files
- 🗂 Drag'n'drop support for files and directories (*including nested directories*)
- 🗄 Use AWS:S3 as a storage
- 📲 PWA with Push Notifications
- 🚀 Upload via HTTP and/or DDP## Quick start:
Application is ready to be used as it is without need of extra configuration. Optionally there's a lot of room for changing settings to meet required features, like store files in AWS:S3, send Web Push Notifications via APNs when file is fully loaded and moved to long-term storage.
- [Activate AWS:S3](https://github.com/veliovgroup/meteor-files-website#activate-awss3)
- [Activate Web Push Notifications](https://github.com/veliovgroup/meteor-files-website#activate-web-push-notifications)
- [Change application settings](https://github.com/veliovgroup/meteor-files-website#application-settings)### Activate AWS:S3
1. Read [this article](https://github.com/veliovgroup/Meteor-Files/wiki/AWS-S3-Integration)
2. After creating S3 bucket, create CloudFront Distribution and attach it to S3 bucket
3. Set S3 credentials into `METEOR_SETTINGS` env.var or pass as the file, read [here for more info](http://docs.meteor.com/#/full/meteor_settings), alternatively (*if something not working*) set `S3` env.var
4. You can pass S3 credentials as JSON-string when using "*Heroku's one click install-button*"S3 credentials format (*region is required*):
```js
{
"s3": {
"key": "xxx",
"secret": "xxx",
"bucket": "xxx",
"region": "xxx"
}
}
```### Activate Web Push Notifications
1. Install [`web-push` NPM](https://www.npmjs.com/package/web-push) package
2. Generate key-pair using `webpush.generateVAPIDKeys()`;
3. Set VAPID credentials into `METEOR_SETTINGS` env.var or pass as the file, read [here for more info](http://docs.meteor.com/#/full/meteor_settings)VAPID credentials format:
```js
{
"public": {
"vapid": {
"publicKey": ""
}
},
"vapid": {
"email": "mailto:[email protected]", // SET TO REAL EMAIL
"privateKey": ""
}
}
```### Application settings
All supported and annotated settings
```js
{
"debug": false, // Enable debug mode on a Server
"storagePath": "/data/meteor-files/uploads", // LOCAL STORAGE ON THE SERVER
"spiderable": { // `spiderable-middleware` package settings
"auth": ""
},
"public": {
"debug": false, // Enable debug mode on a Client (Browser)
"maxFileSizeMb": 1024, // MAXIMUM UPLOAD FILE-SIZE IN MEGABYTES (1024mb ~= 1GB)
"maxFilesQty": 8, // MAXIMUM AMOUNT OF SIMULTANEOUSLY UPLOADED FILES
"fileTTLSec": 259200, // 3 days; FILE'S TTL IN SECONDS
"vapid": { // VAPID WEB PUSH NOTIFICATIONS CONFIGURATION
"publicKey": "" // WEB PUSH NOTIFICATION PUBLIC KEY
},
"trackingId": "" // trackingId for ostrio-analytics package
},
"s3": { // AWS:S#3 CLOUD STORAGE CREDENTIALS
"key": "",
"secret": "",
"bucket": "",
"region": ""
},
"vapid": { // VAPID WEB PUSH NOTIFICATIONS CONFIGURATION
"email": "mailto:[email protected]", // WEB PUSH NOTIFICATION EMAIL
"privateKey": "" // WEB PUSH NOTIFICATION PRIVATE KEY
}
}
```## Deployment
Learn more about DevOps, deployment, and running this app live in [DevOps and Deployment tutorial](https://github.com/veliovgroup/meteor-snippets/tree/main/devops).
## SEO
To make this project "crawlable" by search engines, social networks, and web-crawlers on this project we are using:
- [`ostrio:flow-router-meta`](https://github.com/veliovgroup/Meteor-flow-router-meta) package to generate meta-tags and title
- [Pre-rendering](https://prerendering.com/) service to serve rendered HTML to crawlers and search engines### Meta tags and title
Using [`ostrio:flow-router-meta`](https://github.com/veliovgroup/Meteor-flow-router-meta) package controlling meta-tags content as easy as extending *FlowRouter* definition with `{ meta, title, link }` properties:
```js
FlowRouter.route('/about', {
name: 'about',
title: 'About',
meta: {
description: 'About file-sharing web application'
},
action() {
this.render('layout', 'about');
}
});
```Set default meta tags and page title using `FlowRouter.globals.push({ meta })`:
```js
const title = 'Default page title up to 65 symbols';
const description = 'Default description up to 160 symbols';FlowRouter.globals.push({ title });
FlowRouter.globals.push({
meta: {
description,
robots: 'index, follow',
keywords: 'keywords, separated, with, comma'
}
});
```Activate `meta` and `title` packages:
```js
import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
import { FlowRouterMeta, FlowRouterTitle } from 'meteor/ostrio:flow-router-meta';/* ... DEFINE FLOWROUTER RULES HERE, BEFORE INIT ... */
new FlowRouterTitle(FlowRouter);
new FlowRouterMeta(FlowRouter);
```### Pre-rendering
To pre-render JS-driven templates (Blaze, React, Vue, etc.) to HTML we are using [pre-rendering](https://prerendering.com/) via [`siderable-middleware` package](https://github.com/veliovgroup/spiderable-middleware#meteor-specific-usage):
```js
/*
* @locus Server
*/import { Meteor } from 'meteor/meteor';
import { WebApp } from 'meteor/webapp';
import Spiderable from 'meteor/ostrio:spiderable-middleware';WebApp.connectHandlers.use(new Spiderable({
serviceURL: 'https://render.ostr.io',
auth: 'pass:login',
only: [/^\/?$/, /^\/about\/?$/i, /^\/f\/[A-z0-9]{16}\/?$/i]
}));// Allow pre-rendering only for existing public routes: `/index`, `/about`, and `/f/file_id`
```Pre-rendering getting activated by setting `spiderable.auth` property in `METEOR_SETTINGS` environment variable or [`settings.json`](https://github.com/veliovgroup/meteor-files-website/blob/master/settings.json) on a dev stage.
## Debugging
Having an issue running this web application? Try next options to find out why:
### On a server
Set environment variable `DEBUG` to `true` or `{ debug: true }` in the [settings file](https://docs.meteor.com/api/core.html#Meteor-settings) passed via `--settings` option. This will enable logging mode in the meteor-files package
### On a client (browser)
Set `{ public: { debug: true } }` in the [settings file](https://docs.meteor.com/api/core.html#Meteor-settings) passed via `--settings` option. This will enable logging mode in the meteor-files package and other components of the web application
## Support this project
- Star on [GitHub](https://github.com/veliovgroup/Meteor-Files)
- Star on [Atmosphere](https://atmospherejs.com/ostrio/files)
- Share via [Facebook](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fgithub.com%2Fveliovgroup%2FMeteor-Files) and [Twitter](https://twitter.com/share?url=https%3A%2F%2Fgithub.com%2Fveliovgroup%2FMeteor-Files)
- [Sponsor via GitHub](https://github.com/sponsors/dr-dimitru) — support open source contributions on a regular basis
- [Support via PayPal](https://paypal.me/veliovgroup) — support our open source contributions
- Use [ostr.io](https://ostr.io) — [Monitoring](https://snmp-monitoring.com), [Analytics](https://ostr.io/info/web-analytics), [WebSec](https://domain-protection.info), [Web-CRON](https://web-cron.info) and [Pre-rendering](https://prerendering.com) for a website