A Modern Web Client for Dropbox
Redis and MongoDB are mandatory prerequisites for the server to function. Please install Redis and MongoDB before proceeding.
Please create a Pusher account and add the api details in the .env file (refer setting up the environment)
Once all the prerequisites are satisfied, simply start the server app by running the following command.
cd /server
yarn run install && yarn run devIf everything setup correctly, you should see server running message
Please create a Pusher account and add the api details in the .env file. refer Setting up the environment
cd /ui
yarn run install && yarn run serve
Following are the mandatory environment variables for the Server
| Environment Variable | Description | Value |
|---|---|---|
| CLIENT_ID | Client Id of the App registered with Dropbox | |
| CLIENT_SECRET | Client Secret of the App registered with Dropbox | |
| OAUTH_AUTHORIZE_URL | Dropbox's authorization URL | https://www.dropbox.com/oauth2/authorize |
| OAUTH_TOKEN_URL | URL to fetch the access token | https://api.dropboxapi.com/oauth2/token |
| REDIS_HOST | Host information of your locally installed redis | 127.0.0.1 |
| REDIS_PORT | Port info | 6379 |
| REDIS_PASSWORD | Password for Redis Authentication | |
| SESSION_COOKIE_MAXAGE | ||
| SESSION_SECRET | ||
| MONGO_DB_URL | mongodb://localhost | |
| MORGAN_LOG_MODE | ||
| CORS | ||
| APP_LOGIN | Frontend App's Login page URL | |
| DASHBOARD | Frontend App's Landing page URL | |
| PUSHER_APP_ID | Application Id of your Pusher Instance | |
| PUSHER_APP_KEY | Application key of your Pusher Instance | |
| PUSHER_APP_SECRET | Application secret of your Pusher Instance |
The server uses dotenv to load env variables. please create a .env file and add all the above mentioned settings.
- Vue.JS - The frontend app is written in Vue with complete support for Typescript.
- Apollo Client - The client uses vue-apollo to talk to the graphql server.
- Fastify - Server app is powered by Fastify and it hosts the Apollo-Server. It also manages File upload/download , Authentication & Authorization.
- Graphql (powered by apollo-server-fastify) - Fastify internally uses apollo-server-fastify and exposes a GraphQLized endpoint for consumption.
- Dropbox API for Node.JS - Dropbox SDK for NodeJS.
- Redis for Session Management - Session Management is controlled by fastify-session. The sessions are stored in a dedicated Redis store.
- Agenda - The Server employs agenda for various polling mechanisms (for e.g batch check of dropbox operations).
- MongoDB - MongoDB is a prerequisite for Agenda (ref Agenda Docs for more information).
- The UI now sports a new look and feel with a better user experience.
- The server and the frontend apps have been rewritten in Typescript.
- Migrated all the server side code from express to Fastify for better performance and simplicity.
- Frontend app is migrated to the latest version of Vue.
- Support for Pusher - Realtime notifications are now powered by Pusher.
Prabhu Murthy – @prabhumurthy2 – prabhu.m.murthy@gmail.com
Distributed under the MIT license. See LICENSE for more information.