How to Seamlessly Combine Django and VueJS for a Modern Front‑Back End Project

Why choose Django and VueJS? Django offers a mature Python MVC framework with an ORM, admin app, and extensive ecosystem (SaltStack, Ansible, Pandas, Celery, REST framework). VueJS provides a smooth MVVM experience with two‑way data binding, single‑file components, clear lifecycle, and an easy learning curve.

Key advantages of single‑file components are encapsulated template, script, and style sections, eliminating global CSS conflicts and making each component self‑contained.

Project structure

Backend: Django project with an app named backend Frontend: VueJS project generated via vue-cli Step 1: Create Django project django-admin startproject ulb_manager Step 2: Create backend app

cd ulb_manager
python manage.py startapp backend

Step 3: Create VueJS frontend vue init webpack frontend Step 4: Build the VueJS app with Webpack

cd frontend
npm install
npm run build

The build generates a dist folder containing index.html and a static directory.

Step 5: Configure Django to serve the VueJS build

In ulb_manager/urls.py add a template view for the root URL:

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$', TemplateView.as_view(template_name="index.html")),
    url(r'^api/', include('backend.urls', namespace='api')),
]

Set the template search path to the VueJS build output:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['frontend/dist'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Configure static file search path:

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/dist/static"),
]

Now Django can serve / and locate static assets.

Development workflow

During development, rebuild the VueJS app after changes or use npm run dev for hot‑reloading. To avoid CORS issues when the VueJS dev server calls Django APIs, install django-cors-headers and add the middleware and setting:

# settings.py
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    '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_ORIGIN_ALLOW_ALL = True

Production deployment (UCloud)

Install required packages on the server (git, nodejs, npm, nginx, uwsgi) and configure uWSGI:

[uwsgi]
socket = 127.0.0.1:9292
stats = 127.0.0.1:9293
workers = 4
chdir = /opt/inner_ulb_manager
module = inner_ulb_manager.wsgi
pidfile = /var/run/inner_ulb_manager.pid
daemonize = /var/log/inner_ulb_manager.log

Configure Nginx to proxy requests to uWSGI and serve static files:

server {
    listen 8888;
    server_name 120.132.xx.xx;
    root /opt/inner_ulb_manager;
    location / {
        uwsgi_pass 127.0.0.1:9292;
        include /etc/nginx/uwsgi_params;
    }
    location /static/ {
        root /opt/inner_ulb_manager/;
        access_log off;
    }
    location ^~ /admin/ {
        uwsgi_pass 127.0.0.1:9292;
        include /etc/nginx/uwsgi_params;
    }
}

Collect static files into a single directory:

STATIC_ROOT = os.path.join(BASE_DIR, "static")
python manage.py collectstatic

Use a production settings module (e.g., prod.py) that disables DEBUG and sets CORS_ORIGIN_ALLOW_ALL = False. Update the uWSGI module path accordingly.

Start services:

uwsgi --ini inner_ulb_manager.ini
service nginx start

After these steps, the integrated Django‑VueJS application runs in both development and production environments.