Skip to content

samdzie/group-web-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

94 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Group Web UI

Tests

A system for organizing communities, with features such as calendars, announcements, and home pages. Currently being developed by Team C for CS 497S: Scalable Web Systems, taught by Professor Tim Richards at UMass Amherst.

This repository contains the web user interface for this system.

The service is deployed here.

Development

To build the service for development, use the following instructions:

  1. Run ./scripts/build-for-server.sh
  2. Run pipenv install
  3. Set environment variables:
    • export FLASK_APP=server
    • export FLASK_ENV=development
    • export GROUP_SERVER_HOST=http://<hostname>:<port>
    • export EVENT_SERVER_HOST=http://<hostname>:<port>
    • export IMAGE_SERVER_HOST=http://<hostname>:<port>
    • If the latter three variables are not set, the server defaults to http://localhost:5001, http://localhost:5002, and http://localhost:5003, respectively.
  4. Run pipenv run flask run

The build-for-server script must be re-run each time the client is edited in order for Flask to serve it. Alternatively, cd into client and run yarn serve to refresh the client after each change. This method does not allow the client to connect to the server.

Testing

To test the service on your local machine, install Mountebank and run ./test/test.sh to run a bash script. This script stubs out upstream services with Mountebank and runs test with pytest.

Design and Implementation

This web app is designed according to the backends for frontends pattern described by Sam Newman in Building Microservices. The server sends a single-page Vue.js app and also hosts an API to service requests from the client.

The server is developed with Flask and uses the Requests library to send requests to upstream services. The data from the responses is then repackaged and sent along to the client. In this way, the backend can organize data in a more convenient format for the client.

API

Documentation for the backend's API is here.