Running Frontend and Backend Development Servers Together

You are developing your backend in Django or Flask and are looking to combine it with a cool dynamic frontend - Vue.js, Angular, React or Ember.

How to make it possible for the frontend to access the backend server, while both run in development and provide you with useful debug outputs and convenient development functionality? You’d want to somehow combine both servers, so they can interact with each other. But each can only run on its own port. You can’t start both on the same one and if they are apart, it’s impossible for the frontend code to access the backend endpoints.

Fear not. If you really want to run both servers, you have to make sure that both are accessible through the same port. Otherwise browser restrictions will not allow your javascript code to access endpoints on another port due to cross-domain requests being a thing of evil.

You have 3 options. Two of them make it possible to run the frontend and backend servers at the same time, but have them integrated with each other.

Use a proxy funciton of the frontend development server

This is the option you want to go for in most cases. If you are using a vue.js development environment, you can set the frontend development server to forward certain paths to another server and make the results available. See the Webpack proxy example for details.

Use a dedicated reverse proxy service

Set up Nginx to unify both development servers. The backend and frontend servers will run on their own ports each, and nginx will listen on its own. But it will reverse-proxy (pass on) requests starting with a certain prefix like /api to the backend and everything else to the frontend.

Don’t use a frontend development server

A simple, but tedious way. Just make sure the most recent version of the frontend build gets copied into the backend /static folder (or similar). So it can be served by the backend server. You will need to write views to serve your frontend and will probably miss out on some debug goodies of the frontend development server.