Django/React - Azure App Service can't find static files

Question

I've deployed my Django React app previously through a dedicated server and now I am trying to achieve the same with Azure Web App function so I can use CI/CD easier. I've configured my project as below but only my django appears to deploy as I get a '404 main.js and index.css not found'.

This makes me think there is an issue with my static file configuration but I'm unsure.

.yml file:

name: Build and deploy Python app to Azure Web App - test123

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
        working-directory: ./frontend

      - name: Set up Python version
        uses: actions/setup-python@v1
        with:
          python-version: '3.8'

      - name: Create and start virtual environment
        run: |
          python -m venv venv
          source venv/bin/activate
      
      - name: Install dependencies
        run: |
             pip install -r requirements.txt
             python manage.py collectstatic --noinput

      - name: Zip artifact for deployment
        run: zip pythonrelease.zip ./* -r

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: python-app
          path: pythonrelease.zip

        
      # Optional: Add step to run tests here (PyTest, Django test suites, etc.)




  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v2
        with:
          name: python-app
          path: .


      - name: unzip artifact for deployment
        run: unzip pythonrelease.zip

          
      - name: 'Deploy to Azure Web App'
        uses: azure/webapps-deploy@v2
        id: deploy-to-webapp
        with:
          app-name: 'test123'
          slot-name: 'Production'
          publish-profile: ${{ secrets.secret}}

settings.py

STATIC_URL = '/static/'

STATIC_ROOT = 'staticfiles'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

Repo Structure:

Any advice would be greatly appreciated.

Cheers

Answer 1

To host static files in your web app, add the whitenoise package to requirements.txt and the configuration for it to settings.py. as mentioned here : Django Tips

requirements.txt | whitenoise==4.1.2