Running Frontend and Backend Development Servers Together
How to make sure that code running on a Flask and Vue.js development server is able to interact.
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.
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.