Merge pull request #40 from LBlend/dev

.github/workflows/DockerPublish.yml

@@ -0,0 +1,52 @@
+name: Publish Docker images
+on:
+  release:
+    types: [published]
+jobs:
+  push_to_registry:
+    name: Push Docker image to GitHub Packages
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v2
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v1
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GH_DOCKER }}
+
+      - name: Build and push frontend
+        uses: docker/build-push-action@v2
+        with:
+          push: true
+          file: ./frontend/Dockerfile
+          labels: |
+            org.opencontainers.image.source=https://github.com/${{ github.repository }}/tree/main/frontend
+            org.opencontainers.image.authors=${{ github.actor }}
+            org.opencontainers.image.url=https://github.com/${{ github.repository }}
+            org.opencontainers.image.documentation=https://github.com/${{ github.repository }}/blob/main/README.md
+            org.opencontainers.image.version=${{ github.event.release.tag_name }}
+            org.opencontainers.image.vendor=${{ github.actor }}
+            org.opencontainers.image.title=mann-eller-kvinne frontend
+            org.opencontainers.image.description=Frontend for mann-eller-kvinne
+          tags: |
+            ghcr.io/lblend/mann-eller-kvinne:frontend-${{ github.event.release.tag_name }}
+
+      - name: Build and push backend
+        uses: docker/build-push-action@v2
+        with:
+          push: true
+          file: ./backend/Dockerfile
+          labels: |
+            org.opencontainers.image.source=https://github.com/${{ github.repository }}/tree/main/backend
+            org.opencontainers.image.authors=${{ github.actor }}
+            org.opencontainers.image.url=https://github.com/${{ github.repository }}
+            org.opencontainers.image.documentation=https://github.com/${{ github.repository }}/blob/main/README.md
+            org.opencontainers.image.version=${{ github.event.release.tag_name }}
+            org.opencontainers.image.vendor=${{ github.actor }}
+            org.opencontainers.image.title=mann-eller-kvinne backend
+            org.opencontainers.image.description=Backend for mann-eller-kvinne
+          tags: |
+            ghcr.io/lblend/mann-eller-kvinne:backend-${{ github.event.release.tag_name }}

.github/workflows/JavascriptLint.yml

@@ -1,6 +1,9 @@
 name: JavaScript Linting
 
-on: push
+on:
+  push:
+    paths:
+      - "frontend/src/**"
 
 jobs:
   tests:

.github/workflows/PythonLint.yml

@@ -1,25 +1,28 @@
 name: Python Linting
 
-on: push
-
+on:
+  push:
+    paths:
+      - "backend/src/**"
 
 jobs:
-    tests:
-        runs-on: ubuntu-latest
+  tests:
+    runs-on: ubuntu-latest
 
-        steps:
-            - uses: actions/checkout@v2
+    steps:
+      - uses: actions/checkout@v2
 
-            - name: Set up Python
-              uses: actions/setup-python@v1
-              with:
-                python-version: '3.8'
+      - name: Set up Python
+        uses: actions/setup-python@v1
+        with:
+          python-version: '3.8'
 
-            - name: Install dependencies
-              run: |
-                python -m pip install -U pip
-                pip install -r ./backend/requirements.txt
-            - name: Flake8 Lint
-              run: |
-                pip install flake8
-                flake8 --max-line-length=120 --show-source
+      - name: Install dependencies
+        run: |
+          python -m pip install -U pip
+          pip install -r ./backend/requirements.txt
+      
+      - name: Flake8 Lint
+        run: |
+          pip install flake8
+          flake8 --max-line-length=120 --show-source

.gitignore

@@ -21,6 +21,7 @@ build/
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

README-en.md

@@ -22,10 +22,17 @@ In other words, you should think critically about the results. This project's is
 
 <details>
   <summary>Docker</summary>
+
+1. Rename the `.env.example` files in the [frontend](frontend) and [backend](backend) folder to `.env` and replace the values within them with your own.
 
-We recommend using docker-compose
+#### ⚠️ Regarding ports ⚠️
+It is important that the port numbers within the `.env` file, the [docker-compose.yml](docker-compose.yml) file and `dockerfile` files comply with each other. If you don't know what you're doing we recommend that you stay away from changing anything regarding ports. This is a tedious way of doing things but we are looking to improve this process in the future and make it easier to change ports when using Docker.
 
-`docker-compose up`
+2. Build the Docker images and run them. We recommend using docker-compose
+
+```
+docker-compose up
+```
 
 </details>
 
@@ -44,15 +51,19 @@ We recommend using docker-compose
 1. Run the backend build script from the /backend folder
    `sh build_model.sh`
 
-2. Run the API with Python
+2. Change the name of the file [.env.example](backend/.env.example) to `.env` og replace the values within it with your own
+
+3. Run the API with Python
    `python3 src/api.py`
 
 #### Frontend
 
 1. Install frontend dependencies  
    `npm i`
 
-2. Run the website with Node
+2. Change the name of the file [.env.example](frontend/.env.example) to `.env` og replace the values within it with your own
+
+3. Run the website with Node
    `npm start`
 
 </details>

README.md

@@ -27,8 +27,13 @@ Man skal dermed ikke ta denne så seriøst. Dette er bare et prosjekt laget for
 
 <details>
   <summary>Docker</summary>
+
+1. Gjør om navnet på `.env.example` filene i [frontend](frontend)- og [backend](backend)mappa til `.env` og erstatt verdiene med dine egne
+
+#### ⚠️ Angående porter ⚠️
+For å unngå problemer er det viktig at portene i `.env` filene, [docker-compose.yml](docker-compose.yml) filen og `dockerfile` i både frontend og backend samsvarer. Unngå å endre porter om du ikke vet hva du driver med. Vi vet dette er en dårlig løsning, men vi vil forbedre spesifisering av porter for Docker i fremtiden.
 
-Det er ulike måter å gå fram på her, men det anbefales å bruke docker-compose
+2. Bygg docker-bildene og kjør dem. Det er ulike måter å gå fram på her, men det anbefales å bruke docker-compose
 
 ```
 docker-compose up
@@ -53,7 +58,9 @@ docker-compose up
    sh build_model.sh
    ```
 
-2. Kjør API-et med Python
+2. Endre navnet på [.env.example](backend/.env.example) til `.env` og erstatt verdiene med dine egne
+
+3. Kjør API-et med Python
    ```
    python3 src/api.py
    ```
@@ -65,7 +72,9 @@ docker-compose up
    npm i
    ```
 
-2. Kjør websiden med Node
+2. Endre navnet på [.env.example](frontend/.env.example) til `.env` og erstatt verdiene med dine egne
+
+3. Kjør websiden med Node
    ```
    npm start
    ```

backend/.env.example

@@ -0,0 +1,2 @@
+FRONTEND_URL=https://mannellerkvinne.lblend.moe
+PORT=5000

backend/Dockerfile

@@ -10,6 +10,6 @@ RUN sh build_backend.sh
 
 ENV PORT=5000
 
-EXPOSE 3000
+EXPOSE 5000
 
 CMD ["python3", "./src/api.py"]

backend/requirements.txt

@@ -1,3 +1,4 @@
+python-dotenv
 tdqm
 numpy==1.19.5
 nltk

backend/src/api.py

@@ -3,11 +3,19 @@
 
 import classifier
 
+from dotenv import load_dotenv
+from os import getenv
+
+
+load_dotenv()
+frontend_url = getenv('FRONTEND_URL')
+port = getenv('PORT')
+
 
 app = Flask(__name__)
-CORS(app, resources={r'/*': {'origins': ['https://mannellerkvinne.lblend.moe', 'http://localhost:3000']}})
+CORS(app, resources={r'/*': {'origins': [frontend_url, f'http://localhost:{port}']}})
 cross_origin(
-    origins=['https://mannellerkvinne.lblend.moe', 'http://localhost:3000'],
+    origins=[frontend_url, f'http://localhost:{port}'],
     methods=['GET', 'POST'],
     always_send=True,
     automatic_options=True,
@@ -46,4 +54,4 @@ def mann_eller_kvinne():
 
 
 if __name__ == '__main__':
-    app.run(host='0.0.0.0', port=5000)
+    app.run(host='0.0.0.0', port=port)

frontend/.env.example

@@ -0,0 +1,2 @@
+REACT_APP_API_URL=https://genderapi.lblend.moe
+PORT=3000

frontend/package.json

@@ -36,5 +36,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "dotenv": "^8.2.0"
   }
 }

frontend/src/api/API.js

@@ -1,5 +1,4 @@
-const apiBaseUrl = 'https://genderapi.lblend.moe'
-// const apiBaseUrl = 'http://127.0.0.1:5000'
+const apiBaseUrl = process.env.REACT_APP_API_URL
 
 export const predict = async (text, toggle) => {
   if (text.length > 50000) {