Skip to content

chelkyl/MeTube

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

MeTube

Dependencies

Confirmed packages and versions:

  • Python 3.5.2
  • Flask 1.0.2
    • Flask-sqlalchemy 2.3.2
    • PyMySQL 0.9.3
    • passlib 1.7.1
    • python-dotenv 0.10.1
    • Flask-HTTPAuth 3.2.4
    • flask-cors 3.0.7
  • Node 8.11.3

Installation can be done with pip3 install Flask Flask-sqlalchemy PyMySql passlib python-dotenv Flask-HTTPAuth flask_cors --user

Setup

Server

  1. Create a database in Buffet
    • Note your username, password, database name, and host name
  2. Clone the repo then open it in terminal
    cd path/MeTube
    
  3. Go to the server directory
    cd server/server
    
  4. Copy the file named '.env.template' and rename as '.env' then fill in the <variables> with your buffet database info
    • the host, port, and dialect probably do not need to be changed
    DB_USER=<username>
    DB_PASS=<password>
    DB_HOST=mysql1.cs.clemson.edu
    DB_PORT=3306
    DB_NAME=<database-name>
    DB_DIALECT=mysql
    
    • Your current directory should now have .env.template, .env, and .flaskenv in it
  5. Run the server using:
    python3 server.py
    
    • or
    flask run
    
  6. Open your browser to the link on the line 'Running on ...' to determine if it is accessible
    • e.g. localhost:5000

Client

  1. Install node, using a package manager is recommended. See https://nodejs.org/en/download/package-manager/
    • nvm is good
  2. Go to the client directory
    cd client
    
  3. Load node if needed and install dependencies using npm, the package manager included with node. This may take some time.
    npm install
    
  4. Copy the file named '.env.template' and rename as '.env' then fill in the <variables> as desired
    REACT_APP_ROOT_DIR=/~<your_Clemson_username>
    REACT_APP_SERVER_IP=localhost:5000
    
    • REACT_APP_SERVER_IP should match the server
  5. Run the client
    npm start
    
  6. Open your browser to the link on the line 'Local: ...'
    • e.g. localhost:3000

Testing

Tests on the server are run using a Postman collection in the tests folder.

  1. Open Postman and click Import
  2. Import the Postman collection file in the tests folder.
  3. After making changes to the collection, export it and overwrite the file.
  4. If new tests involving file uploads were created or needs modification, see Fixing Postman File Upload Issue
  5. Run the Python script to fix the exported test collection.
    python tests/fix_tests.py
    

fix_tests.py

The replaceMap structure follows the structure of the Postman collection.

Example with labels:
{                              - first layer, folders
  "tag": "name",               - name of field that distinguishes folders
  "tagIs": "files",            - folder name
  "path": ["item"],            - any nested keys to traverse
  "fix": [                     - to deal with an array of objects, recurse to another layer
    {                          - second layer, tests
      "tag": "name",           - name of field that distinguishes tests
      "tagIs": "POST test",    - test name
      "path": ["request","body","formdata"],
      "fix": [                 - recurse to another layer
        {                      - third layer, test details
          "tag":"key",
          "tagIs":"file",
          "replace": {         - specify all key-value pairs to replace
            "src": "{{path}}/MeTube/server/tests/BobFile1.txt"
          }
        }
      ]
    }
  ]
}

Fixing Postman File Upload Issue

If you created a test using a file upload input or encountered a bug in Postman where you cannot select a file in the file input for a test:

  1. Export the collection
  2. Edit replaceMap in fix_tests.py to fill in the file inputs (or replace any key-value pairs)
  3. Run fix_tests.py
  4. Re-import the fixed collection and test it

Publishing

The web app is hosted on http://webapp.cs.clemson.edu/~username

Server

  1. Go to the project root MeTube
  2. Run the shell script copy_to_server.sh to copy (rsync) most files to the webapp server.
    . copy_to_server.sh
    
  3. SSH to the webapp server
    ssh webapp.cs.clemson.edu
    
  4. Install the dependencies
  5. Go to the server directory
    cd MeTube/server/server
    
  6. Edit .flaskenv on the lines with FLASK_ENV and SERVER_CFG replacing their values with production
  7. Run the server in the background with public access. It should stay running even after you log out.
    python server.py &
    
  • or
flask run --host=0.0.0.0
  1. Open your browser to the webapp server to determine if the API is accessible
    • webapp.cs.clemson.edu:5000

Client

The webapp server should allow .htaccess files and have mod_rewrite enabled.

  1. Go to the client directory
    cd client
    
  2. Edit package.json on the line with homepage replacing <username> with your Clemson username
    "homepage": "http://webapp.cs.clemson.edu:3000/~<username>"
    
  3. Edit .env replacing <variables> as needed ` REACT_APP_ROOT_DIR should be your Clemson username
    • REACT_APP_SERVER_IP should match the server address
    • e.g. webapp.cs.clemson.edu:5000
  4. Build static pages for the front end incorporating .env variables
    npm run build
    
  5. Edit .htaccess on the line with <username> substituting your Clemson username
    RewriteBase /~<username>
    
  6. Push the new static pages and .htaccess file to the web app server
    • WARNING: npm run push will overwrite files in your public_html folder
    • Use the alternate command to specify your own path
    npm run push
    
    • or
    cp .htaccess build/ && rsync -av build/ webapp.cs.clemson.edu:~/<your_path>
    
  7. Navigate to http://webapp.cs.clemson.edu/~<your_Clemson_username>/ to see the app
    • This is a static website
    • Does not use server-side rendering, so node is not needed to keep it running
    • The .htaccess file should enable page refresh and direct navigation to sub-pages

Misc. Notes

TODO

  • Finalize server code
    • (optional) add table to track which user upvotes/downvotes which files
      • remove these columns from File table?
    • (optional) fix lines marked with #FIXME
    • Run mysqldump to get SQL commands for creating DB
      • Create ER diagram or schema from this
      • Get sqlalchemy to execute these statements rather than create_all
      • Get sqlalchemy to execute drop statements rather than drop_all
  • Finish/Add components/pages
    • (optional) file view page upvotes/downvotes
      • needs a new table similar to user_playlists
    • masthead menu Options
      • options page for rename account, change email, or delete account
    • browse page
      • (is this necessary?) add categories to file upload and browse
        • users then choose specific categories to add to their files
    • (optional) implement permissions validation
    • (optional) move alert dialog out of view page into another component and expose as a context provider
      • replace appropriate error state handling
  • Technical report
    • system design
    • ER diagram
    • DB schema
    • function design
    • implementation details
    • test cases
    • test results
    • user manual or instructions
  • 1 Canvas submission zip file named <team #>.zip e.g. G4.zip
    • Due Thursday, April 18 midnight
    • has technical report
    • cover page
      • lists all member names and team number
  • individually submit evaluation
    • Can be found on course page here
    • 1 evaluation for each teammate for 2 total
    • named as <team #> name nameOfTeammate.doc
      • not very clear how name should be formatted
        • delimited by space or underscore or other?
        • Clemson username?

Stretch Goals

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published