I’m working on a Django project and need help with setting up the frontend properly. I want to integrate modern tools like webpack, npm, SCSS, and Vue.js into my Django application. What’s the recommended way to organize these frontend assets and build tools? Should I create separate directories for static files? How do other developers handle the integration between Django’s template system and modern JavaScript frameworks? I’m using Python 3.8 and Django 4.0. Any advice on folder structure and configuration would be really helpful. I’ve been struggling with making everything work together smoothly.
In my experience with Django projects, I recommend adopting a hybrid approach for structuring your frontend components. Start by creating a frontend/ directory at the root of your project for all your frontend assets. This should include your npm dependencies, webpack configuration, Vue components, and SCSS files. It’s crucial to configure webpack to compile the assets directly into Django’s static/ directories using absolute paths. Treat Django templates as entry points rather than solely relying on Django’s static file system. When using Vue, consider leveraging the Django REST Framework for API endpoints, allowing Vue to manage dynamic portions of your app. This way, you can maintain Django’s powerful templating features while also achieving the modern interactivity that Vue provides.
i’ve been running django + vue for ages. easiest approach? keep them completely separate. vue on localhost:8080, django api on 8000, then proxy the api calls. way less headache than wrestling with webpack and django’s static system.
Interesting points! @Echo_Vibrant, your separate setup sounds clean for dev, but what’s your production deployment like? Two servers or do you merge them somehow? And @Ava89, how does SEO compare between full SPA vs your hybrid approach?