Cradle VSA System: React Front-End and Python (Flask) Back-End

React front-end web application and Python back-end web server for the Cradle VSA System, a technological health care system to improve maternal care and reduce preventable maternal deaths in Ugandan villages.

View the React web application here: https://cradle-app.herokuapp.com/login

The back-end is in the directory server/ and the front-end is in the directory client/.

Software Stack (Front-End)

Purpose	Technology
Development Language	HTML, CSS, JavaScript
Front-End Development Framework	React
Dependency Manager	Yarn
Deployment	GitHub Pages

Software Stack (Back-End)

Purpose	Technology
Development Language	Python 3.7
Web Framework	Flask
Database	MySQL
Deployment	Under Construction

Setup Instructions

Codebase

Clone the repository and navigate into the directory:

git clone https://github.com/Cradle-VSA/cradle-vsa.github.io.git
cd cradle-vsa.github.io/

Database (MySQL)

Install MySQL.

Configure access to the root account on MySQL so that you can login with the following command:

mysql -u root -p YOUR_PASSWORD_HERE

For reference, see this sample guide from DigitalOcean for Debian-based systems.

Once in the prompt, create a new database named cradle (case-sensitive):

mysql> CREATE DATABASE cradle;
Query OK, 1 row affected (0.00 sec)

mysql> exit
Bye

In the server/ directory, create a file named .env containing your local MySQL root username and password in the following format:

DB_USERNAME=MY_MYSQL_DB_USERNAME
DB_PASSWORD=MY_MYSQL_DB_PASSWORD

For example:

DB_USERNAME=root
DB_PASSWORD=123456

This file will be automatically ignored by Git. Do not manually commit it to the repository.

When the back-end web server is started, it will connect to the database using the credentials in this file.

Back-End Web Server

Python and Flask

Enter the project directory:

cd server/

If Python 3 is not yet installed, then install the relevant packages:

sudo apt-get install python3 python3-pip

Install the PIP dependencies:

pip3 install -r requirements.txt

Virtualenv (Optional: Isolated Environment for Python packages)

Install Virtualenv and create an environment named venv (or any name you prefer) within your project directory:

pip3 install virtualenv
virtualenv venv

Before installing any other packages from the project, activate the virtual environment to isolate your environment for all following commands:

source venv/bin/activate

If on Windows, run the script directly instead:

./venv/Scripts/activate

Run all Python and PIP commands here.

To deactivate the isolated virtual environment and return to the original environment, either close the console window or run the following command:

deactivate

Flask

Flask is installed by the PIP commands above.

For all following commands, flask can be replaced with python3 -m flask if the Flask executable is not available.

Migrate the database to the newest version:

flask db upgrade

Start the server with either one of the following commands:

python3 app.py

flask run

The server will be available on port 5000 (http://127.0.0.1:5000).

Front-End Web Application (Yarn with React)

Enter the project directory:

cd client/

Install Yarn.

Install the necessary packages:

yarn install

Start the server locally:

yarn start

The server will be available on port 3000 (http://127.0.0.1:3000).

Deployment

To build the front-end into deployable files, edit the value homepage in client/package.json to be the URL where the web application will be hosted, so that the page can resolve the correct URL to its resources.

Build the files:

yarn build

The completed files will be ready for deployment at directory client/build/.