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
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:
This will only work if servers have unique IP.
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.