From 3a5041fbe60f01daaa43a8c59a0906c29605b8a7 Mon Sep 17 00:00:00 2001 From: Gabriel Coloma Date: Tue, 12 Mar 2024 12:01:10 -0500 Subject: [PATCH 01/12] Revert "Removed Deployment files to test docker-hub.yml" This reverts commit 6716f461985bcc9f928e720b50b2aa199a6c602a. --- .github/workflows/DjangoDeployment.yml | 89 ++++++++++++++++++++++++++ .github/workflows/ReactDeployment.yml | 70 ++++++++++++++++++++ 2 files changed, 159 insertions(+) create mode 100644 .github/workflows/DjangoDeployment.yml create mode 100644 .github/workflows/ReactDeployment.yml diff --git a/.github/workflows/DjangoDeployment.yml b/.github/workflows/DjangoDeployment.yml new file mode 100644 index 0000000..2539ccd --- /dev/null +++ b/.github/workflows/DjangoDeployment.yml @@ -0,0 +1,89 @@ +# This workflow will build and push a Python application to an Azure Web App when a commit is pushed to your default branch. +# +# This workflow assumes you have already created the target Azure App Service web app. +# For instructions see https://docs.microsoft.com/en-us/azure/app-service/quickstart-python?tabs=bash&pivots=python-framework-flask +# +# To configure this workflow: +# +# 1. Download the Publish Profile for your Azure Web App. You can download this file from the Overview page of your Web App in the Azure Portal. +# For more information: https://docs.microsoft.com/en-us/azure/app-service/deploy-github-actions?tabs=applevel#generate-deployment-credentials +# +# 2. Create a secret in your repository named AZURE_WEBAPP_PUBLISH_PROFILE, paste the publish profile contents as the value of the secret. +# For instructions on obtaining the publish profile see: https://docs.microsoft.com/azure/app-service/deploy-github-actions#configure-the-github-secret +# +# 3. Change the value for the AZURE_WEBAPP_NAME. Optionally, change the PYTHON_VERSION environment variables below. +# +# For more information on GitHub Actions for Azure: https://github.com/Azure/Actions +# For more information on the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy +# For more samples to get started with GitHub Action workflows to deploy to Azure: https://github.com/Azure/actions-workflow-samples + +name: Build and deploy Python app to Azure Web App + +env: + AZURE_WEBAPP_NAME: lvlupgg-backend # set this to the name of your Azure Web App + PYTHON_VERSION: '3.10' # set this to the Python version to use + +on: + push: + branches: [ "master" ] + workflow_dispatch: + +permissions: + contents: read + +jobs: + build: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v3 + + - name: Set up Python version + uses: actions/setup-python@v3.0.0 + with: + python-version: ${{ env.PYTHON_VERSION }} + cache: 'pip' + + - name: Create and start virtual environment + run: | + python -m venv venv + source venv/bin/activate + + - name: Install dependencies + run: | + pip install -r requirements.txt + pip install djangorestframework + pip install django-cors-headers + + # Optional: Add step to run tests here (PyTest, Django test suites, etc.) + + - name: Upload artifact for deployment jobs + uses: actions/upload-artifact@v3 + with: + name: python-app + path: | + . + !venv/ + + deploy: + permissions: + contents: none + runs-on: ubuntu-latest + needs: build + environment: + name: 'Development' + url: ${{ steps.deploy-to-webapp.outputs.webapp-url }} + + steps: + - name: Download artifact from build job + uses: actions/download-artifact@v3 + with: + name: python-app + path: . + + - name: 'Deploy to Azure Web App' + id: deploy-to-webapp + uses: azure/webapps-deploy@v2 + with: + app-name: ${{ env.AZURE_WEBAPP_NAME }} + publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }} diff --git a/.github/workflows/ReactDeployment.yml b/.github/workflows/ReactDeployment.yml new file mode 100644 index 0000000..79e8bb0 --- /dev/null +++ b/.github/workflows/ReactDeployment.yml @@ -0,0 +1,70 @@ +# This workflow will build and push a web application to an Azure Static Web App when you change your code. +# +# This workflow assumes you have already created the target Azure Static Web App. +# For instructions see https://docs.microsoft.com/azure/static-web-apps/get-started-portal?tabs=vanilla-javascript +# +# To configure this workflow: +# +# 1. Set up a secret in your repository named AZURE_STATIC_WEB_APPS_API_TOKEN with the value of your Static Web Apps deployment token. +# For instructions on obtaining the deployment token see: https://docs.microsoft.com/azure/static-web-apps/deployment-token-management +# +# 3. Change the values for the APP_LOCATION, API_LOCATION and APP_ARTIFACT_LOCATION, AZURE_STATIC_WEB_APPS_API_TOKEN environment variables (below). +# For instructions on setting up the appropriate configuration values go to https://docs.microsoft.com/azure/static-web-apps/front-end-frameworks +name: Deploy web app to Azure Static Web Apps + +on: + push: + branches: [ "master" ] + pull_request: + types: [opened, synchronize, reopened, closed] + branches: [ "master" ] + +# Environment variables available to all jobs and steps in this workflow +env: + APP_LOCATION: "/" # location of your client code + API_LOCATION: "api" # location of your api source code - optional + APP_ARTIFACT_LOCATION: "build" # location of client code build output + AZURE_STATIC_WEB_APPS_API_TOKEN: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} # secret containing deployment token for your static web app + +permissions: + contents: read + +jobs: + build_and_deploy_job: + permissions: + contents: read # for actions/checkout to fetch code + pull-requests: write # for Azure/static-web-apps-deploy to comment on PRs + if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed') + runs-on: ubuntu-latest + name: Build and Deploy Job + steps: + - uses: actions/checkout@v3 + with: + submodules: true + - name: Build And Deploy + id: builddeploy + uses: Azure/static-web-apps-deploy@v1 + with: + azure_static_web_apps_api_token: ${{ env.AZURE_STATIC_WEB_APPS_API_TOKEN }} # secret containing api token for app + repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments) + action: "upload" + ###### Repository/Build Configurations - These values can be configured to match you app requirements. ###### + # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig + app_location: ${{ env.APP_LOCATION }} + api_location: ${{ env.API_LOCATION }} + app_artifact_location: ${{ env.APP_ARTIFACT_LOCATION }} + ###### End of Repository/Build Configurations ###### + + close_pull_request_job: + permissions: + contents: none + if: github.event_name == 'pull_request' && github.event.action == 'closed' + runs-on: ubuntu-latest + name: Close Pull Request Job + steps: + - name: Close Pull Request + id: closepullrequest + uses: Azure/static-web-apps-deploy@v1 + with: + azure_static_web_apps_api_token: ${{ env.AZURE_STATIC_WEB_APPS_API_TOKEN }} # secret containing api token for app + action: "close" From 1f0860b7f00115f8b532a95679082e0b8db50a5f Mon Sep 17 00:00:00 2001 From: Gabriel Coloma Date: Tue, 12 Mar 2024 12:04:15 -0500 Subject: [PATCH 02/12] Updated deployment to work when CI succeeds --- .github/workflows/DjangoDeployment.yml | 5 ++++- .github/workflows/ReactDeployment.yml | 9 +++++---- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/.github/workflows/DjangoDeployment.yml b/.github/workflows/DjangoDeployment.yml index 2539ccd..eb2ccb8 100644 --- a/.github/workflows/DjangoDeployment.yml +++ b/.github/workflows/DjangoDeployment.yml @@ -24,8 +24,11 @@ env: PYTHON_VERSION: '3.10' # set this to the Python version to use on: - push: + workflow_run: branches: [ "master" ] + workflows: ["Django CI", "Node.js CI"] + types: + - completed workflow_dispatch: permissions: diff --git a/.github/workflows/ReactDeployment.yml b/.github/workflows/ReactDeployment.yml index 79e8bb0..d716587 100644 --- a/.github/workflows/ReactDeployment.yml +++ b/.github/workflows/ReactDeployment.yml @@ -13,11 +13,12 @@ name: Deploy web app to Azure Static Web Apps on: - push: - branches: [ "master" ] - pull_request: - types: [opened, synchronize, reopened, closed] + workflow_run: branches: [ "master" ] + workflows: ["Django CI", "Node.js CI"] + types: + - completed + workflow_dispatch: # Environment variables available to all jobs and steps in this workflow env: From fdda44661eecfd0bcee334c9541ad173df8247f3 Mon Sep 17 00:00:00 2001 From: Gabriel Coloma Date: Tue, 12 Mar 2024 18:07:31 -0500 Subject: [PATCH 03/12] Setup deployment files and configurations --- lvlgg_backend/.production | 2 + lvlgg_backend/lvlgg_backend/deployment.py | 47 ++++++++++++++++++++++ lvlgg_backend/lvlgg_backend/settings.py | 1 + lvlgg_backend/lvlgg_backend/wsgi.py | 2 +- lvlgg_backend/manage.py | 1 + lvlgg_backend/requirements.txt | Bin 68 -> 506 bytes 6 files changed, 52 insertions(+), 1 deletion(-) create mode 100644 lvlgg_backend/.production create mode 100644 lvlgg_backend/lvlgg_backend/deployment.py diff --git a/lvlgg_backend/.production b/lvlgg_backend/.production new file mode 100644 index 0000000..6278331 --- /dev/null +++ b/lvlgg_backend/.production @@ -0,0 +1,2 @@ +[config] +SCM_DO_BUILD_DURING_DEPLOYMENT=true \ No newline at end of file diff --git a/lvlgg_backend/lvlgg_backend/deployment.py b/lvlgg_backend/lvlgg_backend/deployment.py new file mode 100644 index 0000000..f1a8859 --- /dev/null +++ b/lvlgg_backend/lvlgg_backend/deployment.py @@ -0,0 +1,47 @@ +import os +from .settings import* +from .settings import BASE_DIR + +ALLOWED_HOSTS = [os.environ['WEBSITE_HOSTNAME']] +CSRF_TRUSTED_ORIGINS = ['https://' + os.environ['WEBSITE_HOSTNAME']] +DEBUG = False +SECRET_KEY = os.environ['MY_SEECRET_KEY'] + +MIDDLEWARE = [ + "django.middleware.security.SecurityMiddleware", + "whitenoise.middleware.WhiteNoiseMiddleWare", + "django.contrib.sessions.middleware.SessionMiddleware", + "corsheaders.middleware.CorsMiddleware", + "django.middleware.common.CommonMiddleware", + "django.middleware.csrf.CsrfViewMiddleware", + "django.contrib.auth.middleware.AuthenticationMiddleware", + "django.contrib.messages.middleware.MessageMiddleware", + "django.middleware.clickjacking.XFrameOptionsMiddleware", +] + +# CORS_ALLOWED_ORIGINS = ['http://localhost:3000' +# ] + +STORAGES = { + "default": { + "BACKEND": "django.core.files.storage.FileSystemStorage" + }, + "staticfiles": { + "BACCKEND": "whitenoise.storage.CompressedStaticFileStorage" + } +} + +CONNECTION = os.environ['AZURE_POSTGRESQL_CONNECTIONSTRING'] +CONNECTION_STR = {pair.split('=')[0]:pair.split('=')[1] for pair in CONNECTION.split('')} + +DATABASES = { + "default": { + "ENGINE": "django.db.backends.postgresql", + "NAME": CONNECTION_STR['dbname'], + "HOST": CONNECTION_STR['host'], + "USER": CONNECTION_STR['user'], + "PASSWORD": CONNECTION_STR['password'], + } +} + +STATIC_ROOT = BASE_DIR/'staticfiles' \ No newline at end of file diff --git a/lvlgg_backend/lvlgg_backend/settings.py b/lvlgg_backend/lvlgg_backend/settings.py index fdf6451..a9e6ddf 100644 --- a/lvlgg_backend/lvlgg_backend/settings.py +++ b/lvlgg_backend/lvlgg_backend/settings.py @@ -158,6 +158,7 @@ ] CSRF_TRUSTED_ORIGINS = ['http://localhost:3000'] +CORS_ALLOWED_ORIGINS = ['http://localhost:3000'] diff --git a/lvlgg_backend/lvlgg_backend/wsgi.py b/lvlgg_backend/lvlgg_backend/wsgi.py index 2e3b120..7957331 100644 --- a/lvlgg_backend/lvlgg_backend/wsgi.py +++ b/lvlgg_backend/lvlgg_backend/wsgi.py @@ -10,7 +10,7 @@ import os from django.core.wsgi import get_wsgi_application - +settings_module = 'lvlgg_backend.deployment' if 'WEBSITE_HOSTNAME' in os.environ else 'lvlgg_backend.settings' os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'lvlgg_backend.settings') application = get_wsgi_application() diff --git a/lvlgg_backend/manage.py b/lvlgg_backend/manage.py index ecdcfa8..a6f9e8d 100755 --- a/lvlgg_backend/manage.py +++ b/lvlgg_backend/manage.py @@ -6,6 +6,7 @@ def main(): """Run administrative tasks.""" + settings_module = 'lvlgg_backend.deployment' if 'WEBSITE_HOSTNAME' in os.environ else 'lvlgg_backend.settings' os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'lvlgg_backend.settings') try: from django.core.management import execute_from_command_line diff --git a/lvlgg_backend/requirements.txt b/lvlgg_backend/requirements.txt index fa1e6f053695ca74bf5969b4a4d18bd8dd95790a..ffb925536e99169e6e1106ad9fb604761e3dc636 100644 GIT binary patch literal 506 zcmZ9I-A;p05QOKtiI38TU#%Ct>w6d~RM85j91P&Yx1HI8*cfsMhnb!IcCVKL9&f18 zp~4Y6J}EYM;z{s;754Z*frg&e)SODRsO6oi1dpC69V@#g&ysJy=<1vrljGkBuS|F3O3aZ^eYT@?<+dnspi47_zN*jXgo&i@^fXx0 zSMXMmsOKh5OWyX5NB*B#iP%$H3N)TIqbZsq#v|X6b@4beO|x_)uFRv|i6%2gPfo{r p?e~R_(Ks5qYhw%3%dgo&syG61@sB5D4xFo=b6S4=b{5wk+YPsTO8fu- literal 68 zcmZ?CO3X{ox3x9ZGte{QDk!c@&M!!hPRh(nEUJvPwKdi=)H5{V;z|K4D@rXcNh?as RO)bwa$_7iC=oxTv0Ra1I6>k6l From 1e3d08df8cc18e4323c68ac5385774963282d3ce Mon Sep 17 00:00:00 2001 From: Gabriel Coloma Date: Tue, 12 Mar 2024 19:09:18 -0500 Subject: [PATCH 04/12] Removed CORS_ALLOWED_ORIGINS in settings.py --- lvlgg_backend/lvlgg_backend/settings.py | 1 - 1 file changed, 1 deletion(-) diff --git a/lvlgg_backend/lvlgg_backend/settings.py b/lvlgg_backend/lvlgg_backend/settings.py index a9e6ddf..fdf6451 100644 --- a/lvlgg_backend/lvlgg_backend/settings.py +++ b/lvlgg_backend/lvlgg_backend/settings.py @@ -158,7 +158,6 @@ ] CSRF_TRUSTED_ORIGINS = ['http://localhost:3000'] -CORS_ALLOWED_ORIGINS = ['http://localhost:3000'] From 9efc94b83f6eca29864075bfca0575a8faafa5c7 Mon Sep 17 00:00:00 2001 From: Gabriel Coloma Date: Tue, 12 Mar 2024 20:04:23 -0500 Subject: [PATCH 05/12] Made changes to AzureDeployBackend --- ...pgg-backend.yml => AzureDeployBackend.yml} | 147 ++++++++++-------- .github/workflows/DjangoDeployment.yml | 92 ----------- .github/workflows/ReactDeployment.yml | 71 --------- 3 files changed, 79 insertions(+), 231 deletions(-) rename .github/workflows/{master_lvlupgg-backend.yml => AzureDeployBackend.yml} (85%) delete mode 100644 .github/workflows/DjangoDeployment.yml delete mode 100644 .github/workflows/ReactDeployment.yml diff --git a/.github/workflows/master_lvlupgg-backend.yml b/.github/workflows/AzureDeployBackend.yml similarity index 85% rename from .github/workflows/master_lvlupgg-backend.yml rename to .github/workflows/AzureDeployBackend.yml index bb0a67f..0efc38b 100644 --- a/.github/workflows/master_lvlupgg-backend.yml +++ b/.github/workflows/AzureDeployBackend.yml @@ -1,66 +1,77 @@ -# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy -# More GitHub Actions for Azure: https://github.com/Azure/actions -# More info on Python, GitHub Actions, and Azure App Service: https://aka.ms/python-webapps-actions - -name: Build and deploy Python app to Azure Web App - lvlupgg-backend - -on: - push: - branches: - - master - workflow_dispatch: - -jobs: - build: - runs-on: ubuntu-latest - - steps: - - uses: actions/checkout@v4 - - - name: Set up Python version - uses: actions/setup-python@v1 - with: - python-version: '3.10' - - - name: Create and start virtual environment - run: | - python -m venv venv - source venv/bin/activate - - - name: Install dependencies - run: pip install -r requirements.txt - - # Optional: Add step to run tests here (PyTest, Django test suites, etc.) - - - name: Zip artifact for deployment - run: zip release.zip ./* -r - - - name: Upload artifact for deployment jobs - uses: actions/upload-artifact@v3 - with: - name: python-app - path: | - release.zip - !venv/ - - deploy: - runs-on: ubuntu-latest - needs: build - environment: - name: 'Production' - url: ${{ steps.deploy-to-webapp.outputs.webapp-url }} +# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy +# More GitHub Actions for Azure: https://github.com/Azure/actions +# More info on Python, GitHub Actions, and Azure App Service: https://aka.ms/python-webapps-actions + +name: Build and deploy Python app to Azure Web App - lvlupgg-backend + +on: + push: + branches: + - master + workflow_dispatch: + +jobs: + build: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v4 + + - name: Set up Python version + uses: actions/setup-python@v1 + with: + python-version: '3.10' + + - name: Create and start virtual environment + run: | + cd lvlgg_backend + python -m venv venv + source venv/bin/activate + + - name: Install dependencies + run: | + cd backend + python -m pip install --upgrade pip + pip install -r requirements.txt + + - name: Collect static files + run: | + cd backend + python manage.py collectstatic --noinput + + # Optional: Add step to run tests here (PyTest, Django test suites, etc.) + + - name: Zip artifact for deployment + run: | + cd lvlgg_backend + zip release.zip ./* -r + + - name: Upload artifact for deployment jobs + uses: actions/upload-artifact@v3 + with: + name: python-app + path: | + release.zip + !venv/ + + deploy: + runs-on: ubuntu-latest + needs: build + environment: + name: 'Production' + url: ${{ steps.deploy-to-webapp.outputs.webapp-url }} permissions: id-token: write #This is required for requesting the JWT - - steps: - - name: Download artifact from build job - uses: actions/download-artifact@v3 - with: - name: python-app - - - name: Unzip artifact for deployment - run: unzip release.zip - + + steps: + - name: Download artifact from build job + uses: actions/download-artifact@v3 + with: + name: python-app + + - name: Unzip artifact for deployment + run: unzip release.zip + - name: Login to Azure uses: azure/login@v1 @@ -68,11 +79,11 @@ jobs: client-id: ${{ secrets.AZUREAPPSERVICE_CLIENTID_D0EC002512024948BEDB0456F467333B }} tenant-id: ${{ secrets.AZUREAPPSERVICE_TENANTID_9D33C22D6BBE444D99A3A90F855A879F }} subscription-id: ${{ secrets.AZUREAPPSERVICE_SUBSCRIPTIONID_DD88327B9EFA4CF1B3B7A3B7976C1BAB }} - - - name: 'Deploy to Azure Web App' - uses: azure/webapps-deploy@v2 - id: deploy-to-webapp - with: - app-name: 'lvlupgg-backend' - slot-name: 'Production' + + - name: 'Deploy to Azure Web App' + uses: azure/webapps-deploy@v2 + id: deploy-to-webapp + with: + app-name: 'lvlupgg-backend' + slot-name: 'Production' \ No newline at end of file diff --git a/.github/workflows/DjangoDeployment.yml b/.github/workflows/DjangoDeployment.yml deleted file mode 100644 index eb2ccb8..0000000 --- a/.github/workflows/DjangoDeployment.yml +++ /dev/null @@ -1,92 +0,0 @@ -# This workflow will build and push a Python application to an Azure Web App when a commit is pushed to your default branch. -# -# This workflow assumes you have already created the target Azure App Service web app. -# For instructions see https://docs.microsoft.com/en-us/azure/app-service/quickstart-python?tabs=bash&pivots=python-framework-flask -# -# To configure this workflow: -# -# 1. Download the Publish Profile for your Azure Web App. You can download this file from the Overview page of your Web App in the Azure Portal. -# For more information: https://docs.microsoft.com/en-us/azure/app-service/deploy-github-actions?tabs=applevel#generate-deployment-credentials -# -# 2. Create a secret in your repository named AZURE_WEBAPP_PUBLISH_PROFILE, paste the publish profile contents as the value of the secret. -# For instructions on obtaining the publish profile see: https://docs.microsoft.com/azure/app-service/deploy-github-actions#configure-the-github-secret -# -# 3. Change the value for the AZURE_WEBAPP_NAME. Optionally, change the PYTHON_VERSION environment variables below. -# -# For more information on GitHub Actions for Azure: https://github.com/Azure/Actions -# For more information on the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy -# For more samples to get started with GitHub Action workflows to deploy to Azure: https://github.com/Azure/actions-workflow-samples - -name: Build and deploy Python app to Azure Web App - -env: - AZURE_WEBAPP_NAME: lvlupgg-backend # set this to the name of your Azure Web App - PYTHON_VERSION: '3.10' # set this to the Python version to use - -on: - workflow_run: - branches: [ "master" ] - workflows: ["Django CI", "Node.js CI"] - types: - - completed - workflow_dispatch: - -permissions: - contents: read - -jobs: - build: - runs-on: ubuntu-latest - - steps: - - uses: actions/checkout@v3 - - - name: Set up Python version - uses: actions/setup-python@v3.0.0 - with: - python-version: ${{ env.PYTHON_VERSION }} - cache: 'pip' - - - name: Create and start virtual environment - run: | - python -m venv venv - source venv/bin/activate - - - name: Install dependencies - run: | - pip install -r requirements.txt - pip install djangorestframework - pip install django-cors-headers - - # Optional: Add step to run tests here (PyTest, Django test suites, etc.) - - - name: Upload artifact for deployment jobs - uses: actions/upload-artifact@v3 - with: - name: python-app - path: | - . - !venv/ - - deploy: - permissions: - contents: none - runs-on: ubuntu-latest - needs: build - environment: - name: 'Development' - url: ${{ steps.deploy-to-webapp.outputs.webapp-url }} - - steps: - - name: Download artifact from build job - uses: actions/download-artifact@v3 - with: - name: python-app - path: . - - - name: 'Deploy to Azure Web App' - id: deploy-to-webapp - uses: azure/webapps-deploy@v2 - with: - app-name: ${{ env.AZURE_WEBAPP_NAME }} - publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }} diff --git a/.github/workflows/ReactDeployment.yml b/.github/workflows/ReactDeployment.yml deleted file mode 100644 index d716587..0000000 --- a/.github/workflows/ReactDeployment.yml +++ /dev/null @@ -1,71 +0,0 @@ -# This workflow will build and push a web application to an Azure Static Web App when you change your code. -# -# This workflow assumes you have already created the target Azure Static Web App. -# For instructions see https://docs.microsoft.com/azure/static-web-apps/get-started-portal?tabs=vanilla-javascript -# -# To configure this workflow: -# -# 1. Set up a secret in your repository named AZURE_STATIC_WEB_APPS_API_TOKEN with the value of your Static Web Apps deployment token. -# For instructions on obtaining the deployment token see: https://docs.microsoft.com/azure/static-web-apps/deployment-token-management -# -# 3. Change the values for the APP_LOCATION, API_LOCATION and APP_ARTIFACT_LOCATION, AZURE_STATIC_WEB_APPS_API_TOKEN environment variables (below). -# For instructions on setting up the appropriate configuration values go to https://docs.microsoft.com/azure/static-web-apps/front-end-frameworks -name: Deploy web app to Azure Static Web Apps - -on: - workflow_run: - branches: [ "master" ] - workflows: ["Django CI", "Node.js CI"] - types: - - completed - workflow_dispatch: - -# Environment variables available to all jobs and steps in this workflow -env: - APP_LOCATION: "/" # location of your client code - API_LOCATION: "api" # location of your api source code - optional - APP_ARTIFACT_LOCATION: "build" # location of client code build output - AZURE_STATIC_WEB_APPS_API_TOKEN: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} # secret containing deployment token for your static web app - -permissions: - contents: read - -jobs: - build_and_deploy_job: - permissions: - contents: read # for actions/checkout to fetch code - pull-requests: write # for Azure/static-web-apps-deploy to comment on PRs - if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed') - runs-on: ubuntu-latest - name: Build and Deploy Job - steps: - - uses: actions/checkout@v3 - with: - submodules: true - - name: Build And Deploy - id: builddeploy - uses: Azure/static-web-apps-deploy@v1 - with: - azure_static_web_apps_api_token: ${{ env.AZURE_STATIC_WEB_APPS_API_TOKEN }} # secret containing api token for app - repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments) - action: "upload" - ###### Repository/Build Configurations - These values can be configured to match you app requirements. ###### - # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig - app_location: ${{ env.APP_LOCATION }} - api_location: ${{ env.API_LOCATION }} - app_artifact_location: ${{ env.APP_ARTIFACT_LOCATION }} - ###### End of Repository/Build Configurations ###### - - close_pull_request_job: - permissions: - contents: none - if: github.event_name == 'pull_request' && github.event.action == 'closed' - runs-on: ubuntu-latest - name: Close Pull Request Job - steps: - - name: Close Pull Request - id: closepullrequest - uses: Azure/static-web-apps-deploy@v1 - with: - azure_static_web_apps_api_token: ${{ env.AZURE_STATIC_WEB_APPS_API_TOKEN }} # secret containing api token for app - action: "close" From 033a2ecd7b9c3f3d09ba5d6a7fa9176b4aa268c6 Mon Sep 17 00:00:00 2001 From: Gabriel Coloma Date: Tue, 12 Mar 2024 20:16:59 -0500 Subject: [PATCH 06/12] Created script to migrate database --- lvlgg_backend/build_script.sh | 1 + 1 file changed, 1 insertion(+) create mode 100644 lvlgg_backend/build_script.sh diff --git a/lvlgg_backend/build_script.sh b/lvlgg_backend/build_script.sh new file mode 100644 index 0000000..5fe6332 --- /dev/null +++ b/lvlgg_backend/build_script.sh @@ -0,0 +1 @@ +python manage.py migrate \ No newline at end of file From 12156633a35a6900488bea2c051c3053899a3c00 Mon Sep 17 00:00:00 2001 From: Gabriel Coloma Date: Tue, 12 Mar 2024 20:27:48 -0500 Subject: [PATCH 07/12] Removed master_lvlgg-backend-deployment --- .github/workflows/master_lvlupgg-backend.yml | 78 -------------------- 1 file changed, 78 deletions(-) delete mode 100644 .github/workflows/master_lvlupgg-backend.yml diff --git a/.github/workflows/master_lvlupgg-backend.yml b/.github/workflows/master_lvlupgg-backend.yml deleted file mode 100644 index bb0a67f..0000000 --- a/.github/workflows/master_lvlupgg-backend.yml +++ /dev/null @@ -1,78 +0,0 @@ -# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy -# More GitHub Actions for Azure: https://github.com/Azure/actions -# More info on Python, GitHub Actions, and Azure App Service: https://aka.ms/python-webapps-actions - -name: Build and deploy Python app to Azure Web App - lvlupgg-backend - -on: - push: - branches: - - master - workflow_dispatch: - -jobs: - build: - runs-on: ubuntu-latest - - steps: - - uses: actions/checkout@v4 - - - name: Set up Python version - uses: actions/setup-python@v1 - with: - python-version: '3.10' - - - name: Create and start virtual environment - run: | - python -m venv venv - source venv/bin/activate - - - name: Install dependencies - run: pip install -r requirements.txt - - # Optional: Add step to run tests here (PyTest, Django test suites, etc.) - - - name: Zip artifact for deployment - run: zip release.zip ./* -r - - - name: Upload artifact for deployment jobs - uses: actions/upload-artifact@v3 - with: - name: python-app - path: | - release.zip - !venv/ - - deploy: - runs-on: ubuntu-latest - needs: build - environment: - name: 'Production' - url: ${{ steps.deploy-to-webapp.outputs.webapp-url }} - permissions: - id-token: write #This is required for requesting the JWT - - steps: - - name: Download artifact from build job - uses: actions/download-artifact@v3 - with: - name: python-app - - - name: Unzip artifact for deployment - run: unzip release.zip - - - - name: Login to Azure - uses: azure/login@v1 - with: - client-id: ${{ secrets.AZUREAPPSERVICE_CLIENTID_D0EC002512024948BEDB0456F467333B }} - tenant-id: ${{ secrets.AZUREAPPSERVICE_TENANTID_9D33C22D6BBE444D99A3A90F855A879F }} - subscription-id: ${{ secrets.AZUREAPPSERVICE_SUBSCRIPTIONID_DD88327B9EFA4CF1B3B7A3B7976C1BAB }} - - - name: 'Deploy to Azure Web App' - uses: azure/webapps-deploy@v2 - id: deploy-to-webapp - with: - app-name: 'lvlupgg-backend' - slot-name: 'Production' - \ No newline at end of file From a427d810af3e70f26d85254b8eb3630afa7bcfe5 Mon Sep 17 00:00:00 2001 From: Gabriel Coloma Date: Tue, 12 Mar 2024 20:30:52 -0500 Subject: [PATCH 08/12] Changed when workflow triggers --- .github/workflows/docker-hub.yml | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/.github/workflows/docker-hub.yml b/.github/workflows/docker-hub.yml index b1cd2c9..b4b648c 100644 --- a/.github/workflows/docker-hub.yml +++ b/.github/workflows/docker-hub.yml @@ -1,10 +1,9 @@ name: Release to Docker Hub on: - push: - branches: - - "master" - pull_request: + workflow_run: + types: ['completed'] + workflows: ['Django CI', 'Node.js CI'] branches: - "master" From d08e637302adf29fcc11b5aa3f18e08b58a16918 Mon Sep 17 00:00:00 2001 From: Gabriel Coloma Date: Tue, 12 Mar 2024 20:35:59 -0500 Subject: [PATCH 09/12] Added workflow dispatch in docker-hub.yml --- .github/workflows/docker-hub.yml | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/.github/workflows/docker-hub.yml b/.github/workflows/docker-hub.yml index b4b648c..8426955 100644 --- a/.github/workflows/docker-hub.yml +++ b/.github/workflows/docker-hub.yml @@ -1,12 +1,14 @@ name: Release to Docker Hub on: - workflow_run: - types: ['completed'] - workflows: ['Django CI', 'Node.js CI'] + push: branches: - "master" - + pull_request: + branches: + - "master" + workflow_dispatch: + jobs: build: runs-on: ubuntu-latest From 9afd9d121c97ca8b7fd8a2a8e8925d9ef8f3fbab Mon Sep 17 00:00:00 2001 From: Zen-Kristalovich Date: Tue, 12 Mar 2024 20:50:58 -0500 Subject: [PATCH 10/12] Brief Change Update what is returned --- lvlgg_backend/blog/views.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lvlgg_backend/blog/views.py b/lvlgg_backend/blog/views.py index e2c6e8a..be3c4fa 100644 --- a/lvlgg_backend/blog/views.py +++ b/lvlgg_backend/blog/views.py @@ -147,7 +147,7 @@ def get(self, request, *args, **kwargs): queryset = queryset.order_by('-date_posted')[:10] # Convert each blog instance into a dictionary with only id and title - blogs_list = list(queryset.values('id', 'title')) + blogs_list = list(queryset.values('id', 'title', 'game')) return JsonResponse({'blogs': blogs_list}) From 70a53b8521af161ca270a0b0a33b262f7532b79e Mon Sep 17 00:00:00 2001 From: NicBG Date: Tue, 12 Mar 2024 22:21:53 -0500 Subject: [PATCH 11/12] changed styling for guides --- lvlgg_frontend/src/App.css | 112 ++++++++++++++---- lvlgg_frontend/src/App.js | 2 + .../src/Components/Pages/BlogDetail.js | 47 ++++++++ lvlgg_frontend/src/Components/Pages/Guides.js | 70 ++++++----- 4 files changed, 171 insertions(+), 60 deletions(-) create mode 100644 lvlgg_frontend/src/Components/Pages/BlogDetail.js diff --git a/lvlgg_frontend/src/App.css b/lvlgg_frontend/src/App.css index 56955f7..3e21713 100644 --- a/lvlgg_frontend/src/App.css +++ b/lvlgg_frontend/src/App.css @@ -81,24 +81,26 @@ .guides-button { padding: 5px 10px; font-size: 12px; - background-color: #0e94e2; + background-color: #12b9e2; color: #fff; border: none; border-radius: 5px; cursor: pointer; + font-family: OCR A Std, monospace; } .guides-button:hover { - background-color: #0c7abf; + background-color: #043b3f; } .guide-titles { - font-size: 30px; - margin-top: 0; /* Remove default margin */ - margin-bottom: 70px; /* Add margin to separate from buttons */ - position: absolute; /* Position absolute to move to top left corner */ - top: 40px; /* Distance from top */ - left: 20px; /* Distance from left */ + font-size: 25px; + margin-top: 0; + margin-bottom: 70px; + position: absolute; + top: 60px; + left: 50px; + font-family: OCR A Std, monospace; } .guide-list { @@ -120,16 +122,34 @@ padding: 10px; background-color: #0e94e2; color: #fff; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s; - width: 150px; - height: 150px; + border-radius: 0 0 5px 5px; + width: 100%; + height: 50px; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 14px; + transition: background-color 0.3s; +} + +.guide-item { + width: 150px; + height: 200px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + margin-right: 10px; + margin-bottom: 10px; + cursor: pointer; +} + +.guide-image { + width: 100%; /* Make image fill the container width */ + height: 150px; /* Adjust height as necessary */ + border-radius: 5px 5px 0 0; /* Round top corners */ + object-fit: cover; /* Ensure the image covers the area without distortion */ } .guide-title:hover { @@ -160,14 +180,65 @@ font-weight: bold; } - - .top-right { position: absolute; top: 30px; right: 20px; } +/* BlogDetail.css */ +.page-container { + position: relative; + width: 100%; + height: 98vh; + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +.blog-detail-container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 80%; + padding: 20px; + background-color: rgba(255, 255, 255, 0.8); + border-radius: 10px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); +} + +.blog-title { + font-size: 24px; + font-weight: bold; + margin-bottom: 10px; + color: #333; +} + +.blog-content { + font-size: 16px; + line-height: 1.6; + color: #666; +} + +.blog-metadata { + font-size: 14px; + color: #999; + margin-top: 10px; +} + +.blog-metadata span { + font-weight: bold; +} + + +@media (max-width: 768px) { + .blog-detail-content { + padding: 15px; + } +} + + .settings { display: flex; align-items: center; @@ -285,12 +356,10 @@ background-color: #0c7abf; } -/* Style the dropdown container */ .dropdown-container { position: relative; } -/* Style the dropdown select */ .dropdown-select { width: 100%; max-width: 500px; @@ -302,23 +371,21 @@ color: gray } -/* Style the dropdown arrow */ .dropdown-arrow { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); - pointer-events: none; /* Ensure the arrow does not interfere with clicking the select */ + pointer-events: none; } -/* Style the dropdown options */ .dropdown-options { position: absolute; top: 100%; left: 0; z-index: 1000; width: 100%; - max-height: 200px; /* Adjust as needed */ + max-height: 200px; overflow-y: auto; border: 1px solid #ccc; border-radius: 5px; @@ -326,14 +393,13 @@ box-shadow: 0 2px 4px rgba(124, 124, 124, 0.1); } -/* Style the dropdown option items */ + .dropdown-option { padding: 8px 12px; cursor: pointer; color: gray } -/* Style the selected option */ .dropdown-option.selected { background-color: #f0f0f0; } diff --git a/lvlgg_frontend/src/App.js b/lvlgg_frontend/src/App.js index 92481c6..a3952bb 100644 --- a/lvlgg_frontend/src/App.js +++ b/lvlgg_frontend/src/App.js @@ -11,6 +11,7 @@ import Guides from './Components/Pages/Guides' import SignIn from './Components/Pages/SignIn' import CreateGuide from './Components/Pages/CreateGuide' import Settings from './Components/Pages/Settings' +import BlogDetail from './Components/Pages/BlogDetail' function App() { @@ -27,6 +28,7 @@ function App() { + diff --git a/lvlgg_frontend/src/Components/Pages/BlogDetail.js b/lvlgg_frontend/src/Components/Pages/BlogDetail.js new file mode 100644 index 0000000..ec77423 --- /dev/null +++ b/lvlgg_frontend/src/Components/Pages/BlogDetail.js @@ -0,0 +1,47 @@ +import React, { useEffect, useState } from 'react'; +import { useParams } from 'react-router-dom'; +import axios from 'axios'; +import '../../App.css'; + +const BlogDetail = () => { + const { id } = useParams(); + const [blog, setBlog] = useState(null); + + const gameImageMap = { + "EldenRing": "url(/images/eldenRing.png)", + "LeagueOfLegends": "url(/images/league.png)", + "Dota2": "url(/images/dota.jpg)", + "CSGO": "url(/images/csgo.jpg)", + "BaldursGate3": "url(/images/baldursGate.jpeg)", + }; + + useEffect(() => { + axios.get(`http://localhost:8000/blog/get_blog/?id=${id}`) + .then(response => { + setBlog(response.data.blogs[0]); + }) + .catch(error => { + console.error('Error fetching blog:', error); + }); + }, [id]); // Re-run the effect if the ID changes + + + + if (!blog) { + return
Loading...
; + } + + return ( +
+
+

{blog.title}

+

{blog.content}

+

Date Posted: {blog.date_posted}

+

Author: {blog.author}

+
+
+ ); +}; + +export default BlogDetail; + diff --git a/lvlgg_frontend/src/Components/Pages/Guides.js b/lvlgg_frontend/src/Components/Pages/Guides.js index 3aa425a..a33c42b 100644 --- a/lvlgg_frontend/src/Components/Pages/Guides.js +++ b/lvlgg_frontend/src/Components/Pages/Guides.js @@ -1,16 +1,24 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useContext } from 'react'; import '../../App.css'; -import { Link, useLocation } from "react-router-dom"; +import { Link, useLocation, useHistory } from "react-router-dom"; import axios from "axios"; -//import { AuthContext } from '../../Contexts/AuthContext' +import { AuthContext } from '../../Contexts/AuthContext' export default function Guides() { - //const {setIsSignedIn} = useContext(AuthContext); + const {isSignedIn} = useContext(AuthContext); const [blogs, setBlogs] = useState([]); - const [selectedBlog, setSelectedBlog] = useState(null); const location = useLocation(); const game = new URLSearchParams(location.search).get('gameName'); + const history = useHistory(); + + const gameImageMap = { + "EldenRing": "images/eldenRing.png", + "LeagueOfLegends": "images/league.png", + "Dota2": "images/dota.jpg", + "CSGO": "images/csgo.jpg", + "BaldursGate3": "images/baldursGate.jpeg", + }; useEffect(() => { let url = 'http://localhost:8000/blog/get_blog/'; @@ -28,15 +36,7 @@ export default function Guides() { }, [game]); const handleBlogClick = (blogId) => { - axios.get(`http://localhost:8000/blog/get_blog/?id=${blogId}`) - .then(response => { - console.log(response.data.blogs) - setSelectedBlog(response.data.blogs); - console.log(selectedBlog[0].content) - }) - .catch(error => { - console.error('Error fetching blog content:', error); - }); + history.push(`/blog/${blogId}`); }; const formatDate = (dateString) => { @@ -51,34 +51,30 @@ export default function Guides() { return (
- - - + {isSignedIn ? ( + + + + ) : ( + + + + )}

Guides

- {blogs.length === 0 ? ( -

Nothing to see here

- ) : ( -
    - {blogs.map(blog => ( -
  • handleBlogClick(blog.id)}> + +
      + {blogs.map(blog => ( +
    • handleBlogClick(blog.id)}> +
      + {blog.title}
      {blog.title}
      -
      • - ))} -
    - )} -
    - {selectedBlog && selectedBlog.length > 0 && ( -
    -

    {selectedBlog[0].title}

    -

    {selectedBlog[0].content}

    -

    Date Posted: {formatDate(selectedBlog[0].date_posted)}

    -

    Author: {selectedBlog[0].author}

    -
    - )} -
    +
+ + ))} + ) } From 3f03b37a491df6a96e767953721a048fbf6a32f9 Mon Sep 17 00:00:00 2001 From: NicBG Date: Tue, 12 Mar 2024 22:24:03 -0500 Subject: [PATCH 12/12] fix --- lvlgg_frontend/src/Components/Pages/Guides.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/lvlgg_frontend/src/Components/Pages/Guides.js b/lvlgg_frontend/src/Components/Pages/Guides.js index a33c42b..c29f56e 100644 --- a/lvlgg_frontend/src/Components/Pages/Guides.js +++ b/lvlgg_frontend/src/Components/Pages/Guides.js @@ -39,15 +39,6 @@ export default function Guides() { history.push(`/blog/${blogId}`); }; - const formatDate = (dateString) => { - const formattedDate = new Date(dateString).toLocaleDateString('en-US', { - year: 'numeric', - month: 'long', - day: 'numeric', - }); - return formattedDate; - }; - return (