'share.' is a Node.js (MEAN stack) single-page application / platform created to allow you to use or create (open) your own file sharing service based on client-server model. SPA (single-page application), high performance, responsive & simple design and lightweight uploader. Highly configurable with a simple design and native animation effects using CSS3, HTML5 & JavaScript (animate.css, ngAnimate). API (application programming interface) is ready for your frontend clients (website, mobile applications, and third party applications) integrate with it.

What's included

Once you download the platform, you can see a 'share.' folder with all files and sub folders. You can read description of some important files in continue.

  • app Backend
    • models
      • file.jsFile model
      • user.jsUser model
    • routes
      • api.jsAPI routes
  • config
    • assets
      • default.jsDefault assets
      • test.jsTests
    • default.jsDefault configuration file
    • logger.jsLogger
  • public Frontend
    • app
      • controllers
        • adminCtrl.js
        • downloadCtrl.js
        • errorCtrl.js
        • fileManagerCtrl.js
        • filesCtrl.js
        • homeCtrl.js
        • mainCtrl.js
        • serverErrorCtrl.js
      • directives
        • pagination
          • dirPagination.js
          • dirPagination.spec.js
          • dirPagination.tpl.html
          • README.md
          • testTemplate.tpl.html
      • routes
        • app.routes.jsRouting for our application
      • services
        • authService.jsAuthenticate service
        • fileService.jsFile service
        • settingsService.jsApplication settings service
      • views
        • pages
          • assets
            • footer.html
          • 404.htmlNot-found view
          • 500.htmlServer-error view
          • admin.htmlAdmin panel view
          • dashboard.htmlAdmin dashboard view
          • download.htmlDownload file view
          • filemanager.htmlAdmin File-manager view
          • files.htmlUser current files view
          • home.htmlHome view
          • login.htmlLogin view
        • index.htmlBarebones (init file)
    • assets
      • css
        • 404.cssCustom css for the 404 (Not found) page
        • style.cssSome custom css file
        • theme.cssSome custom css
        • ui.cssSome custom css
      • img
      • js
        • plugins.jsCustom js for the the Step-form-wizard init
      • libs
        • angular-ui-router-stylesThis is a simple module for AngularJS that provides the ability to have route-specific CSS stylesheets, by integrating with Angular uiRouter
        • jQuery.filer-1.0.5Simple HTML5 File Uploader, a plugin tool for jQuery which change completely File Input and make it with multiple file selection, drag&drop support, different validations, thumbnails, icons, instant upload, print-screen upload and many other features and options
        • angular.jsLocal AngularJS file
      • plugins for the step-form-wizard
      • svg
        • fineliner.svgCustom svg for the 404 page
        • pencil.svgCustom svg for the 404 page
        • whiteCoffee.svgCustom svg for the 404 page
      • favicon.icoFavicon icon
      • favicon.pngFavicon png icon
  • uploadsWhere files will be uploaded
  • gulpfile.jsThe streaming build system gulpfile.js
  • package.jsonDefine all our node app and dependencies
  • server.jsApplication setup and configuration

You are going to think of your application as two separate parts that handle specific tasks. The providers of a resource or service (servers/backend/Node) will handle the data layer and will provide information to your service requesters (clients/frontend/Angular).

Client-Server Model

When building MEAN stack applications, there’s a certain way of thinking that we’ll want to use. We’re talking about the client-server model. We are going to think of our application as two separate parts that handle specific tasks. The providers of a resource or service (servers/backend/Node) will handle the data layer and will provide information to our service requesters (clients/frontend/Angular).


Client-Server Model

When building this application, we will be thinking in the [client-server model]. This is a very important concept while we are building our applications.

Client-Server Model A network architecture in which one program, the client, requests service from another program, the server. They may reside on the same computer or communicate across a network.

There are many benefits to thinking of your application as two separate parts. By having our server be its own entity with an API from which we can access all of our data, we provide a way to create a scalable application.


This sort of thinking doesn’t just have to be exclusive to the MEAN stack either. There are numerous applications that would benefit from this type of architecture. Having the server-side code be separate lets us create multiple front-end client applications like websites, Android apps, iPhone apps, and Windows apps that all connect to the same data.

We can iterate on our server side code and this will not affect our frontend code. We also see large companies like Facebook, Google, Twitter, and GitHub using this method. They create the API and their frontend clients (website, mobile applications, and third party applications) integrate with it.


Fun Note: The practice of using your own API to build a frontend client is called dogfooding (one of my absolute favorite words).

Here are the parts of our application separated as server and client.
  • Server Components

    Database (MongoDB)

    Server/API (Node and Express)

  • Client Components

    Frontend Layer (Angular)

Getting started

Start your file sharing service. It won't take more than 15 minutes to start. Read the step-by-step guide:


  • Prepare your directory

    Start your file sharing service project by making a copy of 'share.' folder to your desired directory. This folder contains essential files to develop your file sharing service based on 'share.'.

  • Configure your settings

    After uploading all of the files, navigate to the /app/config/ directory and open the default.js file in your favorite text editor.

    Fill in your MongoDB database information (required) and adjust the other setting to your liking.

  • Run database initialization

    Next, run node dbInit.js

  • Delete dbInit.js

    After successful importing the database init, delete dbInit.js file. Your admin login details are username: admin, password: password

  • Run the platform

    Next, run node server.js

  • Complimenti! You made it!

Configuration

Open your configuration file. It won't take more than 5 minutes to configure it. Read the step-by-step guide:



                    module.exports = {
                        "app": {
                            "title": "share.",
                            "emailMsg": "Hello, you can download your file from ",
                            "gPlusPage": "https://plus.google.com/115749282434300827393/posts",
                            "facebookPage": "https://www.facebook.com/KUDA-Inc-1658318267770507/",
                            "twitterPage": "https://twitter.com/kuda_io",
                            "footer": "Copyright © 2015 Your Company, All Right Reserved. 
795 Folsom Avenue, Suite 600. San Francisco, CA 94107, United States", "domain": "http://domain.com", // domain "version": "1.0.0", "dataSiteKey": "6LfnkBoTAAAAAMHa4YBB9ooC-PGhMpn-MZ3JaCwB" }, "db": { "uri": "mongodb://host:port/database", "options": { "user": "", "pass": "", "db": { "forceServerObjectId": false, "w": 1 }, "auth": {}, "server": { "socketOptions": {}, "auto_reconnect": true }, "replset": { "socketOptions": {} } }, // Enable mongoose debug mode "debug": false }, "port": process.env.PORT || 8080, "log": { // logging with Morgan - https://github.com/expressjs/morgan // Can specify one of 'combined', 'common', 'dev', 'short', 'tiny' "format": "combined", "options": { "stream": { "directoryPath": "\\", "fileName": "access.log", "rotatingLogs": { "active": true, "fileName": "access-%DATE%.log", "frequency": "daily", "verbose": false } } } }, "favicon": "public/assets/favicon.ico", "templateEngine": "swig", "superSecret": "KUDARedemptionSong4Fre3dom", "reCAPTCHA": { "secret": "6LfnkBoTAAAAACrC9THAR6u4lMIM0hm9crWEl_Vi" }, "smtpConfig": { host: 'smtp.gmail.com', port: 465, secure: true, // use SSL auth: { user: '', // your gmail username pass: '' // your gmail password } } };
  • app

    Here you can edit the title of your platform. Email message, which will be returned, your social pages for Google+, Facebook and Twitter, Footer text. 'dataSiteKey' is site key for reCAPTCHA (you can get it from "https://www.google.com/recaptcha".

  • db

    There is your mongo database setup. URI is your uri for the database like "mongodb://host:port/database". If you want to use local database, then your URI will be "mongodb://localhost:27017/database". I like to use "modulus.io". Other options you can find at MongoDB documentation (mongoose).

  • port

    Port for your server.

  • log

    Logging with Morgan - https://github.com/expressjs/morgan. Comment/Uncomment 'stream' to toggle the logging to a log on the file system.

  • favicon

    Favicon for your platform.

  • templateEngine

    Template engine for the server.. Swig - http://paularmstrong.github.io/swig/

  • superSecret

    That's your super secret that will generate the tokens.

  • reCAPTCHA

    Your reCAPTCHA secret key.

  • smtpConfig

    If you want to send emails, you need to configure your smtp settings. There's smtp for gmail.

  • Complimenti! You made it!

Customization

For customizations you need to make changes in './app/routes/api.js' file. There you will find well-commented code.

Recap of the Process

This is the foundation for how you can add components to your platform. Let’s say you wanted to add a resource to your site like Articles. You will want to perform the same CRUD options on this resource. Here are the main steps for creating this new component:

Node.js Side
  • Create the Mongoose Model
  • Create the API endpoints as routes
AngularJS Side
  • Create the service to communicate with the API
  • Create controllers for all the different pages (all, create, edit)
  • Set up your views and routes and assign controllers
  • Polish your application with loading icons, animations, and more

Complimenti! You made it!