Marakratt
Overview
Marakratt widget consist of several parts:
- Backend. Providea data sorce API to frontand. Implemented as FastAPI application.
- Frontend. React application that is running inside iframe. Uses backend to fecth an display data.
- markrat.js script. Injectable script that initializes iframe with Frontend inside, apply styles to iframe externals, and provide event layer, that allow script and Frontend to communicate.
Usage
To start using on target website you need to runn Fronttend and Backend. Then inject marakrat.js script to the webpage, with following snippet:
<!-- Marakratt Code -->
<script src="https://xn--tpp-qla.edu.ee/marakratt/marakratt.js"></script>
<script type="text/javascript">
window.addEventListener("load", function () {
marakrattInit("https://xn--tpp-qla.edu.ee/marakratt/");
});
</script>
<!-- End Marakratt Code -->
Local development
Frontend
yarn install
yarn start
backend
cd backend/
# create and install virtualnvironment with your preferred way
pip install -r requirements.txt
export CLIENT_API_AUTH="{pixel api basic auth key goes here}"
uvicorn main:app --reload
backend - docker build
cd backend/
docker build -t marakratt .
docker run -p 8000:8000 marakratt
Check http://127.0.0.1:8000/docs#/ for API documentation.
Server access
NB! replace "aader" with your username
- Start VPN
- ssh aader@192.168.1.110
- ssh mindtitan@xn--tpp-qla.edu.ee
- cd /srv/html/marakratt/
Deploy live
/srv/html/ is accessible as "/" from http://täpp.edu.ee/
NB! replace "aader" with your username
REACT_APP_API_ENDPOINT=https://xn--tpp-qla.edu.ee/test/api yarn build
rsync -rv build/ aader@192.168.1.110:marakratt/
ssh aader@192.168.1.110 "rsync -rv marakratt/ mindtitan@xn--tpp-qla.edu.ee:/srv/html/marakratt/"
Backend deploy:
rsync -rv --exclude data backend/ aader@192.168.1.110:marakratt-backend/
ssh aader@192.168.1.110 "rsync -rv marakratt-backend/ mindtitan@xn--tpp-qla.edu.ee:/srv/marakratt-api/"
# ssh int täpp.edu.ee
cd /srv/marakratt-api/
export CLIENT_API_AUTH="{pixel api basic auth key goes here}"
source .venv/bin/activate
pip install -r requirements.txt
killall uvicorn
uvicorn main:app --root-path /api --reload
Backend deploy - docker build
docker build -t marakratt .
docker run -p 8000:8000 marakratt
To detach running process from user session: Ctrl + Z bg disown
Deploy test
/srv/html/test/ is accessible as "/" from http://täpp.edu.ee/test/ api is accessible at from http://täpp.edu.ee/test/api/
NB! replace "aader" with your username
REACT_APP_API_ENDPOINT=https://xn--tpp-qla.edu.ee/test/api PUBLIC_URL=/test/marakratt/ yarn build
rsync -rv build/ aader@192.168.1.110:marakratt/
ssh aader@192.168.1.110 "rsync -rv marakratt/ mindtitan@xn--tpp-qla.edu.ee:/srv/html/test/marakratt/"
Backend deploy:
rsync -rv --exclude data backend/ aader@192.168.1.110:marakratt-backend/
ssh aader@192.168.1.110 "rsync -rv marakratt-backend/ mindtitan@xn--tpp-qla.edu.ee:/srv/marakratt-api-test/"
# ssh int täpp.edu.ee
cd /srv/marakratt-api-test/
export CLIENT_API_AUTH="{pixel api basic auth key goes here}"
source .venv/bin/activate
pip install -r requirements.txt
killall uvicorn
uvicorn main:app --root-path /test/api --reload
Backend deploy - docker build
docker build -t marakratt .
docker run -p 8001:8000 marakratt
To detach running process from user session: Ctrl + Z bg disown