hanovo / meteor-files-website

File sharing PWA. Upload and share at files.veliov.com

File sharing web app

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.

ToC:

• Links
• Goals of this project
• Features
• Quick start
  • Activate AWS:S3
  • Activate Web Push Notifications
  • Change application settings
• Deploy this app
• SEO
  • title and meta tags
  • Pre-rendering
• Debugging
• ❤️ Support this project

Links:

• Website: files.veliov.com
• Meteor's tutorials repository inspired by this app
• ostrio:files library
• Self-hosted (Nginx + Phusion Passenger) deploy tutorial
• Hekoru deploy instructions

Goals

Goals of this open source web application:

• Showcase usage of ostrio:files library
• 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
• Activate Web Push Notifications
• Change application settings

Activate AWS:S3

1. Read this article
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, 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):

{
  "s3": {
    "key": "xxx",
    "secret": "xxx",
    "bucket": "xxx",
    "region": "xxx"
  }
}

Activate Web Push Notifications

1. Install web-push NPM 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

VAPID credentials format:

{
  "public": {
    "vapid": {
      "publicKey": ""
    }
  },
  "vapid": {
    "email": "mailto:[email protected]", // SET TO REAL EMAIL
    "privateKey": ""
  }
}

Application settings

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
  }
}

Deployment

Learn more about DevOps, deployment, and running this app live in DevOps and Deployment tutorial.

SEO

To make this project "crawlable" by search engines, social networks, and web-crawlers on this project we are using:

• ostrio:flow-router-meta package to generate meta-tags and title
• Pre-rendering service to serve rendered HTML to crawlers and search engines

Meta tags and title

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);

Pre-rendering

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.

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 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 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
• 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