Web App

published by: Tyler Lu

Back-end

The back-end is a Python (3.6) App.

  • Uses the Flask microframework to implement the web app and routing.

  • Uses the Python Social Auth library to enable GitHub and LinkedIn accounts to login and returns user profile information from these systems.

    The following paths are exposed for authentication:

    Path Description
    /login/<github|linkedin-oauth2> Navigates users to GitHub/LinkedIn login page
    /complete/<github|linkedin-oauth2>/ Endpoint that handles OAuth callback
    /logout Logout current user

  • Uses Azure Database for MySQL.

  • Uses peewee for ORM access to the MySQL Database.

  • Exposes the following APIs:

    Action Path Description
    GET /api/me Get current user’s profile
    POST /api/me Update current user’s profile
    GET /api/connected-accounts Get current user’s connected accounts
    GET /api/friends Get current user’s friend
    POST /api/friends Add a friend for current user
    GET /api/profiles Get user profiles
    GET /api/profiles/<id> Get a profile by id
    GET /api/profiles/suggested Get suggested profiles (friends) for current user
    POST /api/sms Send a SMS
    GET /api/messages Get new messages sent to current user
    POST /api/messages Send a message from current user
    GET /api/messages/summary Get messages summary (unread count)

Front-end

The front-end is an AuglarJS App which provides the following pages:

Page Path Description
Login /login Allows users to login with GitHub or LinkedIn account
Connect /connect Allows current user to connect to the other account
My Profile /profile Allows current user to view and edit his/her profile
Search /search Allows current user to search friends, add friend, and start a chat
Profile /profile/<id> Allows current user to view other devs’ profile
Chat /chat/<id> Allows current user to chat with a dev or a friend

Nginx

Nginx is used for 2 things:

  1. Serves the back-end app with uwsgi on port 5000.

    http {
    #...
    server {
        listen       5000;
        location / { try_files $uri @backend; }
        location @backend {
            include uwsgi_params;
            uwsgi_pass unix:/app/Backend/uwsgi.sock;
        }
    }
}

  2. Runs as a reverse proxy server.

    Nginx combines the back-end app and front-end app, and exposes them through the same port (80). The following code demonstrates how this is done.

    http {
    server {        
        listen       80;
        location / {
            proxy_pass http://127.0.0.1:4200/;            
            #...
        }
        location ~ ^/(login/.+|complete|logout|api) {    
            proxy_pass http://127.0.0.1:5000;
            #...
        }
    }
}

    Nginx forwards 2 different kinds of requests to the back-end app:

    • Auth related requests:
      • Login: URL path matches /login/.+
      • Login OAuth callback: URL path starts with /complete
      • Logout: URL path starts with logout
    • REST API requests: URL path starts with /api

    The other requests are forwarded to the front-end app.

    For example:

    • After you request the /search page in a web browser, Nginx forwards your request to the front-end app, then returns the page generated by the front-app to the web browser.
    • After you click the Search button, an AJAX request is created by the front-end app and sent to Nginx. Nginx forwards it to the back-end app, then returns the JSON result generated by the back-end app to the front-end app.

Docker

The Web App uses the following 3 technologies:

  • Python
  • Node
  • Nginx

We created a base Dockerfile that contains the runtimes for these 3 technologies. The Dockerfile is in the /Docker/python-node-nginx folder. It has been build and is available in the Docker Hub here: https://hub.docker.com/r/appsvc/demoapp-base/