├── .env ├── .gitignore ├── backend ├── .dockerignore ├── .env ├── Dockerfile ├── django_app │ ├── mainapp │ │ ├── __init__.py │ │ ├── asgi.py │ │ ├── local_settings.py │ │ ├── settings.py │ │ ├── urls.py │ │ └── wsgi.py │ ├── manage.py │ ├── prediction │ │ ├── __init__.py │ │ ├── admin.py │ │ ├── apps.py │ │ ├── mlmodel │ │ │ └── IRISRandomForestClassifier.joblib │ │ ├── models.py │ │ ├── tests.py │ │ ├── urls.py │ │ └── views.py │ └── users │ │ ├── __init__.py │ │ ├── admin.py │ │ ├── apps.py │ │ ├── models.py │ │ ├── tests.py │ │ ├── urls.py │ │ └── views.py ├── entrypoint.sh └── requirements.txt ├── docker-compose.yml ├── frontend ├── .dockerignore ├── Dockerfile └── react_app │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.js │ ├── App.test.js │ ├── Urls.js │ ├── components │ │ ├── Footer.js │ │ ├── Home.js │ │ ├── Layout.js │ │ ├── Login.js │ │ ├── PasswordUpdate.js │ │ └── TopBar.js │ ├── index.js │ ├── serviceWorker.js │ ├── settings.js │ ├── setupTests.js │ └── store │ │ ├── authActionTypes.js │ │ ├── authActions.js │ │ └── authReducer.js │ └── yarn.lock ├── nginx ├── Dockerfile └── nginx.conf └── postgres └── .env /.env: -------------------------------------------------------------------------------- 1 | #ENV_API_SERVER=www.example.com Note: for running locally this should be either left blank or set as http://127.0.0.1 2 | 3 | ENV_API_SERVER=http://127.0.0.1 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ### Django ### 2 | **/env/* 3 | **/localPythonEnv/* 4 | /.vscode 5 | .vscode 6 | *.log 7 | *.pot 8 | *.pyc 9 | __pycache__/ 10 | #**/migrations/* 11 | **/.ipynb_checkpoints/* 12 | #local_settings.py 13 | #db.sqlite3 14 | #/media/uploads 15 | #/media/profile_pics 16 | **/static/* 17 | #/media/article_pics/articles 18 | 19 | ### Node and React ### 20 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 21 | 22 | # dependencies 23 | **/node_modules/* 24 | **/.pnp 25 | .pnp.js 26 | 27 | # testing 28 | **/coverage/* 29 | 30 | # production 31 | **/build/* 32 | 33 | # misc 34 | .env.local 35 | .env.development.local 36 | .env.test.local 37 | .env.production.local 38 | 39 | npm-debug.log* 40 | yarn-debug.log* 41 | yarn-error.log* 42 | 43 | 44 | ### Apple Mac cleverness 45 | .DS_Store 46 | -------------------------------------------------------------------------------- /backend/.dockerignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | *.log 3 | *.pot 4 | *.pyc 5 | __pycache__/ 6 | **/static/* -------------------------------------------------------------------------------- /backend/.env: -------------------------------------------------------------------------------- 1 | DJANGO_ENV=production 2 | DEBUG=0 3 | SECRET_KEY=secretsecretsecretsecretsecret 4 | DJANGO_ALLOWED_HOSTS=www.example.com localhost 127.0.0.1 [::1] 5 | 6 | DJANGO_ADMIN_USER=admin 7 | DJANGO_ADMIN_EMAIL=admin@example.com 8 | DJANGO_ADMIN_PASSWORD=admin_password 9 | 10 | DATABASE=postgres 11 | 12 | DB_ENGINE=django.db.backends.postgresql 13 | DB_DATABASE=predictiondb 14 | DB_USER=postgres_user 15 | DB_PASSWORD=postgres_password 16 | DB_HOST=db 17 | DB_PORT=5432 18 | -------------------------------------------------------------------------------- /backend/Dockerfile: -------------------------------------------------------------------------------- 1 | ########### 2 | # BUILDER # 3 | ########### 4 | 5 | # pull official base image 6 | FROM python:3.7.9-slim-stretch as builder 7 | 8 | # set work directory 9 | WORKDIR /usr/src/app 10 | 11 | # set environment variables 12 | ENV PYTHONDONTWRITEBYTECODE 1 13 | ENV PYTHONUNBUFFERED 1 14 | 15 | # install dependencies 16 | COPY ./requirements.txt . 17 | RUN pip wheel --no-cache-dir --no-deps --wheel-dir /usr/src/app/wheels -r requirements.txt 18 | 19 | 20 | ######### 21 | # FINAL # 22 | ######### 23 | 24 | # pull official base image 25 | FROM python:3.7.9-slim-stretch 26 | 27 | # installing netcat (nc) since we are using that to listen to postgres server in entrypoint.sh 28 | RUN apt-get update && apt-get install -y --no-install-recommends netcat && \ 29 | apt-get autoremove -y && \ 30 | apt-get clean && \ 31 | rm -rf /var/lib/apt/lists/* 32 | 33 | # install dependencies 34 | COPY --from=builder /usr/src/app/wheels /wheels 35 | COPY --from=builder /usr/src/app/requirements.txt . 36 | RUN pip install --no-cache /wheels/* 37 | 38 | # set work directory 39 | WORKDIR /usr/src/app 40 | 41 | # copy entrypoint.sh 42 | COPY ./entrypoint.sh /usr/src/app/entrypoint.sh 43 | 44 | # copy our django project 45 | COPY ./django_app . 46 | 47 | # run entrypoint.sh 48 | RUN chmod +x /usr/src/app/entrypoint.sh 49 | ENTRYPOINT ["/usr/src/app/entrypoint.sh"] -------------------------------------------------------------------------------- /backend/django_app/mainapp/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MausamGaurav/DockerDjangoReactProject/67bcd40b3c4fab1467bf5d6486702d6cf8d4f7c4/backend/django_app/mainapp/__init__.py -------------------------------------------------------------------------------- /backend/django_app/mainapp/asgi.py: -------------------------------------------------------------------------------- 1 | """ 2 | ASGI config for mainapp project. 3 | 4 | It exposes the ASGI callable as a module-level variable named ``application``. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/3.1/howto/deployment/asgi/ 8 | """ 9 | 10 | import os 11 | 12 | from django.core.asgi import get_asgi_application 13 | 14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'mainapp.settings') 15 | 16 | application = get_asgi_application() 17 | -------------------------------------------------------------------------------- /backend/django_app/mainapp/local_settings.py: -------------------------------------------------------------------------------- 1 | import os 2 | BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 3 | 4 | ################################################################# 5 | ## Get Django environment set by docker (i.e either development or production), or else set it to local ## 6 | ################################################################# 7 | try: 8 | DJANGO_ENV = os.environ.get("DJANGO_ENV") 9 | except: 10 | DJANGO_ENV = 'local' 11 | 12 | ################################################################# 13 | ## If Django environement has been set by docker it would be either development or production otherwise it would be undefined or local ## 14 | ################################################################# 15 | if DJANGO_ENV == 'development' or DJANGO_ENV == 'production': 16 | 17 | try: 18 | SECRET_KEY = os.environ.get("SECRET_KEY") 19 | except: 20 | SECRET_KEY = 'localsecret' 21 | 22 | try: 23 | DEBUG = int(os.environ.get("DEBUG", default=0)) 24 | except: 25 | DEBUG = False 26 | 27 | try: 28 | ALLOWED_HOSTS = os.environ.get("DJANGO_ALLOWED_HOSTS").split(" ") 29 | except: 30 | ALLOWED_HOSTS = ['127.0.0.1', '0.0.0.0', 'localhost'] 31 | 32 | DATABASES = { 33 | "default": { 34 | "ENGINE": os.environ.get("DB_ENGINE", "django.db.backends.sqlite3"), 35 | "NAME": os.environ.get("DB_DATABASE", os.path.join(BASE_DIR, "db.sqlite3")), 36 | "USER": os.environ.get("DB_USER", "user"), 37 | "PASSWORD": os.environ.get("DB_PASSWORD", "password"), 38 | "HOST": os.environ.get("DB_HOST", "localhost"), 39 | "PORT": os.environ.get("DB_PORT", "5432"), 40 | } 41 | } 42 | else: 43 | SECRET_KEY = 'localsecret' 44 | DEBUG = True 45 | ALLOWED_HOSTS = ['127.0.0.1', '0.0.0.0', 'localhost'] 46 | DATABASES = { 47 | 'default': { 48 | 'ENGINE': 'django.db.backends.postgresql_psycopg2', 49 | 'NAME': 'predictiondb', 50 | 'USER': 'postgres_user', 51 | 'PASSWORD': 'postgres_password', 52 | 'HOST': '127.0.0.1', 53 | 'PORT': '5432', 54 | } 55 | } 56 | 57 | ################################################################# 58 | ## (CORS) Cross-Origin Resource Sharing Settings ## 59 | ################################################################# 60 | CORS_ORIGIN_ALLOW_ALL = True 61 | 62 | 63 | ################################################################# 64 | ## STATIC FILES ROOT AND URL ## 65 | ################################################################# 66 | 67 | STATIC_ROOT = os.path.join(BASE_DIR, 'static') 68 | STATIC_URL = '/static/' -------------------------------------------------------------------------------- /backend/django_app/mainapp/settings.py: -------------------------------------------------------------------------------- 1 | """ 2 | Django settings for mainapp project. 3 | 4 | Generated by 'django-admin startproject' using Django 3.1. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/3.1/topics/settings/ 8 | 9 | For the full list of settings and their values, see 10 | https://docs.djangoproject.com/en/3.1/ref/settings/ 11 | """ 12 | 13 | from pathlib import Path 14 | 15 | # Build paths inside the project like this: BASE_DIR / 'subdir'. 16 | BASE_DIR = Path(__file__).resolve(strict=True).parent.parent 17 | 18 | 19 | # Quick-start development settings - unsuitable for production 20 | # See https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/ 21 | 22 | # SECURITY WARNING: keep the secret key used in production secret! 23 | SECRET_KEY = '9-yitn09*pi)q08z7r*d!d341uh+$a)ck-9^jezk=k67t*1)#^' 24 | 25 | # SECURITY WARNING: don't run with debug turned on in production! 26 | DEBUG = True 27 | 28 | ALLOWED_HOSTS = [] 29 | 30 | 31 | # Application definition 32 | 33 | INSTALLED_APPS = [ 34 | 'django.contrib.admin', 35 | 'django.contrib.auth', 36 | 'django.contrib.contenttypes', 37 | 'django.contrib.sessions', 38 | 'django.contrib.messages', 39 | 'django.contrib.staticfiles', 40 | 41 | 'rest_framework', 42 | 'rest_framework.authtoken', 43 | 'rest_auth', 44 | 'corsheaders', 45 | 46 | 'prediction', 47 | 'users', 48 | ] 49 | 50 | MIDDLEWARE = [ 51 | 'corsheaders.middleware.CorsMiddleware', 52 | 'django.middleware.security.SecurityMiddleware', 53 | 'django.contrib.sessions.middleware.SessionMiddleware', 54 | 'django.middleware.common.CommonMiddleware', 55 | 'django.middleware.csrf.CsrfViewMiddleware', 56 | 'django.contrib.auth.middleware.AuthenticationMiddleware', 57 | 'django.contrib.messages.middleware.MessageMiddleware', 58 | 'django.middleware.clickjacking.XFrameOptionsMiddleware', 59 | ] 60 | 61 | ROOT_URLCONF = 'mainapp.urls' 62 | 63 | TEMPLATES = [ 64 | { 65 | 'BACKEND': 'django.template.backends.django.DjangoTemplates', 66 | 'DIRS': [], 67 | 'APP_DIRS': True, 68 | 'OPTIONS': { 69 | 'context_processors': [ 70 | 'django.template.context_processors.debug', 71 | 'django.template.context_processors.request', 72 | 'django.contrib.auth.context_processors.auth', 73 | 'django.contrib.messages.context_processors.messages', 74 | ], 75 | }, 76 | }, 77 | ] 78 | 79 | WSGI_APPLICATION = 'mainapp.wsgi.application' 80 | 81 | 82 | # Database 83 | # https://docs.djangoproject.com/en/3.1/ref/settings/#databases 84 | 85 | DATABASES = { 86 | 'default': { 87 | 'ENGINE': 'django.db.backends.sqlite3', 88 | 'NAME': BASE_DIR / 'db.sqlite3', 89 | } 90 | } 91 | 92 | 93 | # Password validation 94 | # https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators 95 | 96 | AUTH_PASSWORD_VALIDATORS = [ 97 | { 98 | 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', 99 | }, 100 | { 101 | 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', 102 | }, 103 | { 104 | 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', 105 | }, 106 | { 107 | 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', 108 | }, 109 | ] 110 | 111 | 112 | # Internationalization 113 | # https://docs.djangoproject.com/en/3.1/topics/i18n/ 114 | 115 | LANGUAGE_CODE = 'en-us' 116 | 117 | TIME_ZONE = 'UTC' 118 | 119 | USE_I18N = True 120 | 121 | USE_L10N = True 122 | 123 | USE_TZ = True 124 | 125 | 126 | # Static files (CSS, JavaScript, Images) 127 | # https://docs.djangoproject.com/en/3.1/howto/static-files/ 128 | 129 | STATIC_URL = '/static/' 130 | 131 | 132 | ######################################### 133 | ## IMPORT LOCAL SETTINGS ## 134 | ######################################### 135 | 136 | try: 137 | from .local_settings import * 138 | except ImportError: 139 | pass 140 | -------------------------------------------------------------------------------- /backend/django_app/mainapp/urls.py: -------------------------------------------------------------------------------- 1 | """mainapp URL Configuration 2 | 3 | The `urlpatterns` list routes URLs to views. For more information please see: 4 | https://docs.djangoproject.com/en/3.1/topics/http/urls/ 5 | Examples: 6 | Function views 7 | 1. Add an import: from my_app import views 8 | 2. Add a URL to urlpatterns: path('', views.home, name='home') 9 | Class-based views 10 | 1. Add an import: from other_app.views import Home 11 | 2. Add a URL to urlpatterns: path('', Home.as_view(), name='home') 12 | Including another URLconf 13 | 1. Import the include() function: from django.urls import include, path 14 | 2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) 15 | """ 16 | from django.contrib import admin 17 | from django.urls import path, include 18 | 19 | urlpatterns = [ 20 | path('admin/', admin.site.urls), 21 | path('api/auth/', include('users.urls')), 22 | path('api/', include('prediction.urls')), 23 | ] 24 | -------------------------------------------------------------------------------- /backend/django_app/mainapp/wsgi.py: -------------------------------------------------------------------------------- 1 | """ 2 | WSGI config for mainapp project. 3 | 4 | It exposes the WSGI callable as a module-level variable named ``application``. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/3.1/howto/deployment/wsgi/ 8 | """ 9 | 10 | import os 11 | 12 | from django.core.wsgi import get_wsgi_application 13 | 14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'mainapp.settings') 15 | 16 | application = get_wsgi_application() 17 | -------------------------------------------------------------------------------- /backend/django_app/manage.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python 2 | """Django's command-line utility for administrative tasks.""" 3 | import os 4 | import sys 5 | 6 | 7 | def main(): 8 | """Run administrative tasks.""" 9 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'mainapp.settings') 10 | try: 11 | from django.core.management import execute_from_command_line 12 | except ImportError as exc: 13 | raise ImportError( 14 | "Couldn't import Django. Are you sure it's installed and " 15 | "available on your PYTHONPATH environment variable? Did you " 16 | "forget to activate a virtual environment?" 17 | ) from exc 18 | execute_from_command_line(sys.argv) 19 | 20 | 21 | if __name__ == '__main__': 22 | main() 23 | -------------------------------------------------------------------------------- /backend/django_app/prediction/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MausamGaurav/DockerDjangoReactProject/67bcd40b3c4fab1467bf5d6486702d6cf8d4f7c4/backend/django_app/prediction/__init__.py -------------------------------------------------------------------------------- /backend/django_app/prediction/admin.py: -------------------------------------------------------------------------------- 1 | from django.contrib import admin 2 | 3 | # Register your models here. 4 | -------------------------------------------------------------------------------- /backend/django_app/prediction/apps.py: -------------------------------------------------------------------------------- 1 | from django.apps import AppConfig 2 | import pandas as pd 3 | from joblib import load 4 | import os 5 | 6 | class PredictionConfig(AppConfig): 7 | name = 'prediction' 8 | BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 9 | MLMODEL_FOLDER = os.path.join(BASE_DIR, 'prediction/mlmodel/') 10 | MLMODEL_FILE = os.path.join(MLMODEL_FOLDER, "IRISRandomForestClassifier.joblib") 11 | mlmodel = load(MLMODEL_FILE) -------------------------------------------------------------------------------- /backend/django_app/prediction/mlmodel/IRISRandomForestClassifier.joblib: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MausamGaurav/DockerDjangoReactProject/67bcd40b3c4fab1467bf5d6486702d6cf8d4f7c4/backend/django_app/prediction/mlmodel/IRISRandomForestClassifier.joblib -------------------------------------------------------------------------------- /backend/django_app/prediction/models.py: -------------------------------------------------------------------------------- 1 | from django.db import models 2 | 3 | # Create your models here. 4 | -------------------------------------------------------------------------------- /backend/django_app/prediction/tests.py: -------------------------------------------------------------------------------- 1 | from django.test import TestCase 2 | 3 | # Create your tests here. 4 | -------------------------------------------------------------------------------- /backend/django_app/prediction/urls.py: -------------------------------------------------------------------------------- 1 | from django.urls import path 2 | import prediction.views as views 3 | 4 | urlpatterns = [ 5 | path('predict/', views.IRIS_Model_Predict.as_view(), name = 'api_predict'), 6 | ] -------------------------------------------------------------------------------- /backend/django_app/prediction/views.py: -------------------------------------------------------------------------------- 1 | from rest_framework import status 2 | from rest_framework.decorators import api_view 3 | from rest_framework.response import Response 4 | from rest_framework.views import APIView 5 | 6 | from rest_framework.authentication import TokenAuthentication 7 | from rest_framework.permissions import IsAuthenticated 8 | 9 | from prediction.apps import PredictionConfig 10 | import pandas as pd 11 | 12 | # Create your views here. 13 | # Class based view to predict based on IRIS model 14 | class IRIS_Model_Predict(APIView): 15 | authentication_classes = [TokenAuthentication] 16 | permission_classes = [IsAuthenticated] 17 | 18 | def post(self, request, format=None): 19 | data = request.data 20 | keys = [] 21 | values = [] 22 | for key in data: 23 | keys.append(key) 24 | values.append(data[key]) 25 | X = pd.Series(values).to_numpy().reshape(1, -1) 26 | loaded_mlmodel = PredictionConfig.mlmodel 27 | y_pred = loaded_mlmodel.predict(X) 28 | y_pred = pd.Series(y_pred) 29 | target_map = {0: 'setosa', 1: 'versicolor', 2: 'virginica'} 30 | y_pred = y_pred.map(target_map).to_numpy() 31 | response_dict = {"Predicted Iris Species": y_pred[0]} 32 | return Response(response_dict, status=200) -------------------------------------------------------------------------------- /backend/django_app/users/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MausamGaurav/DockerDjangoReactProject/67bcd40b3c4fab1467bf5d6486702d6cf8d4f7c4/backend/django_app/users/__init__.py -------------------------------------------------------------------------------- /backend/django_app/users/admin.py: -------------------------------------------------------------------------------- 1 | from django.contrib import admin 2 | 3 | # Register your models here. 4 | -------------------------------------------------------------------------------- /backend/django_app/users/apps.py: -------------------------------------------------------------------------------- 1 | from django.apps import AppConfig 2 | 3 | 4 | class UsersConfig(AppConfig): 5 | name = 'users' 6 | -------------------------------------------------------------------------------- /backend/django_app/users/models.py: -------------------------------------------------------------------------------- 1 | from django.db import models 2 | 3 | # Create your models here. 4 | -------------------------------------------------------------------------------- /backend/django_app/users/tests.py: -------------------------------------------------------------------------------- 1 | from django.test import TestCase 2 | 3 | # Create your tests here. 4 | -------------------------------------------------------------------------------- /backend/django_app/users/urls.py: -------------------------------------------------------------------------------- 1 | from django.urls import path, include 2 | 3 | from users.views import APILoginView, APILogoutView, APIPasswordUpdateView 4 | urlpatterns = [ 5 | path('login/', APILoginView.as_view(), name='api_login'), 6 | path('logout/', APILogoutView.as_view(), name='api_logout'), 7 | path('update_password/', APIPasswordUpdateView.as_view(), name='api_update_password'), 8 | ] -------------------------------------------------------------------------------- /backend/django_app/users/views.py: -------------------------------------------------------------------------------- 1 | from rest_auth.views import (LoginView, LogoutView, PasswordChangeView) 2 | from rest_framework.authentication import TokenAuthentication 3 | from rest_framework.permissions import IsAuthenticated 4 | 5 | # Create your views here. 6 | class APILogoutView(LogoutView): 7 | authentication_classes = [TokenAuthentication] 8 | permission_classes = [IsAuthenticated] 9 | 10 | class APILoginView(LoginView): 11 | pass 12 | 13 | class APIPasswordUpdateView(PasswordChangeView): 14 | authentication_classes = [TokenAuthentication] -------------------------------------------------------------------------------- /backend/entrypoint.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | if [ "$DATABASE" = "postgres" ] 3 | then 4 | echo "Waiting for postgres..." 5 | 6 | while ! nc -z $DB_HOST $DB_PORT; do 7 | sleep 0.1 8 | done 9 | 10 | echo "PostgreSQL started" 11 | fi 12 | 13 | python manage.py collectstatic --noinput 14 | python manage.py migrate --noinput 15 | echo "from django.contrib.auth.models import User; 16 | User.objects.filter(email='$DJANGO_ADMIN_EMAIL').delete(); 17 | User.objects.create_superuser('$DJANGO_ADMIN_USER', '$DJANGO_ADMIN_EMAIL', '$DJANGO_ADMIN_PASSWORD')" | python manage.py shell 18 | 19 | exec "$@" -------------------------------------------------------------------------------- /backend/requirements.txt: -------------------------------------------------------------------------------- 1 | Django==3.1 2 | djangorestframework==3.11.1 3 | django-rest-auth==0.9.5 4 | django-cors-headers==3.5.0 5 | psycopg2-binary==2.8.5 6 | pandas==1.1.1 7 | scikit-learn==0.23.2 8 | joblib==0.16.0 9 | gunicorn==20.0.4 -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: "3.7" 2 | 3 | services: 4 | django: 5 | build: 6 | context: ./backend 7 | dockerfile: Dockerfile 8 | volumes: 9 | - django_static_volume:/usr/src/app/static 10 | expose: 11 | - 8000 12 | env_file: 13 | - ./backend/.env 14 | command: gunicorn mainapp.wsgi:application --bind 0.0.0.0:8000 15 | depends_on: 16 | - db 17 | db: 18 | image: postgres:12.0-alpine 19 | volumes: 20 | - postgres_data:/var/lib/postgresql/data/ 21 | env_file: 22 | - ./postgres/.env 23 | react: 24 | build: 25 | context: ./frontend 26 | dockerfile: Dockerfile 27 | args: 28 | - API_SERVER=${ENV_API_SERVER} 29 | volumes: 30 | - react_static_volume:/usr/src/app/build/static 31 | expose: 32 | - 3000 33 | env_file: 34 | - .env 35 | command: serve -s build -l 3000 36 | depends_on: 37 | - django 38 | 39 | nginx: 40 | restart: always 41 | build: ./nginx 42 | volumes: 43 | - django_static_volume:/usr/src/app/django_files/static 44 | - react_static_volume:/usr/src/app/react_files/static 45 | ports: 46 | - 80:80 47 | depends_on: 48 | - react 49 | 50 | volumes: 51 | postgres_data: 52 | django_static_volume: 53 | react_static_volume: 54 | -------------------------------------------------------------------------------- /frontend/.dockerignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | .log 3 | npm-debug.log* 4 | yarn-debug.log* 5 | yarn-error.log* 6 | /react_app/node_modules 7 | /react_app/.pnp 8 | .pnp.js 9 | -------------------------------------------------------------------------------- /frontend/Dockerfile: -------------------------------------------------------------------------------- 1 | ########### 2 | # BUILDER # 3 | ########### 4 | 5 | # pull official base image 6 | FROM node:12.18.3-alpine3.9 as builder 7 | 8 | # set work directory 9 | WORKDIR /usr/src/app 10 | 11 | # install dependencies and avoid `node-gyp rebuild` errors 12 | COPY ./react_app/package.json . 13 | RUN apk add --no-cache --virtual .gyp \ 14 | python \ 15 | make \ 16 | g++ \ 17 | && npm install \ 18 | && apk del .gyp 19 | 20 | # copy our react project 21 | COPY ./react_app . 22 | 23 | # perform npm build 24 | ARG API_SERVER 25 | ENV REACT_APP_API_SERVER=${API_SERVER} 26 | RUN REACT_APP_API_SERVER=${API_SERVER} \ 27 | npm run build 28 | 29 | ######### 30 | # FINAL # 31 | ######### 32 | 33 | # pull official base image 34 | FROM node:12.18.3-alpine3.9 35 | 36 | # set work directory 37 | WORKDIR /usr/src/app 38 | 39 | # install serve - deployment static server suggested by official create-react-app 40 | RUN npm install -g serve 41 | 42 | # copy our build files from our builder stage 43 | COPY --from=builder /usr/src/app/build ./build -------------------------------------------------------------------------------- /frontend/react_app/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `yarn start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `yarn test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `yarn build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `yarn eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `yarn build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /frontend/react_app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react_app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@material-ui/core": "^4.11.0", 7 | "@material-ui/icons": "^4.9.1", 8 | "@testing-library/jest-dom": "^4.2.4", 9 | "@testing-library/react": "^9.3.2", 10 | "@testing-library/user-event": "^7.1.2", 11 | "axios": "^0.20.0", 12 | "react": "^16.13.1", 13 | "react-dom": "^16.13.1", 14 | "react-redux": "^7.2.1", 15 | "react-router-dom": "^5.2.0", 16 | "react-scripts": "3.4.3", 17 | "redux": "^4.0.5", 18 | "redux-thunk": "^2.3.0" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": "react-app" 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /frontend/react_app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MausamGaurav/DockerDjangoReactProject/67bcd40b3c4fab1467bf5d6486702d6cf8d4f7c4/frontend/react_app/public/favicon.ico -------------------------------------------------------------------------------- /frontend/react_app/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /frontend/react_app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MausamGaurav/DockerDjangoReactProject/67bcd40b3c4fab1467bf5d6486702d6cf8d4f7c4/frontend/react_app/public/logo192.png -------------------------------------------------------------------------------- /frontend/react_app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MausamGaurav/DockerDjangoReactProject/67bcd40b3c4fab1467bf5d6486702d6cf8d4f7c4/frontend/react_app/public/logo512.png -------------------------------------------------------------------------------- /frontend/react_app/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /frontend/react_app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /frontend/react_app/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Urls from './Urls'; 3 | import Layout from './components/Layout'; 4 | import {connect} from 'react-redux'; 5 | import * as actions from './store/authActions'; 6 | 7 | 8 | function App(props) { 9 | 10 | // Similar to componentDidMount and componentDidUpdate: 11 | React.useEffect(() => { 12 | props.setAuthenticatedIfRequired(); 13 | }, []); 14 | 15 | return ( 16 |
17 | 18 | 19 | 20 |
21 | ); 22 | } 23 | 24 | //This means that one or more of the redux states in the store are available as props 25 | const mapStateToProps = (state) => { 26 | return { 27 | isAuthenticated: state.auth.token !== null && typeof state.auth.token !== 'undefined', 28 | token: state.auth.token 29 | } 30 | } 31 | 32 | //This means that one or more of the redux actions in the form of dispatch(action) combinations are available as props 33 | const mapDispatchToProps = (dispatch) => { 34 | return { 35 | setAuthenticatedIfRequired: () => dispatch(actions.authCheckState()), 36 | logout: () => dispatch(actions.authLogout()) 37 | } 38 | } 39 | 40 | export default connect(mapStateToProps, mapDispatchToProps)(App); 41 | -------------------------------------------------------------------------------- /frontend/react_app/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /frontend/react_app/src/Urls.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom"; 3 | 4 | import Login from "./components/Login"; 5 | import Home from "./components/Home"; 6 | import PasswordUpdate from "./components/PasswordUpdate"; 7 | 8 | // A wrapper for that redirects to the login screen if you're not yet authenticated. 9 | function PrivateRoute({ isAuthenticated, children, ...rest}) { 10 | return ( 11 | 14 | isAuthenticated ? ( 15 | children 16 | ) : ( 17 | 23 | ) 24 | } 25 | /> 26 | ); 27 | } 28 | 29 | function Urls(props) { 30 | 31 | return ( 32 |
33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
41 | ) 42 | }; 43 | 44 | export default Urls; -------------------------------------------------------------------------------- /frontend/react_app/src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Typography from '@material-ui/core/Typography'; 3 | import Link from '@material-ui/core/Link'; 4 | 5 | 6 | function Footer() { 7 | return ( 8 | 9 | {'Copyright © '} 10 | 11 | Iris Species Predictor 12 | {' '} 13 | {new Date().getFullYear()} 14 | {'.'} 15 | 16 | ); 17 | } 18 | export default Footer -------------------------------------------------------------------------------- /frontend/react_app/src/components/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import axios from 'axios'; 3 | import * as settings from '../settings'; 4 | 5 | import CssBaseline from '@material-ui/core/CssBaseline'; 6 | import { withStyles, makeStyles } from '@material-ui/core/styles'; 7 | import { Container, Grid, Paper, Typography, Slider, Button } from '@material-ui/core'; 8 | 9 | // ######################################################## 10 | // Material UI inline styles 11 | // ######################################################## 12 | const useStyles = makeStyles((theme) => ({ 13 | container: { 14 | maxWidth: "75%", 15 | marginTop: "15vh", 16 | marginBottom: "10vh", 17 | borderRadius: '6px', 18 | backgroundColor: theme.palette.action.disabledBackground, 19 | }, 20 | title: { 21 | marginTop: theme.spacing(2), 22 | marginBottom: theme.spacing(2), 23 | padding: theme.spacing(2), paddingLeft: theme.spacing(4), 24 | color: theme.palette.primary.main, 25 | }, 26 | sliders: { 27 | paddingTop: theme.spacing(2), 28 | paddingBottom: theme.spacing(2), 29 | paddingLeft: theme.spacing(4), 30 | paddingRight: theme.spacing(4), 31 | marginBottom: theme.spacing(2), 32 | }, 33 | slidertop: { 34 | marginTop: theme.spacing(4), 35 | } 36 | })); 37 | 38 | // ######################################################## 39 | // Our Custom IRIS slider. You may use the default slider instead of this 40 | // ######################################################## 41 | const IrisSlider = withStyles({ 42 | root: { 43 | color: '#751E66', 44 | }, 45 | valueLabel: { 46 | left: 'calc(-50% -2)', 47 | top: -22, 48 | '& *': { 49 | background: 'transparent', 50 | color: '#000', 51 | }, 52 | }, 53 | mark: { 54 | height: 8, 55 | width: 1, 56 | marginTop: -3, 57 | }, 58 | markActive: { 59 | opacity: 1, 60 | backgroundColor: 'currentColor', 61 | }, 62 | })(Slider); 63 | 64 | // Marks on the slider track 65 | const marks = [{ value: 0 }, { value: 10 }]; 66 | 67 | // ######################################################## 68 | // The main Home component returned by this Module 69 | // ######################################################## 70 | function Home(props) { 71 | // Material UI Classes 72 | const classes = useStyles(); 73 | 74 | // React hook state variable - Dimensions 75 | const [dimensions, setDimensions] = React.useState({ 76 | sepal_length: 6, 77 | sepal_width: 6, 78 | petal_length: 6, 79 | petal_width: 6, 80 | }); 81 | // React hook state variable - Prediction 82 | const [prediction, setPrediction] = React.useState(null) 83 | 84 | // Function to update the Dimensions state upon slider value change 85 | const handleSliderChange = name => (event, newValue) => { 86 | setDimensions( 87 | { 88 | ...dimensions, 89 | ...{ [name]: newValue } 90 | } 91 | ); 92 | }; 93 | 94 | // Function to make the predict API call and update the state variable - Prediction 95 | const handlePredict = event => { 96 | // Submit Iris Flower measured dimensions as form data 97 | let irisFormData = new FormData(); 98 | irisFormData.append("sepal length (cm)", dimensions.sepal_length); 99 | irisFormData.append("sepal width (cm)", dimensions.sepal_width); 100 | irisFormData.append("petal length (cm)", dimensions.petal_length); 101 | irisFormData.append("petal width (cm)", dimensions.petal_width); 102 | 103 | //Axios variables required to call the predict API 104 | let headers = { 'Authorization': `Token ${props.token}` }; 105 | let url = settings.API_SERVER + '/api/predict/'; 106 | let method = 'post'; 107 | let config = { headers, method, url, data: irisFormData }; 108 | 109 | //Axios predict API call 110 | axios(config).then( 111 | res => {setPrediction(res.data["Predicted Iris Species"]) 112 | }).catch( 113 | error => {alert(error)}) 114 | 115 | } 116 | 117 | function valuetext(value) { 118 | return `${value} cm`; 119 | } 120 | 121 | return ( 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | Iris Flower Dimensions 130 | 131 | 132 | 133 | 134 | Sepal Length (cm) 135 | 136 | 148 | 149 | Sepal Width (cm) 150 | 151 | 163 | 164 | Petal Length (cm) 165 | 166 | 178 | 179 | Petal Width (cm) 180 | 181 | 193 | 194 | 195 | 196 | 199 | 200 | 201 | 202 | 203 | Predicted Iris Species:   204 | 205 | 206 | {prediction} 207 | 208 | 209 | 210 | 211 | 212 | 213 | ) 214 | } 215 | 216 | export default Home -------------------------------------------------------------------------------- /frontend/react_app/src/components/Layout.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import TopBar from "./TopBar" 3 | import Footer from "./Footer" 4 | import CssBaseline from '@material-ui/core/CssBaseline'; 5 | 6 | 7 | function Layout(props) { 8 | return ( 9 | 10 | 11 | 12 |
13 | {props.children} 14 |
15 |