This is repository with codebase of the web application available at files.veliov.com. It's fully-featured file-sharing service build on top of ostrio:files library and meteor.js.
This is third reincarnation of this webapp, most of changes in this release made during Impact Meteor Conference 2020 to showcase Meteor usage building modern webapps.
Awarded by Meteor Chef with GCAA 2016. Used by thousands Meteor developers to manage files and uploads in Meteor.js apps.
Backed by veliovgroup, sponsored by ostr.io and awesome community members. Idea, development, maintenance, and support by @smart_egg and @veliovgroup.
- Links
- Goals of this project
- Features
- Quick start
- Deploy this app
- SEO
- Debugging
- ❤️ Support this project
- Website: files.veliov.com
- Meteor's tutorials repository inspired by this app
ostrio:fileslibrary- Self-hosted (Nginx + Phusion Passenger) deploy tutorial
- Hekoru deploy instructions
Goals of this open source web application:
- Showcase usage of
ostrio:fileslibrary - 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
- 📑 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
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.
- Read this article
- After creating S3 bucket, create CloudFront Distribution and attach it to S3 bucket
- Set S3 credentials into
METEOR_SETTINGSenv.var or pass as the file, read here for more info, alternatively (if something not working) setS3env.var - You can pass S3 credentials as JSON-string when using "Heroku's one click install-button"
S3 credentials format (region is required):
{
"s3": {
"key": "xxx",
"secret": "xxx",
"bucket": "xxx",
"region": "xxx"
}
}- Install
web-pushNPM package - Generate key-pair using
webpush.generateVAPIDKeys(); - Set VAPID credentials into
METEOR_SETTINGSenv.var or pass as the file, read here for more info
VAPID credentials format:
{
"public": {
"vapid": {
"publicKey": ""
}
},
"vapid": {
"email": "mailto:[email protected]", // SET TO REAL EMAIL
"privateKey": ""
}
}All supported and annotated settings
{
"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
}
}Learn more about DevOps, deployment, and running this app live in DevOps and Deployment tutorial.
To make this project "crawlable" by search engines, social networks, and web-crawlers on this project we are using:
ostrio:flow-router-metapackage to generate meta-tags and title- Pre-rendering service to serve rendered HTML to crawlers and search engines
Using ostrio:flow-router-meta package controlling meta-tags content as easy as extending FlowRouter definition with { meta, title, link } properties:
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 }):
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:
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);To pre-render JS-driven templates (Blaze, React, Vue, etc.) to HTML we are using pre-rendering via siderable-middleware package:
/*
* @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 on a dev stage.
Having an issue running this web application? Try next options to find out why:
Set environment variable DEBUG to true or { debug: true } in the settings file passed via --settings option. This will enable logging mode in the meteor-files package
Set { public: { debug: true } } in the settings file passed via --settings option. This will enable logging mode in the meteor-files package and other components of the web application
- Star on GitHub
- Star on Atmosphere
- Share via Facebook and Twitter
- Sponsor via GitHub — support open source contributions on a regular basis
- Support via PayPal — support our open source contributions
- Use ostr.io — Monitoring, Analytics, WebSec, Web-CRON and Pre-rendering for a website