CODEWITHSUNDEEP
djangoazurevue.jsazure-web-app-service
Rakesh RG
Rakesh RG

Reputation: 60

404 - File not found error for static files while deploying Django and Vue js integrated project in Azure web services

I created a project with Django as backend and Vue js as frontend. Initially I ran Django on one server(8000) and Vue js on another (8080) with node.js . Then, I integrated Both to the same server with proxy changes in vue.config.js. Then I ran the command NPM RUN BUILD on terminal and I moved the dist folder to Django's static folder to render. This worked perfectly in local development environment but I'm getting 404 error for static files while deploying the project in Azure web services through git-hub. Thanks for any fix or sugesstions.

Here is my settings.py file. I have also tried commenting STATIC_ROOT


STATIC_URL = '/static/'


# Vue assets directory (assetsDir)
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

Here is my vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '^/api/': {
        target: 'http://127.0.0.1:8000/api/',
        ws: false,
      }
    }
  },
  // outputDir must be added to Django's TEMPLATE_DIRS
  outputDir: './dist/',
  // assetsDir must match Django's STATIC_URL
  assetsDir: 'static',
  publicPath: '',
  baseUrl: '',
}

Here is my project file structure

Here is the error in my console

Upvotes: 0

Views: 1246

Answers (1)

Achuth Varghese
Achuth Varghese

Reputation: 2451

If you are running on production server, static files are served differently from dev server. Additional changes has to be made in main urls and settings. Docs link

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # your url patterns
] 

# for serving static files
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
# for serving media files (files that were uploaded through your project application)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Obviously, you have to add STATIC_URL, STATIC_ROOT, MEDIA_URL, MEDIA_ROOT in project settings.py file.

Also, you need to run python manage.py collectstatic after setting STATIC_ROOT. Docs link 1 and link 2

Upvotes: 1

Related Questions