skip to Main Content

I’m building a SPA using Django for my backend and Vue to handle the entire frontend. The two apps are completely separated and they will communicate using JSON, so Django acts as an API. In order to avoid some security issue and keep using the standard Django session authentication, I’m going to run these two apps in production on the same sever and on the same port, and I will set up NGINX to route traffic, so that /account/login will be handled by Django while /app/someURL is redirected to the Vue application.

How can I do the same locally, during development? If I run manage.py runserver and npm run serve -- ---port 8000 the two apps will clash because there is no way to know where should each request be redirected.

2

Answers


  1. If you really need to run both apps on same port using Nginx, the the option is to use two locations to redirect your requests. Something like:

    location /serverA/ {
    ...
    proxy_pass http://serverA:port/;
    ...
    }
    
    location /serverB/ {
    ...
    proxy_pass http://serverB:port/;
    ...
    }
    

    This will only work if servers have unique IP.

    Login or Signup to reply.
  2. As you use npm just to serve the static content, you can easily serve the Vue app with the Django backend. If you want some pages to be rendered by Django and others by Vue, then you could create two base templates: one for pure Django pages and one for pure Vue pages that may use the vue-router library for routing.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search