Skip to content
Snippets Groups Projects
user avatar
Margus Räim authored
103155c8
History

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

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